React-native: White blank screen when load local html file in a webview

[miguoer]

Environment

OS: Linux 4.15
Node: 9.11.1
Yarn: 1.6.0
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ^0.55.4 => 0.55.4

Description

Hi, I have faced a really troublesome problem. I integrate react-native to my existed android app. My react native activity has only one webview. The webview loads a local html file. Almost every 20 times there will occur one time that the webview loads a white blank screen.

Here is my code:

• index.android.js file:

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  WebView,
  Text,
  Alert,
  DeviceEventEmitter,
  View
} from 'react-native';
import {
  NativeModules
} from 'react-native';

var webView;
class HelloWorld extends React.Component {

  _onLoadEnd() {
    console.log("_onLoadEnd")
    if (this.props.station != null && this.webView != null) {
      this.webView.postMessage(this.props.station);
    } else {
        NativeModules.RouteSearchCallback.callback("fail", "");
    }
  }

  shouldComponentUpdate() {
    console.log("shouldComponentUpdate")
    return true;
  }

  handleMessage = (evt: any) => {
    NativeModules.RouteSearchCallback.callback(evt.nativeEvent.data, this.props.station);
  }

  render() {
    console.log("render")
    return ( <
      View style = {
        styles.container
      } >

      <WebView style = {styles.webview}
      javaScriptEnabled = {
        true
      }
      ignoreSslError={true}
      javaScriptEnabledAndroid = {
        true
      }
      domStorageEnabled = {
        false
      }
      mixedContentMode = {
        'compatibility'
      }
      ref = {
        (webView) => this.webView = webView
      }
      source = {
        {
          uri: 'file:///android_asset/map.html'
        }
      }
      startInLoadingState = {
        false
      }
      scalesPageToFit = {
        true
      }
      automaticallyAdjustContentInsets = {
        false
      }
      onLoadEnd = {
        () => setTimeout(this._onLoadEnd.bind(this), 500)
      }
      onMessage = {
        this.handleMessage
      }
      />


      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#fff'
  },
  webview: {
    flex: 1,
    backgroundColor: '#fff'
  },
  searchframe: {
    height: 50,
    backgroundColor: '#fff'
  }
});
AppRegistry.registerComponent('TestWebView', () => HelloWorld);`

- My html file:

name="viewport"/>

- **My react native activity:**

public class NewRouteSearchActivity extends ReactActivity {
private static final String TAG = NewRouteSearchActivity.class.getCanonicalName();
@javax.annotation.Nullable
@Override
protected String getMainComponentName() {
return "TestWebView";
}

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
    return new MyReactDelegate(this, getMainComponentName());
}

class  MyReactDelegate extends ReactActivityDelegate {
    private Bundle mInitialProps = null;
    private final @Nullable Activity mActivity;

    public MyReactDelegate(Activity activity, @javax.annotation.Nullable String mainComponentName) {
        super(activity, mainComponentName);
        mActivity = activity;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Bundle bundle = mActivity.getIntent().getExtras();
        if (bundle != null && bundle.containsKey(IntentConstants.INTENT_TO_ROUTE_SEARCH_EXTRA_STATION) ) {
            String station = bundle.getString(IntentConstants.INTENT_TO_ROUTE_SEARCH_EXTRA_STATION);
            Log.d(TAG, "onCreate: extra station =" + station);
            mInitialProps = new Bundle();
            // put any initialProps here
            mInitialProps.putString(IntentConstants.INTENT_TO_ROUTE_SEARCH_EXTRA_STATION, station);
        }
        super.onCreate(savedInstanceState);
    }

    @javax.annotation.Nullable
    @Override
    protected Bundle getLaunchOptions() {
        return mInitialProps;
    }
}

}

- the way to start react native activity:
```                     Intent   intent = new Intent(context, NewRouteSearchActivity.class);
                        SearchParams params = new SearchParams();
                        params.startStation = result.getExtraParams().get(0);
                        params.endStation = result.getExtraParams().get(1);
                        params.isFromVoice = true;
                        Gson gson = new Gson();
                        String param = gson.toJson(params);
                        intent.putExtra(IntentConstants.INTENT_TO_ROUTE_SEARCH_EXTRA_STATION, param);
                        intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                        context.startActivity(intent);```


## Here is some error message:
```D/cn.zzmetro.routesearch.NewRouteSearchActivity(26992): onCreate: extra station ={"endStation":"龙子湖","isFromVoice":true,"startStation":"紫荆山"}
10-15 15:01:53.415 D/ReactNative(26992): ReactInstanceManager.attachRootViewToInstance()
10-15 15:01:53.417 I/ReactNativeJS(26992): Running application "TestWebView" with appParams: {"initialProps":{"station":"{\"endStation\":\"龙子湖\",\"isFromVoice\":true,\"startStation\":\"紫荆山\"}"},"rootTag":191}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
10-15 15:01:53.418 I/ReactNativeJS(26992): componentWillMount
10-15 15:01:53.419 I/ReactNativeJS(26992): render
10-15 15:01:53.426 I/ReactNativeJS(26992): componentDidMount
10-15 15:01:53.430 D/CrashReport(26992): >>> cn.zzmetro.routesearch.NewRouteSearchActivity onResumed <<<
10-15 15:01:53.431 I/CrashReport-Native(26992): Set native info: isAppForeground(true)
10-15 15:01:53.856 W/unknown:ReconnectingWebSocket(26992): Couldn't connect to "ws://localhost:8081/message?device=h1301_1-box%20-%207.1.2%20-%20API%2025&app=cn.zzmetro&clientid=DevSupportManagerImpl", will silently retry
10-15 15:01:53.917 D/cn.zzmetro.voice.taskmanager.TaskManager(26992): start get task
10-15 15:01:53.920 D/mali_winsys(26992): EGLint new_window_surface(egl_winsys_display*, void*, EGLSurface, EGLConfig, egl_winsys_surface**, egl_color_buffer_format*, EGLBoolean) returns 0x3000
10-15 15:01:54.009 D/AIUILog (26992): readAudio leave, dataSize=16000, bufLen=179200
10-15 15:01:54.017 D/cn.zzmetro.voice.taskmanager.TaskManager(26992): start get task
10-15 15:01:54.033 E/XtHardwareServerManager(26992): 硬件信息：result:true, message:{"charge_state":false,"current_floor":22,"current_pose":{"theta":1.64824,"x":10.9069,"y":6.98121},"error_code":"00000000","estop_state":true,"hard_estop_state":true,"move_retry_times":0,"move_status":"idle","move_target":"","power_percent":38,"soft_estop_state":false}
10-15 15:01:54.036 I/ActivityManager(  427): Displayed cn.zzmetro/.routesearch.NewRouteSearchActivity: +663ms
10-15 15:01:54.229 W/cr_BindingManager(26992): Cannot call determinedVisibility() - never saw a connection for the pid: 26992
10-15 15:01:54.527 D/CrashReport(26992): >>> cn.zzmetro.routesearch.NewRouteSearchActivity onDestroyed <<<
10-15 15:01:54.528 D/ReactNative(26992): ReactInstanceManager.detachViewFromInstance()
10-15 15:01:54.530 I/ReactNativeJS(26992): componentWillUnmount
10-15 15:01:54.590 W/art     (  958): Suspending all threads took: 15.228ms
10-15 15:01:54.595 I/art     (  958): Background partial concurrent mark sweep GC freed 3466(278KB) AllocSpace objects, 27(2MB) LOS objects, 39% free, 3MB/5MB, paused 16.784ms total 32.230ms

Wish for your reply. Thank you.

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[miguoer]

@ react-native-bot I have update to the latest release. But the problem is still there.
React Native Environment Info:
System: OS: Linux 4.15 Ubuntu 16.04.3 LTS (Xenial Xerus) CPU: x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz Memory: 386.14 MB / 7.70 GB Shell: 4.3.48 - /bin/bash Binaries: Node: 9.11.1 - /usr/bin/node Yarn: 1.6.0 - /usr/bin/yarn npm: 5.6.0 - /usr/bin/npm npmPackages: react: ^16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 react-native: ^0.57.3 => 0.57.3 npmGlobalPackages: create-react-native-app: 1.0.0 react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7 react-native: 1000.0.0

[miguoer]

I try the react-native-community/react-native-webview
, well, still can't solve the problem.

[radko93]

You need to narrow down your problem yourself and prove that there's a bug to get some help. We can't debug your code. Try debugging smaller parts of your HTML code. And consider posting on Stackoverflow. Please open another issue if you will find the bug.

[mtheus]

Hi @miguoer ... I"m getting the same error but only in Samsung A5 phone. Coincidentally start to happen with begin of "fake" summer time (Most phones upgraded in advance from planned for lack of update). Other developers face this problem in the past, started to use ignoreSslError={true} as workaround, but I strongly believe this not the correct way. Hi @radko93 please, could you advice us what we can try, it seems to me that the component is hiding something relevant to our troubleshooting.

[mtheus]

Problem appear with the new update of https://play.google.com/store/apps/details?id=com.google.android.webview

[Dror-Bar]

@mtheus
Did you find any solution to this problem?

Edit: Turns out my problem was with production APK. See the discussion here (and the solution in the last comment).

[iratner]

try changing your hex colors to rgb in the css...

[nicutimofte]

I had this issue because my webview was wrapped in a scrollview. So, removing the scrollview solved the problem.