I am trying to add a poster image in the react-native-video library. In android, it works fine but in the iOS poster, the image shows for 1-2 seconds and then getting disappeared.
My react-native version is 0.63.3.
Below is my code.
<Video
style={this.props.styles.video}
source={{
uri: !this.state.isEnabled
? this.props.url
: this.props.caption_url,
}}
// Can be a URL or a local file.
ref={(ref) => {
this.player = ref;
}}
poster={this.props.poster}
paused={this.state.paused}
muted={this.state.muted}
controls={this.props.controls}
resizeMode={'cover'}
// resizeMode={'stretch'}
fullscreen={true}
onLoad={this.handleLoad}
onProgress={this.handleProgress}
onEnd={this.handleEnd}
fullscreen={this.state.fullscreen}
onError={(error) => {
console.log(error, 'THIS IS ERROR');
}}
/>
Related
I'm currently using expo-av to show videos on my website in react native. The videos that expo-av provides comes as a uri link, but I want to allow people to upload videos from their computer files in order to post videos. Can someone show me how to do this? My code so far is:
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
<Video
ref={video}
style={styles.video}
source={{
uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={status => setStatus(() => status)}
/>
<View style={styles.buttons}>
<Button
title={status.isPlaying ? 'Pause' : 'Play'}
onPress={() =>
status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
}
/>
</View>
The same website works absolute fine in android, however in iOS it seems to come up with this message:
Possible Unhandled Promise Rejection (id:11): Error: Unable to open URL about:blank
I also seem to get this when the site URI is linking to URLs from a different domain.
I have tried adding: originWhitelist={['*']}
Here is the Webview code:
<WebView
style={styles.flexContainer}
startInLoadingState
renderLoading={() =>
<View style={styles.container}>
<ActivityIndicator size="large" color="#ffffff" styles={styles.loader}/>
</View>
}
onMessage={event => {
parseWebData(event.nativeEvent.data);
}}
onShouldStartLoadWithRequest={event => {
if (!event.url.startsWith(base)) {
Linking.openURL(event.url)
return false
}
return true
}}
originWhitelist = {['*']}
source = {{ uri: base + uri }}
/>
1st try this one
<WebView
source={{ uri: base + uri }}
style={{ height: 400, width: 400 }}
useWebKit={true}
startInLoadingState={false}
javaScriptEnabled
domStorageEnabled
/>
onShouldStartLoadWithRequest={event => {
if (!event.url.startsWith(base)) {
Linking.openURL(event.url)
return false
}
return true
}}
This was the problem.
iOS treats any URL load with this, whereas Android only fires this on clicking.
See this post for the explanation of the issue:
onShouldStartLoadWithRequest automatically calling in iOS React Native on loading of any url in WebView, How to control it?
I am pretty new to react-native. Currently, I am developing an app with react native web-view.
My requirement is to open external links of the app in a chrome tab. To achieve that I used the following code.
<WebView
source={{uri: catalog_url}}
onNavigationStateChange={(event) => {
if (!event.url.includes(home_url)) {
this.WebView.stopLoading()
Linking.openURL(event.url);
}
}}
/>
But I found that the highlighted line is not working currently.
Any reference to this.WebView line gives an error saying
this.WebView doesn't exist.
I need an alternative to this.WebView.
If you want to reference of this webview. First, you must assign a reference like that.
<WebView
ref={webview => this.WebView = webview}
source={{uri: catalog_url}}
onNavigationStateChange={(event) => {
if (!event.url.includes(home_url)) {
this.WebView.stopLoading()
Linking.openURL(event.url);
}
}}
/>
So you have missed the ref props from the WebView component
Solution
<WebView
ref={(ref) => (this.WebView = ref)}
source={{ uri: catalog_url }}
onNavigationStateChange={(event) => {
if (!event.url.includes(home_url)) {
this.WebView.stopLoading();
Linking.openURL(event.url);
}
}}
/>
If you need more reference about how to use WebView in RN visit here
Im storing the local file in xcode,files are loading in simulator but not loading in ios device
im using react-native-webview version 5.0.1, in my webview im passing sourse as {uri: 'ICF-Package/ICFPackage/index.html'}
<WebView
source={Platform.OS === 'ios' ?
{uri: 'ICF-Package/ICFPackage/index.html'} :
{ uri: 'file:///android_asset/ICF-Package/ICFPackage/index.html' }
}
ref={(webView) => this.webView = webView}
originWhitelist={'["*"]'}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
useWebKit = {true}
//scalesPageToFit={true}
scrollEnabled={false}
onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={true}
/>
im not getting any error message but files are not loading in real device
Maybe that helps you to debug WebViews a bit deeper if running at your Device: https://stackoverflow.com/a/48572797/1256697
But as little Workaround for local files, you could try to use the 'html' parameter instead the 'uri' Parameter for IOS:
const myHTML = require('./ICF-Package/ICFPackage/index.html');
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
Also see: https://aboutreact.com/load-local-html-file-url-using-react-native-webview/
But maybe the cleanest way to solve it for IOS is to put a copy of your html-File in Project > resources > index.html and link it like that with your Webview:
<WebView
style={{flex: 1}}
originWhitelist={['*']}
source={'./resources/index.html'}
javaScriptEnabled={true}
domStorageEnabled={true}
/>
I'm using a Video component like this:
<Video style={[videoPlayerStyle, this.props.containerStyle, {height: videoHeight, width: videoWidth}] }
source={{uri: this.props.videoURL}}
ref={(ref) => {
this.player = ref
}}
paused={this.state.paused}
controls={nativeControls}
playInBackground={false}
repeat={false}
key="something123"
muted={this.state.mute}
onBuffer={this.onBuffer}
onEnd={this.onEnd}
onError={this.onError}
onLoad={this.onLoad}
onLoadStart={this.onLoadStart}
onProgress={this.onProgress}
/>
After video ends I show a button that allows user to play it again. I tried using:
restartPlayingVideo = (dict) => {
this.player.seek(0) // I tried with and without this
this.setState({paused: false})
}
But the video doesn't start again on Android (it works fine on iOS).
Am I missing something?
I used
<Video repeat={true} paused={this.state.paused} onEnd={this.setState({paused: true})}>
</Video>
Works for me.