renderLoading in not rendered in the correct position

I just observed that in the latest version (compared to an old one) I am not able to render an ActivityIndicator centered on the screen while the webview is loading

renderLoading = () => ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <ActivityIndicator color={'#B9002F'} size="large" /> </View> );

render() { return ( <SafeAreaView forceInset={{top: 'always'}} style={{flex: 1, backgroundColor: '#fff'}}> <WebView source={this.source} startInLoadingState={true} renderLoading={this.renderLoading} /> </SafeAreaView> ); }

will not work as expected, the ActivityIndicator is rendered in the bottom of the screen

[kyo504]

@mydesweb I have been faced with the same issue and found a solution by looking at the internal codes. The default style of loading view has following props:

  loadingOrErrorView: {
    position: 'absolute',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
    width: '100%',
    backgroundColor: 'white'
  },

which means that you can achieve what you expect if you pass following additional props to your style.

{
    position: 'absolute',
    height: '100%',
    width: '100%',
}

Hope this would be helpful for you.

[plaa]

What are the magic words needed to keep an unresolved issue open (as annjawn’s comment clearly was insufficient)?