Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webview causing react-native app to crash on navigation

The app crashes on multiple Android devices I tested on. When I go from the welcome screen to a screen containing nothing but the webview tag, I click back to welcome screen and hit login button that has this navigation code on login success, here it crashes before the navigation:

const resetAction = CommonActions.reset({
  index: 1,
  routes: [{ name: 'primaryStack' }]
 })

function login() {
 .....
 .....
 if (success) navigation.dispatch(resetAction)
}

Here's my webview tag on the webview screen:

       <WebView
          // style={{ opacity: 0.99, overflow: 'hidden' }}
          source={{ uri: 'http://192.168.1.6:8000/admin' }}
          androidHardwareAccelerationDisabled
          startInLoadingState={true}
          renderLoading={() => 
            <Text style={[P,{color:color.palette.blue,alignSelf:"center",}]}
            numberOfLines={1} ellipsizeMode="tail">
              Loading…
            </Text>
          }
        />
      </View>

My navigation stacks:

<NavigationContainer {...props} ref={ref}>
  <Stack.Navigator
screenOptions={{
  headerShown: false,
  gestureEnabled: true,
}}
>
  
  { (rootStore.auth.loggedin) ?
    <Stack.Screen
      name="primaryStack"
      component={PrimaryNavigator}
      options={{
        headerShown: false,
        screenOrientation: "portrait",
      }}
    /> :
    <Stack.Screen
      name="authStack"
      component={AuthNavigator}
      options={{
        headerShown: false,
        screenOrientation: "portrait",
      }}
    />
  }
  
</Stack.Navigator>
</NavigationContainer>

Packages:

...
...
"@react-navigation/native": "^5.1.5",
"mobx": "^4.15.4",
"mobx-react-lite": "^1.4.1",
"mobx-state-tree": "^3.14.1",
"react-native-safe-area-view": "1.1.1",
"react-native-screens": "^2.10.1",
"react-native-webview": "^11.13.0",
...
...
like image 605
Hakeem.D Avatar asked Oct 11 '25 10:10

Hakeem.D


1 Answers

Have you seen this Screen with WebView crashes App during navigation?

Workarounds: <Stack.Screen ... options={{animationEnabled: false}} /> or react-navigation >= 6.x use <Stack.Screen ... options={{animation:'none'}} />

like image 171
Rasmus Knap Avatar answered Oct 13 '25 22:10

Rasmus Knap



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!