CODEWITHSUNDEEP
react-nativereact-native-navigation
pavithiran crazzer
pavithiran crazzer

Reputation: 11

ReferenceError: navigation is not defined

i am newbie to react native, When i add a button for navigation, it show that navigation is not defined. I need some help.

import { Image,  Button,StyleSheet, Text, View, ScrollView, SafeAreaView, ImageBackground, } from 'react-native';
import { NavigationContainer, NavigationHelpersContext, StackNavigator, useNavigation} from '@react-navigation/native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import 'react-native-gesture-handler';
import { createStackNavigator } from '@react-navigation/stack';

import HelloWorldApp from "./scholarship.js"

const HomeScreen = () => 
{
   <Button title="sample" onPress={()=> navigation.navigate('Scholarship')}></Button>
}
const Scheme = createStackNavigator();

function myScheme({navigation})
{
    <Scheme.Navigator>
        <Scheme.Screen name="Scholarship" component={HelloWorldApp}/>
    </Scheme.Navigator>
}

export default HomeScreen;```

Upvotes: 1

Views: 1151

Answers (2)

Giovanni Esposito
Giovanni Esposito

Reputation: 11176

According to React Navigation documentation you should use useNavigation hook:

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

const HomeScreen = () => 
{
   const navigation = useNavigation();
   return (
      <Button title="sample" onPress={()=> navigation.navigate('Scholarship')}></Button>
   );
}

Upvotes: 0

Nitin Sidhu
Nitin Sidhu

Reputation: 161

Use your Home component Like:-

const HomeScreen = ({navigation}) => {
  ........................
  .........
  }

this sholud solve your problem. the navigation lies in the props of the component so to use is like navigation.navigate('') you have to destructure it from props. like i did above .

Upvotes: 1

Related Questions