React Native webview page refresh issue

I have 2 identical screens accessed using 2 different navigation methods. The first navigation method (stack) works, the second (drawer) does not. The scenario and issue: -

Stack Navigation Method

The source url for the webview is not available (the server is not turned on). I navigate from the home screen to the webview screen. The first time around the activity indicator shows the page is trying to load for a number of seconds before the error HTML page is loaded. I navigate back to the home screen. I navigate for a second time to the webview screen. The activity indicator shows the page is trying to load for a number of seconds before the error HTML page is loaded again.

Console log: -

Drawer Navigation Method

The source url for the webview is not available (the server is not turned on). I navigate from the home screen to the webview screen. The first time around the activity indicator shows the page is trying to load for a number of seconds before the error HTML page is loaded. I navigate back to the home screen. I navigate for a second time to the webview screen. The error HTML is immediately loaded without attempting to access the source url.

The console log: -

I have turned the source url on between navigation's to be sure it's not looking and I've tried a state change in the useFocusEffect by adding a random number to the end of the url (http://192.168.4.1/wifi?<randomnumber>) but it's made no difference.

The code: -

Stack Navigation Code

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { HomeScreen } from './ui/homescreen.js';
import { WebScreen } from './ui/webscreen.js';

export const App = () => {

	const Stack = createStackNavigator();

	return (
		<NavigationContainer>
			<Stack.Navigator initialRouteName="Home Screen">
				<Stack.Screen name="Home Screen" component={HomeScreen} />
				<Stack.Screen name="Web Screen" component={WebScreen} />
			</Stack.Navigator>
		</NavigationContainer>
	);

}

export default App;

Drawer Navigation Code

import React from 'react';
import { Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator, DrawerToggleButton } from '@react-navigation/drawer';

import { HomeScreen } from './ui/homescreen.js';
import { WebScreen } from './ui/webscreen.js';

const Drawer = createDrawerNavigator();

const HomeDrawer = () => {

	const SideMenu = () => {
		return (
			<DrawerToggleButton />
		)
	}

	return (
		<Drawer.Navigator
			initialRouteName="Home Screen"
			screenOptions={{
				headerShown: true,
				headerLeft: false,
				headerRight: SideMenu,
			}}
		>
			<Drawer.Screen name="Home Screen" component={HomeScreen} />
			<Drawer.Screen name="Web Screen" component={WebScreen} />
		</Drawer.Navigator>
	);

}

export const App = () => {

	const Stack = createStackNavigator();

	return (
		<NavigationContainer>
			<Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false }}>
				<Stack.Screen name="Home">
					{(props) => (
						<HomeDrawer {...props} />
					)}
				</Stack.Screen>
			</Stack.Navigator>
		</NavigationContainer>
	);

}

export default App;

Home Screen

import React from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

export function HomeScreen({ navigation }) {

	return (
		<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
			<Text>Home Screen</Text>
			<Pressable onPress={() => navigation.navigate("Web Screen")} style={{ marginTop: 30 }}>
				<Text>Go to Web Screen</Text>
			</Pressable>
		</View>
	);

}

Webview Screen

import React from 'react';
import { View, Text, Pressable, ActivityIndicator, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
import { useFocusEffect } from '@react-navigation/native';

export function WebScreen({ route, navigation }) {

	console.log(JSON.stringify(route));

	const ErrorHTML = require('./webviewerror.html');
	const [source, setSource] = React.useState({ uri: 'http://192.168.4.1/wifi' });

	useFocusEffect(
		React.useCallback(() => {
			console.log("useFocusEffect source = " + JSON.stringify(source));
		}, [])
	);
		
	return (
		<WebView
			style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}
			ref={(ref) => (this.webview = ref)}
			originWhitelist={['*']}
			source={source} 
			startInLoadingState={true}
			renderLoading={() => <ActivityIndicator style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} size="large" />}
			onError={(syntheticEvent) => {
				const { nativeEvent } = syntheticEvent;
				console.log('WebView error: ', nativeEvent);
				setSource(ErrorHTML);
			}}
		/>
	);
}

I figured it out in the end.

I discovered unmountOnBlur and added it to the Drawer Navigation Code as follows: -

<Drawer.Screen name="Web Screen" component={WebScreen}
	options={{
		unmountOnBlur: true,
	}}
/>