CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-navigation-v5drawertoggle
Fahad Azhar
Fahad Azhar

Reputation: 188

Open Drawer of child from parent React Navigation V5

I have the main navigation of App setup. Here I initialize route stacks which can have drawer, stacks or tabs stacks.

navigation.js 

const Stack = createStackNavigator();

const AppNavigation = () => {
  return (
    <NavigationContainer style={{backgroundColor: 'red'}}>
      <Stack.Navigator headerMode="screen">
        <Stack.Screen
          options={{headerShown: false}}
          name="Auth"
          component={AuthRoutes}
        />
        <Stack.Screen
          name="collector"
          component={CollectorRoutes}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Problem is when I am trying to change the header from one of the stacks , I am not able to change the header settings of that stack like:

collector.routing.js

const Drawer = createDrawerNavigator();

const CollectorRoutes = () => {
  return (
    <Drawer.Navigator options ={ // options here also have no effect}>
      <Drawer.Screen
        options={({navigation}) => ({ // this has no effect
          headerTitle: props => (
            <View>
              <Text>HEDAER</Text>
            </View>
          ),
          headerLeft: props => (
            <Button
              block
              style={{backgroundColor: themeStyle.textColor}}
              onPress={() => navigation.toggleDrawer()}>
              <Text>Login</Text>
            </Button>
          ),
        })}
        name="list"
        component={Collector}
      />
    </Drawer.Navigator>
  );
};

However if I give header options in navigation.js on the scree on CollectorRoutes then the headers are customized.

But then one more problems comes in, I cannot toggle the drawer from there as the navigation stack of child drawer stack is not accessible in parent.

navigation.js -> with header enabled for DrawerStack (CollectorRoutes)

const Stack = createStackNavigator();

const AppNavigation = () => {
  return (
    <NavigationContainer style={{backgroundColor: 'red'}}>
      <Stack.Navigator headerMode="screen">
        <Stack.Screen
          options={{headerShown: false}}
          name="Auth"
          component={AuthRoutes}
        />
        <Stack.Screen
          options={({navigation}) => ({ // this setting gives me header in drawer stack 
            headerTitle: props => (
              <View>
                <Text>HEDAER</Text>
              </View>
            ),
            headerLeft: props => (
              <Button
                block
                style={{backgroundColor: themeStyle.textColor}}

                onPress={() => navigation.toggleDrawer()}> // but here I cannot access drawer toggle 
                <Text>Login</Text>
              </Button>
            ),
          })}
          name="collector"
          component={CollectorRoutes}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Is there any solution to access the drawer toggle in the parent? Or can we somehow instead of giving the header option in parent we can configure it in child?

Upvotes: 3

Views: 2005

Answers (0)

Related Questions