CODEWITHSUNDEEP
react-nativetabsnavigationexpodrawer
Imdad Hussain
Imdad Hussain

Reputation: 33

React native - undefined is not an object ('evaluating this.props.navigation')

Expected behaviour: A drawer should be opened containing a menu icon in the header.

Current behaviour: Error message undefined is not an object ('evaluating this.props.navigation')

Searching for the error didn't help me.

I split up the navigation into two files: RootNavigation.js and MainTabNavigation

RootNavigation.js

const AppNavigator = createSwitchNavigator({

  Main: MainTabNavigator,
});
const DrawerStack = createDrawerNavigator({
  Home: {
    screen: AppNavigator
  },
  Login: {
    screen: login
  },
  Signup: {
    screen: signup
  }
});

export default class RootNavigation extends React.Component {
  componentDidMount() {
    this._notificationSubscription = this._registerForPushNotifications();
  }

MainTabNavigation.js

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),   
};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Shops',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-list${focused ? '' : '-outline'}` : 'md-list'}
    />
  ),
};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Cart',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-cart${focused ? '' : '-outline'}` : 'md-cart'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

MainTab file which displays an icon in the header

static navigationOptions = ({navigation}) =>({
  title: 'Home',
  headerLeft: <Ionicons 
                name="md-menu" 
                size={25} 
                color="blue" 
                style={{ margin: 7,}}
                onPress={() => this.props.navigation.navigate('DrawerOpen')} 
                />
});

Upvotes: 0

Views: 1917

Answers (2)

Ezra
Ezra

Reputation: 1168

As explained in the documentation here, when navigationOptions is used as a function, this does not refer to an instance of the component; so this.props is not available.

Instead, you will need to replace:

this.props.navigation.navigate('DrawerOpen')

with:

navigation.navigate('DrawerOpen')

Alternatively, you might want to use the navigation.openDrawer() helper as shown in the example here, because navigating to DrawerOpen is implying you want to navigate to a screen with that name.

Upvotes: 2

hamidreza nikoonia
hamidreza nikoonia

Reputation: 2165

you must know this , when you create component witch class like this

class MyComponent extends ....

if you want use any props , you must write this KeyWord for example

this.props.navigation.nvigate()

but if you create component with arrow function like this

const Mycomponent = (props) => {}

you no need this KeyWord and for call props you must write like this

 props.navigation.navigate()

and in your case , if use component inside option of Navigation you no need this or props KeyWord , just write

 navigation.navigate()

Upvotes: 1

Related Questions