React Native - navigation is undefined

Question

I have "ProfileScreen" declared in the App.js

function App({ navigation }) {
return (
    <>
    <StatusBar hidden />
    <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
        
        <Stack.Screen 
        ...            
        component={HomeScreen} 
        ...
        />

        <Stack.Screen 
        ...
        component={FeedScreen}
        ...
        />

        <Stack.Screen 
        ... 
        component={ProfileScreen} 
        ...
        />

    </Stack.Navigator>
    </NavigationContainer>
    </>
);
}

I access ProfileScreen inside FeedScreen.js

export const ProfileScreen = () => {
return(
  <Text style={{ textAlign: "left", color: "black", fontSize: 24, fontFamily: 'Montserrat_100Thin_Italic' }}>
    Hello
  </Text>
);
}

Inside FeedScreen.js I want to navigate to ProfileScreen:

const Item = ({ item }, { navigation }) => {
return (
  <>
    <TouchableOpacity onPress={() => navigation.navigate("ProfileScreen")}>
      <Text style={{ textAlign: "left", color: "white", fontSize: 24, fontFamily: 'Montserrat_100Thin_Italic' }}>
        <Image
          style={{ alignSelf: "center", borderRadius: 50 }}
          source={{ uri: item.profile_picture, width: 48, height: 48 }}
        />
        {item.username}
      </Text>
    </TouchableOpacity>
  </>
);
};

Unfortunately, everything returns Undefined is not an object (evaluating 'navigation.navigate')

Martinez · Accepted Answer · 2022-05-04 20:11:59Z

1

For an easy solution use the hook useNavigation inside your Item component as a following:

import { useNavigation } from '@react-navigation/native'; 

const Item = ({item}) => {
  const navigation = useNavigation();
  return (
    <TouchableOpacity onPress={() => navigation.navigate('ProfileScreen')}>
      <Text
        style={{
          textAlign: 'left',
          color: 'white',
          fontSize: 24,
          fontFamily: 'Montserrat_100Thin_Italic',
        }}>
        <Image
          style={{alignSelf: 'center', borderRadius: 50}}
          source={{uri: item.profile_picture, width: 48, height: 48}}
        />
        {item.username}
      </Text>
    </TouchableOpacity>
  );
};

answered May 4, 2022 at 20:11

Martinez

1,1301 gold badge7 silver badges14 bronze badges

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

Comments

Inder · Accepted Answer · 2022-05-04 20:36:12Z

1

Your syntax was wrong for using navigation prop inside FeedScreen It should be like this

const Item = ({ item , navigation }) => {

answered May 4, 2022 at 20:36

Inder

2,1542 gold badges10 silver badges22 bronze badges

Collectives™ on Stack Overflow

React Native - navigation is undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related