Reputation: 1046

react-navigation v2 Back Button Closes The App

I am facing a very weird issue with an app which has been working fine and after upgrading to react-navigation v2 has started to have the issue.

Anywhere within the app, the Back Button on Android closes the app and moves it back to the suspended apps.

I have tried many things in terms of handling the back behaviour manually, downgrading some of the packages etc but none of them worked.

Here is my package.json file:

Upvotes: 5

Answers (7)

Kazi Hasan Ali

Reputation: 306

Well i am using firebase 5.5.5 i don't have any problem with navigation , I think you need to create your stack navigator to use the back butoon properly , I have given a example of it. pages are imported also i have not attached the screen importing code

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

  const Drawer = createDrawerNavigator(
    {
        BrowseQuestion: BrowseQuestion,
        BrowseCategory: BrowseCategory,

    }

  );

  const Loginstack = createStackNavigator({
    Login: LoginScreen,
    Forgot: ForgotPassword,
    Signup: SignupScreen,
  })


  export default createSwitchNavigator({
    Login : Loginstack,
    Account: Drawer,
   },
   {
    initialRouteName: 'Login'
   }
  );

Upvotes: 0

Aakash Daga

Reputation: 1561

I have faced the same issue, it seems like the implementation of Backhandler.android.js is not correct, you can find the file here node_modules/react-native/Libraries/Utilities/BackHandler.android.js , in this file const subscriptions = Array.from(_backPressSubscriptions.values()).reverse(); piece of code always returns an array of length 0, that's why the invokeDefault variable always stays true and closes the app, you can fix it by handling the back button behavior via your own implementation.

In Navigation Service add this method

import { NavigationActions, StackActions } from 'react-navigation';*

let navigator;
  function setTopLevelNavigator(navigatorRef) {
    navigator = navigatorRef; 
  }

  function pop() {
    navigator.dispatch(StackActions.pop());
  }

    export default {
     pop,
     setTopLevelNavigator
  };

You need to set the top level navigator in your app.js, like this int render method's return statement

<AppNavigator //Replace it with your navigator
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
        onNavigationStateChange={(prevState, currentState) => {
          this.setState({ currentState });
        }}
/>

To handle the Back button functionality add these things in your app.js

import NavigationService also

import {
 BackHandler,
 DeviceEventEmitter
} from 'react-native';

In componentDidMount add these

  componentDidMount() {
   BackHandler.addEventListener('hardwareBackPress', this.handleHardwareBack);
  }

In componentWillUnmount add these

componentWillUnmount() {
 BackHandler.removeEventListener('hardwareBackPress',this.handleHardwareBack);
}

Now handling the hardware back button

  handleHardwareBack = () => {
if (!isUndefined(this.state.currentState)) {
  const mainRouteIndex = this.state.currentState.index;
  const mainRoute = this.state.currentState.routes[mainRouteIndex];
  const subRouteIndex = mainRoute.index;

  if (subRouteIndex === 0) {
    console.log(
      'the screen name is ----> ',
      mainRoute.routes[subRouteIndex].routeName
    );
    this.toggleExitModal(); //you can place any dialog if you want to show
    return true;
  }

  NavigationService.pop();
  return true;
}
console.log('Back Button is handled in the respective page seperately');
};

return true tell that we are going to handle the back button functionality manually, return false will lead to exits the app as by default it is Hardware back button closes the app :(

Hope this will help you

Upvotes: 0

Rajendran Nadar

Reputation: 5438

Converting this import statement fixed my issue

import Firebase from '@firebase/app' // The issue got fixed after adding @
import 'firebase/auth'
import 'firebase/database'
import 'firebase/storage'

Without the @ the backbutton was exiting the user from application

Upvotes: 0

Sarath S Menon

Reputation: 2331

The issue is with the npm firebase package. There are two ways to fix this.

As mentioned in the other answers, downgrade firebase to 5.0.3
Change the way in which you import firebase. This method will be a lot easier. Use:
```
import firebase from "@firebase/app";
import "firebase/auth";
import "firebase/database";
```
Don't use import * as firebase from "firebase"; or import firebase from "firebase";

See this GitHub issue for more details.

Upvotes: 1