How to style WebView default Loader in react native

Question

<WebView
 source={{ uri: this.state.url }}
 startInLoadingState={<ActivityIndicator
 style={{backgroundColor: Color.transparent, position: 'absolute', left: width * 0.35, top: height / 2 - 50, zIndex: 9,height: width * 0.3,width: width * 0.3,borderRadius: 20}}
 color={Color.white}
 size="large" />}
/>

Below is my code

I want actives indicator in WebView default property

startInLoadingState={}

here I add but it's not working so what I can do

to add styel in defalut startInLoadingState={}

Answer 1

startInLoadingState is boolean, not is a JSX.Element.

If you want to custom your loading, just use renderLoading prop and you need turn on startInLoadingState to use renderLoading prop.

<WebView
  source={{ uri: "https://source.com" }}
  startInLoadingState // or `startInLoadingState={true}`
  renderLoading={() => <ActivityIndicator
    style={{
        backgroundColor: Color.transparent, position: 'absolute', left: width * 0.35, top: height / 2 - 50, zIndex: 9,
        height: width * 0.3,
        width: width * 0.3,
        borderRadius: 20
    }}
    color={Color.white}
    size="large" />}
/>

Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#renderloading