how fixed this issue? navigation.navigate is not a function

Question

This error occurs while using navigation. I don't understand why you do that. The above error occurs when trying to navigate from HomeScreen to SignUp Detail through navigation. I've looked everywhere, but I'm asking because I can't find the answer. This error occurs while using navigation. I don't understand why you do that. The above error occurs when trying to navigate from HomeScreen to SignUp Detail through navigation. I've looked everywhere, but I'm asking because I can't find the answer.

this code App.js




import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import SignUp from "./components/signupdetail/signup";
import HomeScreen from "./components/homeScreen";

const Stack = createStackNavigator();

const App = () => {

  return (
    <>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="SignUp" component={SignUp} /> //my problem
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

export default App;

this code Homescreen


import Login from "./loginScreen/login";
import ButtonComponent from "./loginScreen/button";
import LostPassword from "./loginScreen/lostpassword";
import SocialLogin from "./loginScreen/sociallogin";
import SignUp from "./loginScreen/signup";
const HomeScreen = (props) => {
 

  return (
    <>
      <SafeAreaView style={styles.container}>
        <Text style={styles.header}>everywear</Text>
      </SafeAreaView>
      <View>
        <Login />
        <ButtonComponent />
        <LostPassword />
        <SocialLogin />
        <SignUp navigation={props} />
      </View>
    </>
  );
};

export default HomeScreen;

this code signup


import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const SignUp = (props) => {
 
  const { navigation } = props;
  return (
    <>
      <View style={styles.container}>
        <Text style={styles.text}>혹시 처음이신가요?</Text>
        <TouchableHighlight
          onPress={() => {
            navigation.navigate("SignUp");
          }}
          underlayColor="gray"
          style={styles.button}
        >
          <>
            <Text style={styles.signuptext}>회원가입</Text>
          </>
        </TouchableHighlight>
      </View>
    </>
  );
};

export default SignUp;

Guruparan Giritharan · Accepted Answer · 2021-04-22 07:23:22Z

3

There are different ways to fix this issue.

Easiest one would be to change like below

 <SignUp navigation={props.navigation} />

This will pass the navigation prop correctly and the rest of the code would work as expected.

the useNavigation hook

you can use the hook like below

const SignUp = (props) => {
 
  const navigation = useNavigation();

then no need to pass the prop from the parent.

answered Apr 22, 2021 at 7:23

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

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

1 Comment

Guruparan Giritharan Over a year ago

You are welcome :) , please mark the answer if it solves your issue :)

Collectives™ on Stack Overflow

how fixed this issue? navigation.navigate is not a function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related