App crashed when navigate to WebView component

[KPB98115]

Bug description:
I am using react-native-navigation to route two components, WebView will appear when navigate to component.In the first time of navigation is nothing wrong, but the App was crashed when I navigate to WebView component in second time with no error message show in the terminal. I have tried to unmount the WebView with conditional rendering after user was left the current component(code example in below), but somehow it still can't fix this issue.

const App = () => {
  return (
      <NavigationContainer>
        <Stack.Navigator screenOptions={{headerShown: false}}>
          <Stack.Screen name="Login" component={Authentication} />
          <Stack.Screen name="MainPage" component={MainPage} />
        </Stack.Navigator>
      </NavigationContainer>
  );
};

const MainPage = () => {
   const [isNavigated, setIsNavigated] = useState(true);

   useFocusEffect(
      useCallback(() => {
         // Do something when the screen is focused
         setIsNavigated(true);

         return () => {
           // Do something when the screen is unfocused
           setIsNavigated(false);
         };
       }, [])
     );

   return (
      { isNavigated && <WebView
          ref={webViewRef}
          source={{ uri: url }}
         onNavigationStateChange={handleNavigated} />
      }
   );
};

I notice that the WebView could be appear/render successfully at the first time navigate to this component when I am just return WebView component with no conditional rendering or change isNavigated state to true after the parent component is rendered, but not like the way in above example, the App will crash when navigate to WebViewPage component in the first time.
I also notice that component have render successfully, because the useFocusEffect hook was invoke in proper way. So I think the issue is about the WebView, but I have no idea why these mess happened.

Expected behavior:
I expect the WebView component will appear everytime when user navigate back and forward between two components, the WebView component should reset after the user left the MainPage component.

Screenshots/Videos:

Environment:

• OS: MacOs
• OS version: Ventura 13.4
• react-native version: 0.71.10
• react-native-webview version: 13.2.2

[suneox]

I also use version 13.2.2 the option androidLayerType="software" work for me

[manosKas]

i have disabled navigation transition animations

[TheAlmightyBob]

What platform are you seeing this on?

[ororsatti]

It might be related to the memory leak RNWW introduced on 13.0.0.
#3020

[Irfanwani]

@suneox worked for me too. And the problem is android specific.

[TheAlmightyBob]

If it's Android-specific and software rendering helps, it might be related to #2874

[KPB98115]

What platform are you seeing this on?

I would like to build an app on Android and iOS platform.

i have disabled navigation transition animations

I have found this solution too, and it works for me as well. Thanks.

I have found the reason of this issue is something related to React-Naive-Navigation library, the WebView able to re-render with no problem when I added attribute 'animation: "none"' in <Stack.Navigator>. I guess the animation trigger the parent component re-render before the WebView is load completely, hope it helps. Thank you for all suggestions.

[TheAlmightyBob]

Yes that does sound related. Thanks @KPB98115 for updating.

This issue doesn't use react-native-navigation but is very similar: #1915

The repro that #2874 focused on was using a ScrollView, not navigation transitions, but I believe there was suspicion that the issues might be related and so that PR might help.

(which is to say, if you don't want to use software rendering or the opacity trick or turn off transition animations, you could try patching the changes from that PR)

[sammybammy52]

I also use version 13.2.2 the option androidLayerType="software" work for me

Thanks this worked for me