Show loading indicator between navigation of pages in a Webview

Question

I have a url in the Webview like https://www.nytimes.com/ The current code works inital page load but If I type tap anything in the link, the page takes a while to load and there are no loading indicators in the website. Is there any way we can put a page loading indicator in React Native while we click on any link or page loading specially if it is server side rendered like next js?

Here is my ReactNative code.

import * as React from 'react';
import {
  View,
  Text,
  Image,
  SafeAreaView,
  ScrollView,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import styles from './styles';
import { WebView } from 'react-native-webview';
// import WelcomeSwiper from '../../components/WelcomeScreen/WelcomeSwiper';

import LoadingIcon from '../../components/Loading/index.js';

const WebView = ({ navigation }) => {


  return (
    <SafeAreaView style={styles.container}>

      <WebView
        javaScriptEnabled={true}
        domStorageEnabled={true}
        renderLoading={LoadingIcon}
        source={{ uri: 'https://www.nytimes.com/ ' }}
        startInLoadingState={true}

      />
    </SafeAreaView>
  );
};

export default WebView;

Here is my loading component

import React from 'react';
import { StyleSheet, Platform, ActivityIndicator } from 'react-native';


const LoadingIcon = () => {
    return (

        <ActivityIndicator
            color='#009688'
            size='large'
            style={styles.ActivityIndicatorStyle}
        />
    );
}

export default LoadingIcon;


const styles = StyleSheet.create(
    {

        WebViewStyle:
        {
            justifyContent: 'center',
            alignItems: 'center',
            flex: 1,
            marginTop: (Platform.OS) === 'ios' ? 20 : 0
        },

        ActivityIndicatorStyle: {
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            alignItems: 'center',
            justifyContent: 'center'

        }
    });

Answer 1

I use onLoadProgress to solve this issue.

renderLoading function is just called at the initial loading state of webview component. Using renderLoading is not helpful to show activity indicators at any tap on page links or navigating between webview pages.

Checking onLoadStart and onLoadEnd is useful in android but in iOS onLoadEnd is not called in the back navigation gesture which results in endless spinning of activity indicator.

onLoadProgress returns a number between 0-1 while webview is in the loading state. You check its progress state and update your activity indicator state.

For more information about onLoadProgress: onLoadProgress

Here is a working code example for you:

import React, {useState} from 'react';
import {View, Text, SafeAreaView, ActivityIndicator} from 'react-native';
import {WebView} from 'react-native-webview';

function WebViewTest() {
  const [isLoading, setLoading] = useState(false);
  return (
    <SafeAreaView style={{flex: 1}}>
      <WebView
        source={{uri: 'https://www.nytimes.com/'}}
        onLoadProgress={({nativeEvent}) => {
                    if (nativeEvent.progress != 1 && isLoading == false ) {
                        setLoading(true)
                    } else if (nativeEvent.progress == 1 ) {
                        setLoading(false)
                    }
                }} 
        />
        {isLoading && (
          <View style={{flex: 10, backgroundColor: 'white'}}>
            <ActivityIndicator
              color="#009688"
              size="large"
            //   style={{position: 'absolute', left: 200, top: 300}}
            />
          </View>
        )}
    </SafeAreaView>
  );
}

export default WebViewTest;

Answer 2

we can use these two approaches to get the result:

1. You can check if the WebView is loading something or not with the onLoadProgress method. This method gives you a number between 0 and 1. If the page is fully loaded it will return number 1, update your state and show the ActivityIndicator according to it:

2. you can use onLoadStart and onLoadEnd to update your state and show the ActivityIndicator according to it!

for more info check the: https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#onloadprogress

you can also use your ActivityIndicator wrapped by WebView, *do not Forget this method works in ios for android put it outside of WebView

and this is a working code sample for you:

import React, {useState} from 'react';
import {View, Text, SafeAreaView, ActivityIndicator} from 'react-native';
import {WebView} from 'react-native-webview';

function WebViewTest() {
  const [isLoading, setLoading] = useState(false);
  return (
    <SafeAreaView style={{flex: 1}}>
      <WebView
        source={{uri: 'https://www.nytimes.com/'}}
        onLoadStart={(syntheticEvent) => {
          setLoading(true);
        }}
        onLoadEnd={(syntheticEvent) => {
          setLoading(false);
        }} />
        {isLoading && (
          <View style={{flex: 10, backgroundColor: 'white'}}>
            <ActivityIndicator
              color="#009688"
              size="large"
            //   style={{position: 'absolute', left: 200, top: 300}}
            />
          </View>
        )}
    </SafeAreaView>
  );
}

export default WebViewTest;

I hope it helps