CODEWITHSUNDEEP
javascriptandroidreact-nativereact-navigation
user8475536
user8475536

Reputation:

react navigation v5 custom drawer route

i have created a custom drawer component with some buttons to navigate to other screens but i am getting an TypeError: undefined is not an object (evaluating '_this.props') when i click on drawer buttons.But if i remove the custom drawer component the default drawer works just fine.

how to fix the problem ? thank you

Drawer

import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationNativeContainer} from '@react-navigation/native';

import p1 from '../wiki/p1';
import Main from '../wiki/Main';
import p2 from '../wiki/p2';

import CustomDrawer from '../screens/CustomDrawer';

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
  return (
    <NavigationNativeContainer independent={true}>
      <Drawer.Navigator
        drawerType="front"
        initialRouteName="Main"
        drawerContent={() => <CustomDrawer />}>
        <Drawer.Screen name="Main" component={Main} />
        <Drawer.Screen name="p1" component={p1} />
        <Drawer.Screen name="p2" component={p2} />
      </Drawer.Navigator>
    </NavigationNativeContainer>
  );
};

export default DrawerNavigation;

CustomDrawer

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

const CustomDrawer = () => {
  return (
    <View>
      <Button
        title="Main"
        onPress={() => this.props.navigation.navigate('Main')}
      />

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

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

    </View>
  );
};

export default CustomDrawer;

p1

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

const p1 = ({navigation}) => {
  return (
    <View>
      <Text> p1 </Text>
      <Button title="GoBack" onPress={() => navigation.navigate('Main')} />
      <Button title="Goback" onPress={() => navigation.goback()} />
    </View>
  );
};

export default p1;

Upvotes: 4

Views: 7778

Answers (3)

Axel Jeremy
Axel Jeremy

Reputation: 31

Look at the documentation in link: https://reactnavigation.org/docs/en/drawer-navigator.html

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
 return (
  <NavigationNativeContainer independent={true}>
  <Drawer.Navigator
    drawerType="front"
    initialRouteName="Main"
    drawerContent={props => CustomDrawer(props)}
    drawerContentOptions={{
      inactiveTintColor: '',
      activeTintColor: '',
      labelStyle: '',
      itemStyle: {},
    }}>
    <Drawer.Screen
      name="Main"
      component={Main}
      options={{
        drawerIcon: () => <Svg />,
      }}
    />
    <Drawer.Screen
      name="p1"
      component={p1}
      options={{
        drawerIcon: () => <Svg />,
      }}
    />
    <Drawer.Screen
      name="p2"
      component={p2}
      options={{
        drawerIcon: () => <Svg />,
      }}
    />
     </Drawer.Navigator>
   </NavigationNativeContainer>
   );
};

 // this may work but is not ok
  const CustomDrawerBefore = props => {
  return (
      <View>
     <Button title="Main" onPress={() => props.navigation.navigate('Main')} />

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

     <Button title="p2" onPress={() => props.navigation.navigate('p2')} />
      </View>
  );
  };

 // this is I think the recommended way
const CustomDrawer = props => {
  return (
   <View>
    <View>Custom things header</View>
   <DrawerItemList {...props} />
  </View>
 );
};

Upvotes: 3

user8475536
user8475536

Reputation:

finally found the solution, i am not passing navigation in the Custom Drawer

const CustomDrawer = ({navigation}) => {
  return (
    <View>
      <Button
        title="Main"
        onPress={() => this.props.navigation.navigate('Main')}
      />

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

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

    </View>
  );
};

Upvotes: 4

Kishan Bharda
Kishan Bharda

Reputation: 5700

You have to pass props to your custom drawer as below :

<NavigationNativeContainer independent={true}>
  <Drawer.Navigator
    drawerType="front"
    initialRouteName="Main"
    drawerContent={(props) => <CustomDrawer {...props} />}> // pass props here
    <Drawer.Screen name="Main" component={Main} />
    <Drawer.Screen name="p1" component={p1} />
    <Drawer.Screen name="p2" component={p2} />
  </Drawer.Navigator>
</NavigationNativeContainer>

Upvotes: 4

Related Questions