react-native webview loading indicator

Question

I am trying to show loading indicator in webweb as follow. Loading indicator is showing but there is white background show after page is loaded. If I change to startInLoadingState to false, web content is showing but loading indicator does not show. It is happing in "react-native": "0.46.3" on ios

renderLoadingView() {       return (           <ActivityIndicator              animating = {this.state.visible}              color = '#bc2b78'              size = "large"              style = {styles.activityIndicator}              hidesWhenStopped={true}            />       ); } 

<WebView     source={source}      renderLoading={this.renderLoadingView} startInLoadingState={true} /> 

Answer 1

I like this approach which shows the activity indicator overlayed on the loading Webview so you don't have to wait until the entire page is loaded to start seeing content.

constructor(props) {   super(props);   this.state = { visible: true }; }  hideSpinner() {   this.setState({ visible: false }); }  render() {   return (     <View style={{ flex: 1 }}>       <WebView         onLoad={() => this.hideSpinner()}         style={{ flex: 1 }}         source={{ uri: this.props.navigation.state.params.url }}       />       {this.state.visible && (         <ActivityIndicator           style={{ position: "absolute", top: height / 2, left: width / 2 }}           size="large"         />       )}     </View>   ); }