Drawer wont open goes to initialRouteName when i call DrawerOpen

Question

I have two Nagigators 1:StackNavigator and 2:DrawerNavigator

my react native and react navigation version

"react-native": "0.55.4",
"react-navigation": "^1.0.0-beta.11",

my root navigator is the StackNavigator from which i call the DrawerNavigator.

when i call the navigation.navigate('DrawerOpen') my screen returns to the initialRouteName .

my StackNavigator

import DrawerNavigatorScreen from "./src/DrawerNavigator";

const myApp = StackNavigator({
  Home: {
    screen: App,
    navigationOptions: {
      header: null
    }
  },
HomeChildData: {
        screen: DrawerNavigatorScreen,
        navigationOptions: {
          header:null,
        }
},
otp: {
    screen: otp,
    navigationOptions: ({ navigation }) => ({
      header: null
      })
  }
});

my DrawerNavigator (/src/DrawerNavigator)

const DrawerNavigatorScreen = DrawerNavigator(
  {
social: {
          screen: socialstack,
          navigationOptions: {
            header: null
          }
        },
profile: {
    screen: profilescreen,
    navigationOptions: ({ navigation }) => ({
      header: null
      })
  },
{
    initialRouteName: "social",
    contentOptions: {
      labelStyle: {
        alignSelf: "center",
        fontFamily: "Avenir-Light",
        fontSize: 15,
        color: "#3B3B3B"
      },
      activeTintColor: "#3B3B3B",
      activeBackgroundColor: "#ffc34d", //rgba(255,181,14,0.1)
      // inactiveTintColor: 'black',
      inactiveBackgroundColor: "#fff"
    },
});

export default DrawerNavigatorScreen

where my problem occurs

 static navigationOptions = ({ navigation }) => ({
        header:null,
        headerTitleStyle: {
          alignSelf: 'center',
          marginLeft: margintLeftValue,
              color: '#2F2E2F',
              fontFamily: 'Avenir-Medium'
        },
        headerLeft: <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
          <Image
            source={require('./../images/menu.png')}
            style={styles.drawerIcon} />
        </TouchableOpacity>,

      })

I want to simply open or toggle the drawer .

I cannot see any nesting between the two navigators. Please post the logical code to understand properly. Also mention the version of react-navigation you are using, — Suraj Malviya

Johannes Nyman Johannes Nyman · Accepted Answer · 2019-04-29T14:03:17

0

votes

I think what you're looking for is navigation.toggleDrawer();.

You can read more here.

Drawer wont open goes to initialRouteName when i call DrawerOpen

1 Answers