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.
Related
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 would like to use two previews of the same camera(just front or just back) in the same view, with React Native, but i wasn't able to do that.
Basically like this:
<Camera />
<Text>some text...</Text>
<Camera />
For the camera I've tried to used both expo-camera and react-native-vision-camera
I've tried to copy the Camera with ViewShot from "react-native-view-shot", but it is too slow, and there is a very annoying flickering when updating the image.
<SafeAreaView>
<ViewShot onCapture={onCapture} captureMode="continuous" style={dimension}>
<Camera style={styles.camera} type={type} ref={ref => {setCameraRef(ref); }}>
</ViewShot>
<Image fadeDuration={0} source={source} style={dimension} />
</SafeAreaView>
Has anybody had the same issue and solved it? Thanks.
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.
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 />}
/>
I'm using react-native-camera library. But I'm not sure if the problem is the library or the react native self. The problem occurs only on Android
I'm using react native version 0.39 and the android version is 6.1.
The problem is when I try to take a few pictures in a row, after fifth taken image the app crashes. I'm not getting any errors of warnings.
It crashes also if the camera is opened and if I wait for about 15-20 seconds with camera opened, without taking photo.
On newer, better phone (s8 galaxy) and newer android versions (7) it works as expected, but on this one it isn't working. Thus, I suppose that it has something to do with memory issues. But I'm not sure.
I've added largeMemoryHeap to the manifest file.
In android studio I get log file as follows:
Thus, no errors, nothing. But the app doesn't work.
The stuck of code where those photos are rendered is as follows:
<ScrollView removeClippedSubviews={true}>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
<Zoom visible={this.state.zoomVisible} close={() => this.setState({zoomVisible: false})} image={this.state.zoomImage} imageIndex={this.state.zoomIndex} pictures={this.state.zoomPictures} remove={this.onRemoveImage.bind(this)} />
<View style={{width: width, height: 1, backgroundColor: '#ddd'}} />
<View style={styles.container}>
{cards}
</View>
</ScrollView>
And one card is as follows, and I have a stuck of 10:
<TouchableHighlight onPress={this.props.onPress} style={styles.card} underlayColor={s.color}>
<View style={styles.innerCard}>
<View style={styles.innerImageContainer}>
<Image contain='contain' style={styles.innerImage} source={this.props.image}/>
</View>
<View style={[styles.innerTitle, {borderBottomWidth: 4, borderBottomColor: this.props.mandatory ? this.props.noImage ? s.paletteMandatory : s.success : '#fff'}]}>
<Text style={styles.textTitle} allowFontScaling={false} numberOfLines={1} ellipsizeMode={'tail'}>{this.props.title}</Text>
</View>
</View>
</TouchableHighlight>);
I found somewhere that i need to add removeClippedSubviews={true} to scroll view, but it does not help.
On IOS it works just fine.
I would be infinitely grateful if someone has an idea?