5

Working fine in expo mobile app, but same code doesn't show anything when opening Expo App on Web browser by running command expo start --web

Here is the sample code

    <WebView 
     originWhitelist={['*']} 
     source={{ uri: 'https://sofit.ltd' }}
     style={{marginBottom:100, height:"100%", width:"100%" }}
    />
haseem
  • 53
  • 1
  • 5

2 Answers2

5

Did you try in web only? try this snack: https://snack.expo.io/@djalik/webview-demo

Oleg
  • 3,580
  • 1
  • 7
  • 12
  • Mentioned code is working fine in mobile but causing issue on web , And I have tried {{ flex:1 }} too, but no luck. – haseem Oct 11 '19 at 08:02
  • You are using in web not in device – Oleg Oct 11 '19 at 08:02
  • 1
    Yes, I am using expo web to run my app in browser. – haseem Oct 11 '19 at 08:06
  • i updated the answer, you have to use iframe, look at snack in answer – Oleg Oct 11 '19 at 08:25
  • Okay so you are saying that I have to use iframe to display view in web? – haseem Oct 11 '19 at 09:35
  • Thanks it worked, but now I have added the actual website which I want to display, but returns error in log. "Multiple 'X-Frame-Options' headers with conflicting values ('SAMEORIGIN, DENY') encountered when loading " – haseem Oct 11 '19 at 10:17
  • If you have access to server side of the site you can make something like this: Response.Headers.Remove("X-Frame-Options"); – Oleg Oct 11 '19 at 10:20
  • Or run chrome in dev with insecure mode – Oleg Oct 11 '19 at 10:22
  • 1: We have no access to server, 2: If we run chrome in dev with insecure mode, then it won't work in production. – haseem Oct 11 '19 at 10:58
  • I answered your main question: in web no webview html tag, you can use only iframe for site page browsing. – Oleg Oct 11 '19 at 11:12
0

For me the answer was to wrap it with a View:

<View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.webviewContainer}>
        <WebView
            originWhitelist={['*']}
            source={{ uri: currentURI }}
            ref={webViewRef}
            style={styles.webview}
          />
      </View>
</View>

// Styles
const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  webview: {
    flex: 1,
  },
  webviewContainer: {
    flex: 1,
    alignSelf: 'stretch',
  },
});
atlanteh
  • 5,615
  • 2
  • 33
  • 54