Navigating between screens crashes when you have WebView and ActivityIndicator running on your screen

[ororsatti]

Current behavior

I am rendering 2 screens:

1. Home - where I have a button that navigates to the second screen
2. Details - where I have a WebView and a ActivityIndicator rendered. I also have a button here that navigates back on press.

Video example:

Screen_Recording_20230501_143022_Expo.Go.mp4

Code example:

import * as React from 'react';
import { Text, View, Pressable, Button,ActivityIndicator} from 'react-native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer,createNavigationContainerRef } from '@react-navigation/native';
import WebView from 'react-native-webview';

const Stack = createNativeStackNavigator()
const navRef = createNavigationContainerRef()

const CrashComponent = () => {
  const [isLoading,setIsLoading] = React.useState(false);
    return (
      <>
      <View  style={{marginTop:200}}>
        <Pressable style={{padding:20, backgroundColor:'green'}} onPress={()=>{
          if(isLoading) return;
          setIsLoading(true);
          setTimeout(() => navRef.goBack(),2000);
        }}>
          {isLoading && <ActivityIndicator />}
          {!isLoading && <Text>Go back</Text>}
        </Pressable>
      </View>
      <WebView source={{ uri: 'https://reactnavigation.org/' }} style={{ flex: 1 }} />  
      </>
    )

}

export default function App() {
  return (
<NavigationContainer ref={navRef} initialRouteName='home' >
  <Stack.Navigator screenOptions={{headerShown:false}}>
    <Stack.Screen name='home'  component={() => 
    <View style={{marginTop:200}}>
      <Button  title='webview + indicator (will crash)' onPress={() => navRef.navigate('Details') } />
    </View> } />
    <Stack.Screen name='Details' component={() => <CrashComponent />} />
  </Stack.Navigator>
</NavigationContainer>
  );
}

In this example when ever I navigate to Details and click on the button it shows the ActivityIndicator and than calls navRef.goBack() and than it crashes.
I have an expo snack here for you to test on.
Edit: It happens on every navigation, not only goBack()

Expected behavior

It shouldn't crash because of that. it should have go back to the previous screen.

Reproduction

https://snack.expo.dev/@worktonio/activity-indicator-failure

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native
• @react-navigation/native-stack
• react-native-tab-view

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.6
@react-navigation/native-stack	6.9.12
react-native-safe-area-context	4.5.1
react-native-screens	3.20.0
react-native-gesture-handler	^2.9.0
react-native-reanimated	^3.0.2
react-native	0.71.6
node	v16.16.0
npm or yarn	3.5.0

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[dumitru-buda]

Any updates on this one?

[ororsatti]

Any updates on this one?

It's a webview issue so you might want to visit their issue page