Trying to display an image within a WebView in ReactNative (Using Expo). Doing this to allow image zooming.
Using webview with source={{ uri: this.state.imageUrl }} which is an s3 bucket image location. ie-- ending in .jpg
I have set mixedContentMode to 'always' as is suggested by people with similar problems, along with setting javascriptEnabled and domStorage to true, setting style to flex:1 etc etc.
My android is displaying a white page only, but iOS displays the image just fine, so url is not the problem.
I know RN advertises Webview as being soon to be deprecated and to use react-native-webview. But as we use Expo this isn't an option as linking is required to use react-native-webview which cannot be done with expo.
Is there something I have missed with s3 buckets or has anyone else had a similar issue they have managed to solve this issue? Not sure what else to try, have used the trick with google drive prefix elsewhere in the app for displaying PDFs in the webview but that doesnt work in this case. And using mixedContentMode hasn't solved anything.
<WebView
source={{ uri: this.props.map.source }}
startInLoadingState
javaScriptEnabled
style={{ flex: 1}}
scalesPageToFit
javaScriptEnabled
domStorageEnabled
originWhitelist={['*']}
mixedContentMode='always'
/>
and example of the image url is 'https://example-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:example/public/image-hd-1.jpg'
just showing the format.. above url will not work
In the end I just used the WebView and inserted my own html with an img tag that references the exact same image url. This seems to work just fine and gets around what ever issue was occurring with referencing the image directly.
Would still like to know if anyone has gotten around this without having to perform different renders for different operating systems.
Did you try to wrap it in view? Because in my one of an old project I solved it like this
<View style={{flex:1}}>
<View style={{height:'100%',width:'100%'}}>
<WebView
source={{ uri: 'https://github.com/facebook/react-native' }}
scalesPageToFit={true}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
originWhitelist={['*']}
mixedContentMode='always'
/>
</View>
</View>
Here is the Snack Link
Related
I am displaying images in my react native app.
Here is how I am displaying the image:
<Image style={styles.image} source={{ uri: this.props.img }}
My image is not displayed, but when I put the url directly into the image I works fine
What is happening
You don't have to put this in elements, please remove it before props and use directly as below
<Image style={styles.image} source={{ uri: props.img }}
Make sure, if there is an image in your props that you've passed. console.log that prop.
Also, add this keyword only when you're using the class approach.
I am trying to display a base64 image from my api but get a white space in place of the image, its work fine on android - any ideas?
<Image
source={{ uri: Images.slider.slider1 }}
PlaceholderContent={<ActivityIndicator />}
style={{width: 100, height: 100}}
/>
Images.slider.slider1:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAFbCAIAAAChzFnkAAAAAXNSR0IArs4c6QAAIABJREFUeJx8vVuyLEmuKwZ6ZPW5pvlPST8y03Skc/tUOvRBAGTkrtZq611rZUb4gw8QpHt41P/5f/3fIC9574V/qqp/IUmAharTnx8CIADUAemL9QsB/QFcgH0BWFWFes6pQqFI9n8Bog5Q3dc551R1U9X9FwAUCuhuusnuDn1joQrFH
this is a known issue in react native 0.62 ,
kindly check this link Github RN .
What basically was done in the PR was :
For anyone else that comes across this just change the version of Flipper in the podfile to
versions['Flipper'] ||= '~> 0.37.0'
do let me know in case of any concerns
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.
When I try to load image from network to webview like below works fine.
<WebView source={{ html: "<img src='abc.com/assets/img/logo.png'/><h1>Hello</h1>" }} />
But I am unable to load image from the source code directory to Webview. I am tried with the following code for that.
<WebView source={{ html: "<img src={require('./images/google_signin.png')} /><h1>Hello</h1>" }} />
If anyone knows how to load image from source code directory, please tell me.
Insert
allowFileAccess={true}
to your webview:
<WebView
allowFileAccess={true}
source={{"<img src=\"" +"file:///storage/emulated/0/Pictures/mypicture.PNG" + "\" alt=\"\" style=\"width: 100%; max-width: 1061px;margin-bottom:5px;\" />}}
style={{marginTop: 20}}
/>
AllowFileAccess: Its boolean that sets whether the WebView has access to the file system. That will help your application access the file system from external storage.
I really do not have a ton of code for this so this might not be the perfect place to ask this.. but I need help trying to figure out some sort of a solution..
I have an array of URL's stored in the state.
<TouchableHighlight style={ styles.container } onPress={this.screenTap.bind(this)}>
<Image source={{uri: this.state.picCollection[this.state.counter].Picture }} style={styles.backgroundImage} >
<View style={ styles.loginForm }>
<Button onPress={this.screenTap.bind(this)} style={{ alignSelf: 'center', marginTop: 20, marginBottom: 20 }}>Create</Button>
<Text style={ styles.text }>Some text</Text>
</View>
</Image>
</TouchableHighlight>
This screenTap function that is the onPress just incriments, changing which url we are loading from this.state.picCollection
How this code above works is everytime its pressed it is intended to switch the image show. However, when I do that instead of seamlessly transitioning it shows this white screen before loading.
I am guessing this is because everytime I do this I am reloading the state. However I am not really sure how I would approach something like this.
Any advice would be amazing!
When you change one of the props or state variables in React, the affected components re-render. From the browser's point of view, one image disappears and another one appears in it's place.
What this means for you is that each time you change the URL, an image that wasn't there before now is, and it needs to be loaded anew. I'm very certain that's what the white flash is - the browser loading the new image.
Fortunately, you can load images without showing them. This page offers some good techniques, but the most basic is to just have N image tags with each of the images you want to load. Create a CSS class that consists of display: none and apply it to those images. Ta-da! The images are loaded and cached, but the uses doesn't see any of it.
Then, when your Image component changes its src tag to one of the Images you prepared earlier, the browser already has the image in memory, so it should load immediately. (Just make sure that it is exactly the same URL!)