React-native-webview: Android: WebView in loading state takes all the screen (can't set height or position)

[llostris]

We're trying to render a WebView on the screen, leaving a little space at the top for app action bar. However the loading screen from the WebView takes the whole screen, covering the top bar. The same thing happens if we use a custom loading screen (using renderLoading prop) or the default one.

I was looking at react-native-community/react-native-webview#216 thinking as it might be related, however none of the suggestion in that issue helped (setting flex: 0 or flex: null didn't change anything), and this problem occurrs only when it comes to the loading screen and only on Android.

Wat the webview screen looks like:

What we expect to see at the top:

Code rendering the webview and the loading screen:

render() {
    let content = (
        <WebView style={styles.webView}
                 originWhitelist={['*']}
                 startInLoadingState={true}
                 // renderLoading={this.renderWebViewLoading}
                 source={this.state.request}/>
      );

    return (
      <SafeAreaView style={styles.container}>
        <NavigationEvents
          onWillFocus={() => this.buildWebViewSource()}/>
        <View style={styles.topBar}>
          <TouchableOpacity onPress={this.close}>
            <Nomicon icon={Nomicon.icons.dismiss}
                     allowFontScaling={false}
                     style={styles.closeButton}/>
          </TouchableOpacity>
        </View>
        {content}
      </SafeAreaView>
    );
  }

Styles:

 const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  topBar: {
    height: 30,
  },
  closeButton: {
    marginLeft: 15,
    fontSize: 20,
    color: grey60,
  },
  webView: {
    width: width,
    flex: 1,
  },

});

[Titozzz]

There is a bug since RN 0.57 that makes webview loading overlay everything, just wrap you webview inside a view with overflow: 'hidden'