React native Question posted in
The official React Native documentation can be found here.

React native – Back Button Closes the App Instead of Navigating to the Previous Screen on Android React Navigation

When pressing the back button on Android, the app closes unexpectedly instead of navigating to the previous screen.

Video demonstrating the issue

I have tested the issue by creating two separate apps using the following commands:

  • npx create-expo-app@latest
  • npx create-expo-app@latest --template react-navigation/template

In both implementations, the back button works as expected and navigates to the previous screen.

I upgraded Expo to version 51 (from version 50) and updated the necessary packages, but the issue persists. I have attempted several solutions over the past few days, including upgrading React Navigation to version 7, but the problem remains unresolved.

At this point, I am unsure of what else to try.

Here is the code I have implemented inside App.tsx:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { Button, Text, View } from 'react-native';

const Stack = createNativeStackNavigator();

const ScreenOne = (props) => {
  return (
    <View
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}
    >
      <Text>Screen One</Text>
      <Button
        onPress={() => {
          props.navigation.navigate('ScreenTwo');
        }}
        title="Go To Screen Two"
      />
    </View>
  );
};

const ScreenTwo = () => {
  return (
    <View
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}
    >
      <Text>Screen Two</Text>
    </View>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="ScreenOne" component={ScreenOne} />
        <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

I also tried adding import ‘react-native-gesture-handler’; (recommendation from one of the solutions)

Here are the packages I am using (Note: These versions are after updating to expo v51)

Package Version
@react-navigation/native ^6.1.17
@react-navigation/bottom-tabs ^6.5.20
@react-navigation/material-top-tabs ^6.6.14
@react-navigation/native-stack ^6.9.26
react-native-tab-view ^3.5.2
react-native-screens 4.10.5
react-native-safe-area-context 4.10.5
react-native-gesture-handler ~2.16.1
react-native-reanimated ~3.10.1
react-native-pager-view 6.3.0
react-native 0.74.5
expo ^51.0.0
node 20.15.1
npm 10.8.2

I have included the current behaviour video.

Please let me know what else could I provide to help finding the cause.

Please Note: I took over the work of previous developer who setup the navigation, I modified it a lot but basic navigation should still work, but it does not.

I am unable to reproduce this issue in new project.

Github issue: https://github.com/react-navigation/react-navigation/issues/12366

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally I was able to reproduce this.

    Not an issue with React navigation, it was due to "react-native-crisp-chat-sdk" package.

    In case, you face this issue and can not figure out who is the culprit, you can follow what I did to find the culprit, (or suggest me a better way)

    1. Duplicate the entire project.
    2. REMOVE everything EXCEPT the bare minimum required to run the project.
    3. Remove all imports from other config files.
    4. remove all but base minimum required packages from the list (package.json) (Remove node_modules folder)
    5. Run npm install
    6. Run npm run android
    7. If the app works as expected, add 2 or 3 npm packages from old package.json file, Remove node_modules folder and run npm install -> npm run android -> TEST
    8. Keep repeating previous step until you find the culprit.
    9. If no culprit is found, start updating config files with import from original files, one by one and test after every change.
    10. To keep testing simple, add the following code inside your App.tsx file or index.tsx file. (Entry file)
    import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { Button, Text, View } from 'react-native';

const Stack = createNativeStackNavigator();

const ScreenOne = (props) => {
  return (
    <View
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}
    >
      <Text>Screen One</Text>
      <Button
        onPress={() => {
          props.navigation.navigate('ScreenTwo');
        }}
        title="Go To Screen Two"
      />
    </View>
  );
};

const ScreenTwo = () => {
  return (
    <View
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}
    >
      <Text>Screen Two</Text>
    </View>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="ScreenOne" component={ScreenOne} />
        <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

    I am closing this, I hope this comment will help someone one day.


  2. 0

    You could try using expo-router instead of react-navigation. Expo is meant to work well with expo-router

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search