Navigation React Native with Formik - Error: Undefined is not an object (evaluating 'navigation.navigate')

Question

I'm new to React Native and I'm trying to create navigation from the Login page to the Welcome page. I keep getting Error: Undefined is not an object (evaluating 'navigation.navigate'). Can someone please explain this to me? And show me how to fix this?

Here is my App.js:

import React from 'react';
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from '@react-navigation/native';

//screens
import Login from './screens/Login';
import Signup from './screens/Signup';
import Welcome from './screens/Welcome';
import EditProfile from './screens/EditProfile';
import BookVaxAppt from './screens/BookVaxAppt';
import UpdateVaxStatus from './screens/UpdateVaxStatus';

const Stack = createNativeStackNavigator();

export default function (App) {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen
        name="Login"
        component={Login} 
        />
        <Stack.Screen
        name="Welcome"
        component={Welcome}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Here is my Login.js:

<Formik initialValues={{ email: '', password: '' }} onSubmit={(values) => { console.log(values); }}>
                    {({ handleChange, handleBlur, handleSubmit, navigation, values }) =>
                    (<StyledFormArea>
                        <MessageBox>...</MessageBox>
                        <StyledButton onPress={() => navigation.navigate("Welcome")}>
                            <ButtonText>Login</ButtonText>
                        </StyledButton>
                        <StyledButton google={true} onPress={handleSubmit}>
                            <Fontisto name="google" color={primary} size={25} />
                            <ButtonText google={true}>Sign in with Google</ButtonText>
                        </StyledButton>
                        <ExtraView>
                            <ExtraText>Don't have an account? </ExtraText>
                            <TextLink>
                                <TextLinkContent>Sign up now</TextLinkContent>
                            </TextLink>
                        </ExtraView>
                    </StyledFormArea>
                    )}
                </Formik>
            </InnerContainer>
        </StyledContainer>
    );   
};

Answer 1

How are you importing/using/creating/accessing this navigation ?

In general, there are some ways to navigate between screens (you can read more about them at the official docs ) but I suppose that you are not receiving the navigation prop at your component that you render your Formik component. Something like this could work:

const Login = ({ navigation, ...props }) => {
  return (
    <Formik>
      {/* ... */}
      <StyledButton onPress={() => navigation.navigate("Welcome")}>
        <ButtonText>Login</ButtonText>
      </StyledButton>
      {/* ... */}
    </Formik>
  );
}