goBack always taking to home/first screen in react-navigation

user_2063762 0
Viewed 3924

I am working on an app but goback button is not taking me to the back screen.

App.js

import React, { Component } from 'react';
import one from './components/test/one';
import two from './components/test/two';
import three from './components/test/three';

import { DrawerNavigator } from 'react-navigation';

const AppNavigator = DrawerNavigator({
    one: {
      screen: one,
    },
    two: {
      screen: two,
    },
    three: {
      screen: three,
    },
  }
);

export default () =>
      <AppNavigator />;

components/test/one.js

import React, { Component } from 'react';
import { Button } from 'react-native';

export default class one extends React.Component {
  static navigationOptions = {
    drawerLabel: 'one',
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('two')}
        title="Go to Two"
      />
    );
  }
}

components/test/two.js

import React, { Component } from 'react';
import { Button } from 'react-native';

export default class two extends React.Component {
  static navigationOptions = {
    drawerLabel: 'two',
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('three')}
        title="Go to 3"
      />
    );
  }
}

components/test/three.js

import React, { Component } from 'react';
import { Button } from 'react-native';

export default class three extends React.Component {
  static navigationOptions = {
    drawerLabel: 'three',
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back to 2"
      />
    );
  }
}

click on "Go to two" => "Go to 3" => "Go back to 2". on screen 3, clicking on the "Go back to 2" is always taking me to one.js.

It is not even working if I combine them in one single file.

react-navigation react-native
1 Answers

You are either using the wrong Navigator comp or your requirements are not clear. Basically, You would like to use the StackNavigator for your desired behavior.

The catch is, DrawerNavigator is used to build up a drawer menu. If you swipe from the left you'll see your navigator drawer containing all of your screens, as you can see in the image below.

enter image description here

If you add a button on your screen like below, you'll see your menu open. 

<Button title="MENU" onPress={() => this.props.navigation.navigate('DrawerOpen')} />

The conclusion is, whenever we use DrawerNavigator we always go back to initial route, which is whatever we defined as the first item or using the initialRouteName key of the second param of the DrawerNavigator.

It's only the StackNavigator that supports this stacking order you would like to achieve, as the name suggests itself.

What you can do is to wrap a new StackNavigator inside one of the screens of the DrawerNavigator. For example:

const AppNavigator = DrawerNavigator({
    drawer1: {
        screen: drawer1,
    }
});

const drawer1 = StackNavigator({
    one: { screen: one },
    two: { screen: two },
    three: { screen: three },
});
user_27377830
Related