Home > Software engineering >  How to style WebView default Loader in react native
How to style WebView default Loader in react native

Time:12-17

                   <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={}

CodePudding user response:

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

  • Related