Displaying an ActivityIndicator while a web page loads via web view

Issue

I have an expo app and i am using this webview import { WebView } from 'react-native-webview'; https://docs.expo.dev/versions/latest/sdk/webview/

I would like to show the ActivityIndicator as the page loads and not the white blank screen so i am using state like this

const [modalVisible, setModalVisible] = useState(false);
const [selectedLink, setSelectedLink] = useState('');
const [isLoading, setIsLoading] = useState(false);

  const handleLoadStart = () => {
    setIsLoading(true);
  };

  const handleLoadEnd = () => {
    setIsLoading(false);
  };

  const handleNavigationStateChange = (navState) => {
    setIsLoading(navState.loading);
  };

and this is my modal

<Modal isVisible={modalVisible} animationIn="slideInUp" animationOut="slideOutDown">
        <View style={styles.modalContainer}>
              <View style={styles.modalTitleBar}>
                <Text style={styles.modalTitle}>Modal Title</Text>
                <TouchableOpacity onPress={closeModal} style={styles.closeButton}>
                  <MaterialIcons name="close" size={24} color="white" />
                </TouchableOpacity>
              </View>
              {isLoading ? (
                <View style={styles.loadingContainer}>
                  <ActivityIndicator size="large" color="indigo" />
                </View>
              ) : (
                <WebView
                  source={{ uri: selectedLink }}
                  onLoadStart={handleLoadStart}
                  onLoadEnd={handleLoadEnd}
                  onNavigationStateChange={handleNavigationStateChange}
                  style={styles.webView}
                />
              )}
            </View>
    </Modal>

My ActivityIndicator loads forever and don't seem to receive a signal from the webview that the external web page being loaded has finished loading.

None of this three

onLoadStart={handleLoadStart}
onLoadEnd={handleLoadEnd}
onNavigationStateChange={handleNavigationStateChange}

is working. Is there a solution to this?

Solution

This is how i fixed it

This is my spinner

  const Spinner = () => (
        <View style={styles.activityContainer}>
          <ActivityIndicator size="large" color="indigo" />
        </View>
    );

and this is my webview

<WebView
          source={{ uri: selectedLink }}
          startInLoadingState={true}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          renderLoading={Spinner}
          onLoadStart={handleLoadStart}
          onLoadEnd={handleLoadEnd}
          onNavigationStateChange={handleNavigationStateChange}
          style={styles.webView}
        />

The css

container: {
    flex: 1
  },
  activityContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: 'white',
    height: '100%',
    width: '100%'
  },

renderLoading={Spinner} worked and state based methods failed.

Answered By - Gandalf