The platform is Android. I use to embed youtube video.
<View style={{ height: 240 }}>
<WebView
style={{ alignSelf: 'stretch' }}
scalesPageToFit={true}
source={{uri: `https://www.youtube.com/embed/${videoId[0]}?rel=0&autoplay=0&controls=1&showinfo=0`}}
/>
</View>
I can see the zoom in button but it can't be clicked.
I try to add scalesPageToFit={true} on is still not working.
Is it possible to zoom in when using with embed youtube url ?
Any help would be appreciated.
I have search and find the props allowsFullscreenVideo={true} set it true that enables fullscreen into the WebView.
Please check the final code.
<WebView
source={{uri: `https://www.youtube.com/embed/${videoId[0]}?rel=0&autoplay=0&controls=1&showinfo=0`}}
style={{ alignSelf: 'stretch' }}
allowsFullscreenVideo={true}
scalesPageToFit={true}
/>
You can use react-native-youtube.
You have to embed your video in an iFrame with property.
allowfullscreen="allowfullscreen"
Give iFrame the above mentioned property and for your information allowfullscreen="true" is a wrong input.
Related
Using react native expo.
Once performing action in one of the pages, if the action is success, it will forward to another page that will only contain a view with an image, the image inside the url can change all the time(by another user regardless to the app).
I had an issue that when image is being changed, the previous image is still in the cache so it is loading the previous image.
the solution is to add "?xxx" at the end of the url and it will refresh to the current image all the time.
The problem now, is that it takes around 2-3 seconds for the image to load, and i cant have that.
Is there a way to load the image from the url in a faster way?
Here is the code that shows the image in the final page:
return (
<SafeAreaView style={[{ flex: 1 }]}>
<View style={[{ height: "8%", backgroundColor: "#EE7629" }]}>
<TouchableOpacity style={styles.backStyle} onPress={navToTakeCart}>
<Text style={styles.backText}>Go Back</Text>
</TouchableOpacity>
</View>
<View style={[{ height: "92%", backgroundColor: "#EE7629" }]}>
<Image
source={{
uri:
"https://click2lock.azurewebsites.net/Images/AdvertiseImg/Image" +
compId +
".jpeg?1",
}}
style={{ width: "100%", height: "100%", resizeMode: "stretch" }}
/>
</View>
</SafeAreaView>
);
Thank you
Same issue for me, I'm looking for a solution of this network related issue with expo, while searching I saw some post advicing to use FastImage, Also saw that there is an implementation for Expo, but had no sucess implementing it on my app.
I see This Component in official site of React Native. But nothing Example get on the https://reactnative.dev/docs/image#loadingindicatorsource. I only get what is this
Can anyone tell me how I use this Component on react native ?
<Image {...props} loadingIndicatorSource={URI} />
What does statement above mean?
{...props} - is your custom props, like source or style, for example.
URI - is URI of image, which will be shown while image, specified in source props, is loading.`
Examples:
<Image source={{uri: URI}} loadingIndicatorSource={require('loadingIndicatorSource={require('#assets/images/loading.jpeg')}')}
<Image source={{uri: URI}}
loadingIndicatorSource={{uri:
'https://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png'}} />
You can use loadingindicator like as activityindicator
<Image
style={{
width: "100%",
height: "85%",
alignSelf: "center",
}}
resizeMode="contain"
loadingIndicatorSource={require("../assets/loader2.gif")}
source={{ uri: item.thumb_url }}
/>
One of the ways I found to use it is passing a component directly, like an ActivityIndicator
<Image loadingIndicatorSource={<YOUR LOADING COMPONENT/>} />
I am using React Native View Shot and I need our product to be able to capture live streaming from a m3u8 uri from React Native video package.
Currently on android it is capturing the screen fine, but on IOS there seems to be an issue of View Shot capturing just a blank video. How it looks on IOS
The livestream is the one playing below and the screenshot is the one taken of the video.
Are they just not compatible, or how would I resolve the issue of capturing a screenshot of a live stream on ios?
<TouchableOpacity onPress={()=>saveCapturedImage()} style={capturedShot ? styles.capturedShotStyle : styles.beforeShotStyle}>
{capturedShot ? <Text/> : <Text>Click to capture shot</Text> }
</TouchableOpacity>
<Image style={capturedShot ? styles.captureContainerPost : styles.captureContainerPre} source={capturedShot ? {uri: capturedShot } : null} />
{/* Viewshot component from React Native Viewshot */}
<ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9 }}>
{/* Video component from React Native Video, resizeMode cover to get full height on the component. Add pause controls for default, and controls can be toggled true/false */}
{videoUri && <Video
source={{
uri: videoUri,
}}
style={{
width: "100%",
height: "100%",
}}
resizeMode="cover"
controls={true}
paused = {false}
/>}
</ViewShot>
If anyone else wants an answer for this problem in future, I wrapped View shot capturing screen over a react native webview component playing a video on ios. It took a photo of a paused Youtube video playing. But even though View Shot captured a WebView of a video embedded, the content of the video was empty.
Not sure if this is because of RN View Shot, have emailed the founder of the package. Or does Ios block video content playing?
<View collapsable={false} style=Template:Height: "80%">
<WebView
originWhitelist={["*"]}
source={{
html:
'<iframe playsinline controls autoplay src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" ></iframe>',
}}
useWebKit={true}
originWhitelist={["*"]}
allowsInlineMediaPlayback={true}
style={{
height: 600,
width: 400,
}}
/>
</View>
</ViewShot>
But if anyone finds a better alternative solution let me know.
Here is my code:
<View style={{ height: this.state.height, ...props.style }}>
<WebView
ref="child"
{...this.props}
scalesPageToFit={false}
scrollEnabled={true}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
onMessage={ this.handleMessage.bind(this) }
source={{ html }}
/>
</View>
This works fine on iOS build (Scrolls horizontally) but does not work on Android.
react native WebView has been deprecated you should now use
https://github.com/react-native-community/react-native-webview
First answer is right, you should use react-native-webview now.
And, your problem may be related with your View wrapper I think.
How to disable auto play in WebView React Native. because i try WebView to play video in my App still autoplay while i add "mediaPlaybackRequiresUserAction={false}". my code below:
<WebView style={{ justifyContent: 'center', alignItems: 'center'}} source={{uri: url}} mediaPlaybackRequiresUserAction={false} />
Please help me, thanks.
You need to change the property mediaPlaybackRequiresUserAction={true}. Then it will stop the auto play.
Using HTML did the trick.
<WebView
{...this.props}
onError={this.onError}
source={{
html: `
<video width="100%" height="100%" style="background-color:${styles.webView.backgroundColor}" controls>
<source src="${this.props.uri}" type="video/mp4">
</video>
`,
}}
style={this.props.style || styles.webView}
/>
https://stackoverflow.com/a/31956633/1958882
This one worked for me in Android (haven't tested on iOS yet):
<View flex height={300}>
<WebView
source={{ uri: url }}
style={{ flex: 1.0 }}
mediaPlaybackRequiresUserAction={true}
allowsInlineMediaPlayback={true}
javaScriptEnabled={true}
allowsFullscreenVideo={true}
domStorageEnabled={true}
injectedJavaScript={`
document.getElementsByTagName("video")[0].removeAttribute("autoplay"); // this one was the key for me!
`}
allowFileAccess={false}
startInLoadingState={true}
startInLoadingState={<Loaders.spinner />}
/>