How to push a new scene using react-navigation?

Question

I'm creating an react-native application and i'm using for navigation react-navigation.

I'm trying to get the following behavior:

Have a main Drawer menu, if i navigate to a item from Drawer, the drawer should close, navigate to scene and have the same navbar for all items in the drawer. In one item i have a tab navigator.

I actual implementation the only problem is: the drawer is not closing on item click. Any suggestion?

And if i navigate from a scene to another scene (this scene is not an drawer item), i can navigate to that scene but my header (navbar) is not changing and i don't have the back button. Any suggestion?

This is what i have done for moment, but is not working as expected.

    import React from 'react'
    import {
      createStackNavigator,
      createSwitchNavigator,
      createDrawerNavigator,
      createMaterialTopTabNavigator,
    } from 'react-navigation'
    import { StyleSheet } from 'react-native'
    import { Icon } from 'react-native-elements'
    import { AppConfig } from '../constants'
    import { AppSizes, AppColors } from '../theme'

    import DrawerMenu from './drawerMenu'
    // import DrawerScreen from './DrawerScreen'

    // Scenes
    import LaunchContainer from '../containers/Launch'
    import LoginContainer from '../containers/Login'
    import HomeContainer from '../containers/Home'
    import RoomsHistoryContainer from '../containers/RoomsHistory'
    import LogoutContainer from '../containers/Logout'
    import ChatContainer from '../containers/Chat'

    const styles = StyleSheet.create({
      iconStyle: {
        marginLeft: 10,
      },
    })

    const TabStack = createMaterialTopTabNavigator(
      {
        Conversation: {
          screen: RoomsHistoryContainer,
          navigationOptions: {
            title: 'Conversatii',
          },
        },
        Comunitate: {
          screen: LaunchContainer,
          navigationOptions: {
            title: 'Comunitate',
          },
        },
        Chatroom: {
          screen: LaunchContainer,
          navigationOptions: {
            title: 'Chatroom',
          },
        },
      },
      {
        tabBarOptions: {
          style: {
            backgroundColor: AppColors.tabbar.background,
          },
          activeTintColor: AppColors.tabbar.activeTintColor,
          inactiveTintColor: AppColors.tabbar.inactiveTintColor,
          indicatorStyle: {
            backgroundColor: AppColors.tabbar.indicatorColor,
          },
        },
      }
    )

    const AppStack = createStackNavigator(
      {
        Home: { screen: HomeContainer },
        Calendar: { screen: LaunchContainer },
        Comunitate: {
          screen: TabStack,
          navigationOptions: { title: 'Comunitate' },
        },
        Logout: { screen: LogoutContainer },
        ChatMessage: { screen: ChatContainer },
      },
      {
        headerMode: 'float',
        navigationOptions: ({ navigation }) => ({
          ...AppConfig.navbarProps,
          title: 'My app',
          headerLeft: (
             navigation.toggleDrawer()}
            />
          ),
        }),
      }
    )

    const DrawerStack = createDrawerNavigator(
      {
        Main: { screen: AppStack },
      },
      {
        contentComponent: DrawerMenu,
        contentOptions: {
          activeTintColor: 'white',
          activeBackgroundColor: 'white',
        },
        drawerWidth: AppSizes.screen.width > 250 ? AppSizes.screen.width - 80 : 250,
      }
    )

    const AuthStack = createStackNavigator(
      {
        SignIn: {
          screen: LoginContainer,
          navigationOptions: {
            title: 'Login',
          },
        },
        SignUp: {
          screen: LoginContainer,
          navigationOptions: {
            title: 'Logout',
          },
        },
      },
      {
        headerMode: 'none',
      }
    )

    const AppNavigator = createSwitchNavigator(
      {
        Launch: { screen: LaunchContainer },
        App: { screen: DrawerStack },
        Auth: { screen: AuthStack },
      },
      {
        initialRouteName: 'Launch',
      }
    )

    export default AppNavigator

Answer 1

Close drawer when use navigate

Simply, call drawer close method before naviagate.

this.props.navigation.closeDrawer();
this.props.navigation.naviagte('ANOTHER_SCREEN');

Show BackButton on Header in React Navigation

BackButton is shown only StackNavigation after push or navigate from another screen which is in same StackNavigation. Thus,

• Check your screen's position. Is it the screen component in StackNavigation?
• Is it moved in from another screen which is in same StackNavigation?
• Is your Header mode right in navigationOptions?

Answer 2

1. Navigation drawer not closing

This is unusual, if everything is correct in your custom drawer component, it should work. But you can always use this.props.navigation.closeDrawer();

2. Back button is not showing

I assume this is happening in AppStack. Your code looks fine. Be sure to use this.props.navigation.navigate(screenName). If pressing hardware back button goes to previous screen, then stack navigation is working good. So the problem is in your header rendering. I would recommend to remove all the custom options for now and just try with a simple createStackNavigator without any navigations options. This is the first step to point out the root cause of your problem.