CODEWITHSUNDEEP
reactjs
mick1996
mick1996

Reputation: 606

Navigation from menu item

I'm trying to get a menu item to navigate to another page but for some reason it wont let me do it. I'm a little confused as to how you go about it and any help is welcome!

Import here:

import { NavigationScreenProp } from "react-navigation";

Here is more code:

interface NotificationDropdownProps {
    navigation: NavigationScreenProp<any, any>;
}

Here is where function is called:

function renderNotification(notification: INotification) {
  return (
    <MenuOption
      onSelect={() => {
        if (notification.type == INotificationType.SYSTEM) {
          this.testFunction();
        }
      }}
    >
      <View style={[styles.notificationContainer]}>
        <View style={styles.iconArea}>
          <View style={[styles.iconCircle]}>
            <Icon
              name={this.getIconType(notification.type)}
              color={this.notificationColor(notification.type)}
              size={26}
            />
          </View>
        </View>

        <View>
          <Text>{notification.text}</Text>
          <Text>
            {this.getDate(new Date(notification.dateCreated))}
          </Text>
        </View>
      </View>
    </MenuOption>
  );
}

Test Function:

testFunction(){
           this.props.navigation.navigate('NextPage')
};

Error:

undefined is not an object(evaluating'_this2.props.naviagtion.navigate)

Where the function is called:

<View>
  <Text>
    Notifications
  </Text>

  {this.props.notifications.length > 0 ? (
    <FlatList
      contentContainerStyle={{ borderRadius: 10 }}
      data={this.props.notifications.slice(0, 5)}
      renderItem={({ item }) => this.renderNotification(item)}
      keyExtractor={this.keyExtractor}
    />
  ) : (
    <Text>No Notifications!</Text>
  )}
</View>;

Upvotes: 0

Views: 219

Answers (1)

HichamELBSI
HichamELBSI

Reputation: 1719

try with an arrow function to avoid using the context of the function.

testFunction = () => {
  this.props.navigation.navigate('NextPage')
};

Upvotes: 1

Related Questions