Webview works fine on emulator but not on device

Question

I am new to react native. I am trying to implement a hybrid app which only shows a link to my site inside a webview and display push notifications. I used firebase for the notification. My app works fine on android emulator, but when I build the apk and install it on my app, it shows a white screen only. I know the app is working because my push notification system works fine. Both emulator and my phone have Android 9.0. I am using webview from react-native, not from react-native-webview which gives me a warning, not sure if that's relevant.

Update: I just checked, the app works fine on android 8 devices, on android 9 it doesn't work.

The following is the code for my webview

render() {
return (
    <WebView style = {{ width: Dimensions.get('window').width, height: 
    Dimensions.get('window').height }} useWebKit 
    allowUniversalAccessFromFileURLs mixedContentMode = "always" 
    originWhitelist = {['*']} source = {{ uri: 'https://myurl.com/' 
    }} />    
);}
}

Answer 1

I am also having the same problem while using android 9 but when i use this solution it solve my problem

USE THIS:

create a new file in yourProject/android/app/src/main/res/xml/ folder

and name it network_security_config.xml

add this code in this new created file

<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
     <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config> </network-security-config>

And in AndroidManifest.xml file inside application tag

add these line

    android:usesCleartextTraffic="true"       
    android:supportsRtl="true"
    android:hardwareAccelerated="true"
    android:networkSecurityConfig="@xml/network_security_config"