Unable to read the properties of my react navigation object-CodePudding

I am getting the following error when I try navigate:

Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Heres my main component:

const Stack = createStackNavigator<StackParamList>();

type StackParamList = {
    Home: undefined;
    NewTrip: undefined;
  };

export default function UserStack() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="NewTrip" component={NewTripsScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

Here's where I'm unsuccessfully trying to call it:

const TripsProfileScreen: FunctionComponent<TripsSectionProfileProps> = (
  props, navigation
) => {
 
  return (
    <Container>
 <IconButton
            onPress={() =>  navigation.navigate('NewTrip')}
          </IconButton>
 </Container>
)

}

What am I doing wrong? Thanks.

CodePudding user response：

props is the object with route and navigation.

function Screen({ route, navigation }: Props) {
  // ...
}

const Screen: FunctionComponent<Props> = ({route, navigation}) => {
  // ...
}

CodePudding user response：

try to add {} on props, it'll look like:

const TripsProfileScreen: FunctionComponent<TripsSectionProfileProps> = (
  {props, navigation}
) => {
 
  return (
    <Container>
 <IconButton
            onPress={() =>  navigation.navigate('NewTrip')}
          </IconButton>
 </Container>
)
}