1

After countless of experiments, I finally gave up. react-native-webview does not work on any android but works fine on iOS.

I've tried all of these:

opacity:0.99

androidLayerType="software"

androidHardwareAccelerationDisabled={true}

renderToHardwareTextureAndroid={true}

<View style={{flex:1}}><WebView source={{uri:'...'}} /></View>

P.S. - Even tried removing all code that will only return and view with the inside, still not working.

Example of behavior when Webviewing google:

Example of behavior

Dependencies

HELP

Lishar
  • 31
  • 1
  • 5
  • Im going out on a limb here, but it looks like both devices are simulators, some android emulators fail to connect to the internet on the mac, happens to me quite often tbh, try to open the chrome browser on the emulator and see if you can surf the internet, if u cant, then that's the problem, you might want to look here: https://stackoverflow.com/questions/44535500/internet-stopped-working-on-android-emulator-mac-os, assigning an explizit dns-server to the emulator usually helps – Samer Murad Aug 16 '22 at 09:33
  • I've presenting emulators here right, but this behavior also occurs on real devices as well. – Lishar Aug 16 '22 at 09:34
  • did u try to see what u get as an error in the `onError` function prop ? `return ( ' }} onError={syntheticEvent => { const { nativeEvent } = syntheticEvent; console.warn('WebView error: ', nativeEvent); }} /> );` – Samer Murad Aug 16 '22 at 09:51
  • Yes, tried all "onMethod" methods and the only methods running are onLayout and onProgress once, nothing else even triggers. – Lishar Aug 16 '22 at 09:53
  • okay, what about giving it height/width/flex: 1 ? also maybe look here https://stackoverflow.com/questions/35451139/react-native-webview-not-loading-any-url-react-native-web-view-not-working, here https://github.com/react-native-webview/react-native-webview/issues/788 and here https://github.com/react-native-webview/react-native-webview/issues/444 – Samer Murad Aug 16 '22 at 10:05
  • these would be my last guesses to be honest, it might just be a layout problem really, so currently setting sizes on the webview might just solve it – Samer Murad Aug 16 '22 at 10:06
  • Have tried all of these width, height, flex solutions, still nothing. I'd gladly give out a Git access to who ever wants to fiddle around with it – Lishar Aug 16 '22 at 10:37
  • I'll create a working project for you. – Louay Sleman Aug 16 '22 at 11:22
  • Is there anyone that is willing to connect remotely or pull the git and try and play with it? – Lishar Aug 17 '22 at 08:17
  • can you share the complete code of the screen so we can further look at what's happening? – Samer Murad Aug 19 '22 at 05:02
  • Here is a screen shot of what App.jsx is returning. https://i.ibb.co/1GCkQdm/Screen-Shot-2022-08-19-at-19-57-36.png – Lishar Aug 19 '22 at 16:58

1 Answers1

-2

can you try handling the two cases separately using something like

{Platform.OS === 'ios' ? <Webview for ios/>   : <Webview for android/>}

also try specifying the source attribute differently.

for ios you can use :

const htmlCode = require('../../../htmlCode.html');
<WebView source={htmlCode}/>

for android you can use :

const htmlCode = `<h1>Your html code here</h1>`
<WebView source={{html : htmlCode}}/>

or

const htmlCode = "https://www.google.com" 

<WebView source={{uri:htmlCode}}/>
Anurag
  • 1
  • 3
  • Irrelevant solution – Lishar Aug 19 '22 at 17:02
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 23 '22 at 18:57