How to navigate to different screen and get back to the screen from where its navigated using DrawerNavigator?

Question

I have two components (List and Detail):

List.js:

export default class List extends React.Component {
    render() {
        const {navigate} = this.props.navigation;
        return (
            <View style={styles.container}>
                <Text style={styles.headerText}>List of Contents</Text>
                <Button onPress={()=> navigate('Detail')} title="Go to details"/>
            </View>
        )
    }
}

Detail.js:

export default class Detail extends React.Component {
    render() {
        return (
            <View>
                <Text style={styles.headerText}>Details of the content</Text>
            </View>
        )
    }
}

I would like to have two screens (NowList and SoonList) which are basically the same type of list, so I am using the same List component for both the screen. And from each of these screens I want to navigate to the Details of the item, also which in this case has the same type of layout so I am using Detail component for both the list items.

Finally, when the App starts I want the NowList screen to show. And using the drawer I would like to navigate to SoonList screen.

I am not sure how to configure this route. But, this is how I have configured the routes for now:

const NowStack = StackNavigator({
    NowList: {
        screen: List,
        navigationOptions: {
            title: 'Now',
        }
    },
    Detail: {
        screen: Detail,
        navigationOptions: {
            title: 'Detail',
        }
    }
});

const SoonStack = StackNavigator({
    SoonList: {
        screen: List,
        navigationOptions: {
            title: 'Soon',
        }
    }
});

export const Drawer = DrawerNavigator({
    Now: {
        screen: NowStack,
    },
    Soon: {
        screen: SoonStack,
    }
});

When I navigate from NowList route to Detail route. There's a back button in the Detail route which on press navigates back to the NowList.

However, when I go to Soon route, and navigate to Detail route, I go to Detail screen. But, when I press the back button on Detail navigation header, instead of navigating back to the SoonList screen, I am navigated to the NowList screen.

I think I am missing something here, or my route layout is not how its suppose to be. Could you help me how to configure the routes so that I can use DrawerNavigator to navigate to different screens, and from those screens navigate to another screen and again back to the screen navigated from?

Answer 1

You can make a stack navigator that contain your drawer navigator and detail, this way you can access both now list and soon list from drawer and able to navigate to detail screen from both list.

const App = StackNavigator({
  Drawer: {
    screen: Drawer,
  },
  Detail: {
    screen: Detail,
    navigationOptions: {
      title: 'Detail',
    },
  },
});

const Drawer = DrawerNavigator({
  NowList: {
    screen: List,
  },
  SoonList: {
    screen: List,
  },
});

Answer 2

Your route layout doesn't specify a Detail screen in the SoonStack navigator. When you navigate to Detail, react-navigation navigates to the only screen that is named that way. Since it is in the NowStack, going back returns to the first screen in the stack.

To solve this, you can add another Detail screen to the SoonStack navigator, however you'd want to either name it differently, or navigate to each Detail screen using its key.

In order to be able to navigate to the right Detail screen, you can add a parameter to each stack navigator.

For example:

const SoonStack = StackNavigator({
    SoonList: {
        screen: List,
        navigationOptions: {
            title: 'Soon',
        }
    },
    SoonDetail: {
        screen: Detail,
        navigationOptions: {
            title: 'Detail',
        }
    }
},{
    initialRouteParams: {
        detailScreen: 'SoonDetail'
    }
});

You can then use the parameter to navigate to the correct screen.

Also, it's possible to only use a single StackNavigator with the three distinct screens in it, and reset the stack to the correct screen when switching with the drawer.

You can read more about reset here.

how to use reset

If you have a single stack navigator:

const TheStack = StackNavigator({
    NowList: { screen: List, ... },
    SoonList: { screen: List, ... },
    Detail: {screen: Details, ... }
});

Then the drawer can reset the stack state to be whatever you want. For example, if the first screen was NowList and SoonList is clicked in the drawer, you can call:

const action = NavigationActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({routeName: 'SoonList'});
    ]
});
this.props.navigation.dispatch(resetAction);

This would cause the stack to reset and have the SoonList as the first screen. If Details is opened, then it is the second in the stack, and back will always go back to the correct screen.