CODEWITHSUNDEEP
react-nativeamazon-s3webviewexpo
Shpadoinkle
Shpadoinkle

Reputation: 45

React Native Webview - With Expo - Not displaying Images from s3 bucket

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

Upvotes: 0

Views: 2836

Answers (2)

Masuk Helal Anik
Masuk Helal Anik

Reputation: 2283

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

Upvotes: 0

Shpadoinkle
Shpadoinkle

Reputation: 45

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.

Upvotes: 1

Related Questions