Screen with WebView crashes App during navigation

[chongma]

Current Behavior

• What code are you running and what is happening?

Navigating to a screen which contains a WebView crashes the whole app with no stack trace. Disabling animations on the screen fixes the problem e.g. <Stack.Screen ... options={{animationEnabled: false}} />

Expected Behavior

• What do you expect should be happening?

It should navigate

Your Environment

software	version
iOS or Android	Android
@react-navigation/native	5.8.9
@react-navigation/stack	5.12.6
react-native-gesture-handler	1.7.0
react-native-safe-area-context	3.1.4
react-native-screens	2.10.1
react-native	5.8.9
expo	39.0.3
node	12.19.0
npm or yarn	npm

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/stack (found: 5.12.16, latest: 5.12.6)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[chongma]

Sorry that was a typo. It is version 5.12.6

[WoLewicki]

Do you use enableScreens()? If so, the issue with WebView should have been resolved in software-mansion/react-native-screens#607 and should be available from react-native-screens v. 2.12.0.

[chongma]

@WoLewicki No I never used enableScreens() unless it is on by default?

[WoLewicki]

@chongma it depends on how you created the project. You can check if enableScreens() is present in your index.js or somewhere else in your code.

[satya164]

See the workaround here #9067 (comment)

[avinashd3]

Current Behavior

• What code are you running and what is happening?

Navigating to a screen which contains a WebView crashes the whole app with no stack trace. Disabling animations on the screen fixes the problem e.g. <Stack.Screen ... options={{animationEnabled: false}} />

Expected Behavior

• What do you expect should be happening?

It should navigate

Your Environment

software version
iOS or Android Android
@react-navigation/native 5.8.9
@react-navigation/stack 5.12.6
react-native-gesture-handler 1.7.0
react-native-safe-area-context 3.1.4
react-native-screens 2.10.1
react-native 5.8.9
expo 39.0.3
node 12.19.0
npm or yarn npm

Hi Matthew(chongma),
I was getting the app crash while navigating and after applying the property {{animationEnabled: false}}, the issue got resolved.
Thanks for the solution.

Regards,
Avinash

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[reza-madani]

@chongma
<Stack.Screen ... options={{animationEnabled: false}} /> -> That's solved my problem. thanks.
In react-navigation >= 6.x use <Stack.Screen ... options={{animation:'none'}} />

[1Jesper1]

Thanks @rezareact That worked, on IOS and Android!
When does this problem get fixed?

[andmau90]

the solution works on my android, but is possible that the crash occurs only on some devices with com.google.android.webview instead of devices with com.android.chrome?

[lennartkloock]

@chongma Thank you for your workaround! Seems to still be an issue

[vtwigge1000]

@lennartkloock We tried all proposed solutions and were still getting crashes on certain Android devices. This is what we did to fix it temporarily:

Use the useIsFocused hook to render the WebView conditionally.

const isFocused = useIsFocused();

{isFocused && (
          <WebView
            ...
           />
 )}

We had one screen where we had to wrap the parent component (instead of the child component containing the WebView) in isFocused to avoid a crash. This is not an optimal solution, but fortunately we didn't experience any noticeable decline in performance.

[josequintana94]

Solved with:

<Stack.Screen options={{animationEnabled: false}} name="MainScreen" component={MainScreen} />

[fabriziocucci]

The only reasonable workarounds I've found acceptable (without disabling the animations on the stack screen) are:

• using the useIsFocused hook to conditionally render the WebView (as mentioned here):

const isFocused = useIsFocused();
// ...
return (isFocused && (<WebView ... />)

• setting androidLayerType="software" on the WebView component (as mentioned here):

<WebView androidLayerType="software" ... />

NOTE: I could see some noticeable performance regression with the latter option, so I'd suggest to try the former first!

[stydeveloper]

options={{animation:'none'}}

Issue resolved