question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Back navigation is buggy with `createNativeStackNavigator` on Android

See original GitHub issue

Description

I have set up a createNativeStackNavigator using the react-navigation library. It is set up as follows

    <Stack.Navigator>
      <Stack.Screen
        name="MainTabs"
        component={MainTabs}
        options={{headerShown: false}}
      />
      <Stack.Screen name="ChatScreen" component={ChatScreen} />
    </Stack.Navigator>

Note: MainTabs is a tab navigator created using the createMaterialBottomTabNavigator api from @react-navigation/material-bottom-tabs

Whenever I push a screen and then press back either from the header or using the Android back gesture, the top screen is popped for once and then suddenly the popped screen again shows up in a weird way (check the video below to better understand whats happening)

The navigations work perfectly fine on iOS. The navigations also work on Android when I use createStackNavigator instead of createNativeStackNavigator

Video

https://user-images.githubusercontent.com/20258578/135298803-fc34834e-a4ff-4157-a72d-3d5055635a15.mp4

Steps To Reproduce

  1. Make a Material bottom navigator (using the createMaterialBottomTabNavigator api from @react-navigation/material-bottom-tabs)
  2. Nest it inside createNativeStackNavigator
  3. Start the app and try to push a screen and then go back

Expected behavior

After pressing back the popped screen should disappear and not shown again

Actual behavior

Shows the correct screen for a split second but then shows some parts of the popped screen (Check video from above)

Snack or minimal code example

Package versions

{
    "react-native-paper": "^4.9.2",
    "react": "17.0.2",
    "react-native": "0.65.1",
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
WoLewickicommented, Nov 30, 2021

I tested a simple example with react-native-reanimated: 2.3.0-beta.1 and I could spot an issue. After upgrading to 2.3.0-beta.4, I can no longer see the problem. I will close it then. Feel free to comment here if I am wrong and we can reopen it then.

1reaction
mateusz1913commented, Sep 30, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting | React Navigation
Troubleshooting. This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation.
Read more >
react-navigation header has a faint line - Stack Overflow
On this home screen I want to disable the header bar since there is nothing to navigate to and it just moves the...
Read more >
createMaterialTopTabNavigator - React Navigation - Netlify
A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or...
Read more >
Integrating React Native Navigators - Inspeerity
First navigator; Tab navigation; Nested stack navigator; Hide tab bar when going deep; Common screens in stack; Custom back button behavior.
Read more >
facebook Code Example - Code Grepper
//stop procastinating and go back to coding ... I think you should go back to work !! ... License for package Android SDK...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found