I've recently dived into the world of React Native and embarked on a new project. The initial screen that greets users upon launching the app is the "welcome screen," complete with a prominent 'continue' button. Ideally, clicking this button should seamlessly transition to the login screen. However, an error keeps popping up:
TypeError: undefined is not an object (evaluating 'navigation.navigate')
Even after trying to tweak the code to utilize this.props.navigation.navigate('login'), the TypeError persists - claiming '_this.props' is undefined.
Below is the snippet from the code for the welcome screen:
import React, { FunctionComponent, useState } from "react"
import { observer } from "mobx-react-lite"
import { Dimensions, Image } from "react-native"
import { Screen, Button } from "components"
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { Block } from "components/block/block"
const { width: ScreenWidth } = Dimensions.get('screen');
import { NavigationProp, NavigationState } from "@react-navigation/native";
export interface AuthScreensWelcomeScreenProps {
navigation?: NavigationProp<Record<string, object>, string, NavigationState, {}, {}>
}
// Rest of the code for the welcome screen component
In addition, here's a relevant excerpt from the auth-navigator.tsx file:
import React, { FunctionComponent } from "react";
import { createNativeStackNavigator } from "react-native-screens/native-stack";
// Other imports
const { Navigator, Screen } = createNativeStackNavigator<{
register: undefined,
login: undefined,
forgotpassword: undefined,
welcome: undefined
}>();
// Rest of the authentication stack setup