I m very new in react native and I m getting this error. Please help!

navigation.navigate is not a function. (In 'navigation.navigate("HomeScreen")', 'navigation.navigate' is undefined)

import { View, Text,Button,StyleSheet, TouchableOpacity } from 'react-native' import React, {useState} from 'react' import { NavigationContainer,CommonActions, useNavigation } from '@react-navigation/native';

const GetOtpButton = (navigation) => {
  return (
    <View >

      <TouchableOpacity style = {styles.button} onPress={() => navigation.navigate("HomeScreen") }  >
                    <Text style = {styles.text}>Log in</Text>
                    
                </TouchableOpacity>
  
      
    </View>
  )
}
const styles = StyleSheet.create({
    button: {
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: "white",
      width: "100%",
      height: 50,
      borderColor: "#E13C72",
      backgroundColor: "#E13C72",
      borderWidth: 0.1,
      borderRadius: 80,
      // marginBottom: 40,
      // marginVertical: 5,
      // marginTop: 10,
    },
    text: {
      justifyContent: 'center',
      textAlign: 'center',
      color: "white",
      fontWeight: 'bold'
    }
});

export default GetOtpButton


---------------------App.js------------------

import react from "react";
import { StatusBar } from "expo-status-bar";
import { SafeAreaView, StyleSheet, Text, View, Dimensions } from "react-native";
import SigninScreen from "./src/SigninScreen/SigninScreen";
import HomeScreen from "./src/HomeScreen/HomeScreen";
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


const Stack = createNativeStackNavigator();

export default function App() {

  return (
     <NavigationContainer>
     <Stack.Navigator initialRouteName="SigninScreen" options={{headerShown: false}}>

     <Stack.Screen name = 'SigninScreen' component={SigninScreen}  options={{headerShown: false}}/>
     <Stack.Screen name = 'HomeScreen' component={HomeScreen}  options={{headerShown: false}}/>
     
     </Stack.Navigator>
    </NavigationContainer>
   
   
  );
  
}

const styles = StyleSheet.create({
  root: {},
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#FFFFFF",
  },
});

CodePudding user response：

You are not showing how GetOtpButton is used but guessing that navigation is passed as prop to GetOtpButton you need to get to navigation like this

const GetOtpButton = ({navigation}) => {
  return (
    <View >

      <TouchableOpacity style = {styles.button} onPress={() => navigation.navigate("HomeScreen") }  >
                    <Text style = {styles.text}>Log in</Text>
                    
                </TouchableOpacity>
  
      
    </View>
  )
}

See that the difference is that navigation is surrounded by curly brackets, so later you get the parameter navigation inside the props

CodePudding user response：

The component GetOptButton is not defined as a screen in the navigator, thus the navigation object will not be passed to it automatically by the navigation framework. Thus, you have multiple choices here.

Define it as a screen inside the navigator

<Stack.Screen name = 'GetOpt' component={GetOptButton} />

The framework will now pass the navigation object to the GetOptButton component. You can access it as follows.

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

Now, since GetOptButton seems to be a component rather than a screen to which you will navigate, it might not make much sense to define it inside the navigator.

Pass the navigation object from a screen which is defined in the navigator that uses the GetOptButton component

// this works, since `Homescreen` is defined as a screen in your navigator
const HomeScreen = ({navigation}) => {

  return (
   <GetOptButton navigation={navigation} />
  )
}

Destructure the navigation object inside GetOptButton as shown above.

Use the useNavigation hook For some components it might not make sense to pass the navigation object from its parent, e.g. if the component is deeply nested. For this cases you can use the useNavigation hook.

const GetOptButton = () => {

   const navigation = useNavigation()
}