CODEWITHSUNDEEP
react-native
John Doah
John Doah

Reputation: 1999

TypeError: undefined is not an object (evaluating '_this.props.navigation')

I'm trying to pass an object from one screen to another, I always get the error:

TypeError: undefined is not an object (evaluating '_this.props.navigation')

I tried few solutions I saw that didn't work, and I can't figure out why it won't work.

This is how I setup the navigation in App.js:

const App = () => {

  const Stack = createStackNavigator();

  return (
    <>
      <NavigationContainer >
        <Stack.Navigator
          screenOptions={{
            headerShown: false
          }}
        >
          <Stack.Screen
            name="Home"
            component={HomeScreen}
          />
          <Stack.Screen
            name="AddMeeting"
            component={AddMeetingScreen}
          />
          <Stack.Screen
            name="MeetingDetails"
            component={MeetingDetailsScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

I have a home screen, which contains one dummy object, and a function that gets called why a button on the screen is tapped.

This is HomeScreen.js:

const HomeScreen = ({ navigation }) => {

const meeting = new Meeting("Subject", "Init", "Participants", "Location", "Date", "00:00")

_showMeetingDetails = () => {
    this.props.navigaton.navigate('MeetingDetails', { Meeting: meeting });
}

return (
    <>
        <SafeAreaView style={styles.homeContainer}>
                <TouchableOpacity style={styles.cardButton} onPress={this._showMeetingDetails}>
                    <MeetingCard meetingModel={meeting} />
                </TouchableOpacity>
        </SafeAreaView>
    </>
)
}

Upvotes: 0

Views: 103

Answers (2)

Sourav Dey
Sourav Dey

Reputation: 1150

If you are trying to navigate from a class component you should use

this.props.navigaton.navigate('MeetingDetails', { Meeting: meeting });

But in your case you can directly call navigation.navigate like below

navigaton.navigate('MeetingDetails', { Meeting: meeting });

Upvotes: 0

Anup
Anup

Reputation: 629

Homescreen is a functional component and functions have their own this

you can directly use the navigaton which you have passed in the function parameter.

So your _showMeetingDetails function will be like this,

_showMeetingDetails = () => {
   navigaton.navigate('MeetingDetails', { Meeting: meeting });
}

Upvotes: 2

Related Questions