Cannot read property 'routeName' of undefined react-navigation

Question

I am trying use a custom component for my drawer layout. Below is my custom Drawer component:

CustomDrawer.js:

class CustomDrawer extends Component {

  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  render () {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 1
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page1')}>
              Page1
              </Text>
            </View>
          </View>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 2
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page2')}>
                Page2
              </Text>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page3')}>
                Page3
              </Text>
            </View>
          </View>
        </ScrollView>
        <View style={styles.footerContainer}>
          <Text>This is my fixed footer</Text>
        </View>
      </View>
    );
  }
}

CustomDrawer.propTypes = {
  navigation: PropTypes.object
};

export default CustomDrawer;

const styles = StyleSheet.create({
  container: {
     paddingTop: 20,
     flex: 1
   },
   navItemStyle: {
     padding: 10
   },
   navSectionStyle: {
     backgroundColor: 'lightgrey'
   },
   sectionHeadingStyle: {
     paddingVertical: 10,
     paddingHorizontal: 5
   },
   footerContainer: {
     padding: 20,
     backgroundColor: 'lightgrey'
   }
});

Below is my router.js:

const mapNavigationStateParamsToProps = (SomeComponent) => {
  return class extends Component {
        static navigationOptions = SomeComponent.navigationOptions; // better use hoist-non-react-statics
        render() {
            const {navigation: {state: {params}}} = this.props
            return <SomeComponent {...params} {...this.props} />
        }
    }
}

export const MainScreenNavigator = TabNavigator({
 Home: {
   screen: Home,
  navigationOptions : {
     tabBarLabel: 'Home',
     tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
   },
 },
 MyCards: {
   screen: MyCards,
   navigationOptions : {
    tabBarLabel: 'My Cards',
    tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />
  },
 },

},
 {
   tabBarPosition: 'bottom',
   animationEnabled: true,
   tabBarOptions: {
     activeTintColor: '#e91e63',
   },
 },
);

export const drawerNavigation = DrawerNavigator({
    Home: {
      screen: Home,
    },
    MyCards: {
      screen: MyCards,
    },
    Profile: {
      screen: Profile,
    },
    SearchUsers: {
      screen: SearchUsers
    },
    CardRequests: {
      screen: CardRequests
    },
    GetCard: {
      screen: GetCard
    }
  }, {
    contentComponent: CustomDrawer,
    drawerWidth: 300
  }

);

drawerNavigation.navigationOptions = {
    header: null,
};

export const AppNavigation = StackNavigator({
    LoginScreen: { screen: Login},
    SignUpScreen: { screen: SignUp },
    Tabs: { screen: drawerNavigation},
    AddCard: { screen: AddCard },
    GetCard: {screen: GetCard},
    SearchedUserProfile: {screen: mapNavigationStateParamsToProps(SearchedUserProfile) }
  },
  {
   headerMode: 'screen'
 });

When I run the app I am getting the following error:

Cannot read property 'routeName' of undefined

I am using routerName in CustomDrawer. Can anyone please tell me what I am doing wrong?

Two questions. Is it routerName or routeName? Your code says routeName but your error says routerName. Also, where are your routed defined? Because your are navigating to 'Page1' but I don't see that defined. — sebastianf182
– sebastianf182, Commented Jan 28, 2018 at 5:53
I assume that you did import { NavigationActions } from 'react-navigation' in your CustomDrawer.js or there is no misspelling on that one. — Edper
– Edper, Commented Jan 28, 2018 at 6:29

Sumanth Jois · Accepted Answer · 2018-01-28 08:01:15Z

1

I fixed the issue by adding:

 drawerOpenRoute: 'DrawerOpen',
 drawerCloseRoute: 'DrawerClose',
 drawerToggleRoute: 'DrawerToggle',

The complete Drawer Navigator:

export const drawerNavigation = DrawerNavigator({
    Home: {
      screen: Home,
    },
    MyCards: {
      screen: MyCards,
    },
    Profile: {
      screen: Profile,
    },
    SearchUsers: {
      screen: SearchUsers
    },
    CardRequests: {
      screen: CardRequests
    },
    GetCard: {
      screen: GetCard
    }
  },{
      contentComponent: SideMenu,
      drawerWidth: 300,
      drawerOpenRoute: 'DrawerOpen',
      drawerCloseRoute: 'DrawerClose',
      drawerToggleRoute: 'DrawerToggle',
  });

Hope it helps

answered Jan 28, 2018 at 8:01

Sumanth Jois

3,2344 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot read property 'routeName' of undefined react-navigation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related