undefined is not an object (evaluating ‘props.navigation.navigate’) while implementing react native navigation


wanted to implement react navigation in my expo app but i was getting this error.

This is the error

here is my code on the first screen and where i use the navigation:

import React from "react";
import { View, Image, Text,TouchableOpacity } from "react-native";
import PropTypes from "prop-types";
import AppIntroSlider from "react-native-app-intro-slider";
import dynamicStyles from "./styles";
import { useColorScheme } from "react-native-appearance";
const WalkthroughScreen = (props) => {
  const appConfig = props.appConfig;
  const appStyles = props.appStyles;
  const colorScheme = useColorScheme();
  const styles = dynamicStyles(appStyles, colorScheme);
  const slides = appConfig.onboardingConfig.walkthroughScreens.map(
    (screenSpec, index) => {
      return {
        key: `${index}`,
        text: screenSpec.description,
        title: screenSpec.title,
        image: screenSpec.icon,
        touchableOpacity:screenSpec.touchableOpacity
      };
    }
  );

  const _renderItem = ({ item, dimensions }) => (
    <View style={[styles.container, dimensions]}>
      <Image
        style={styles.image}
        source={item.image}
        size={100}
        color="white"
      />
      <View>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.text}>{item.text}</Text>
      </View>
      <TouchableOpacity onPress={() =>{
        props.navigation.navigate("HomeScreen");
      }}><Text>{item.touchableOpacity}</Text></TouchableOpacity>
    </View>
  );

  return (
    <AppIntroSlider
      data={slides}
      slides={slides}
      renderItem={_renderItem}
      //Handler for the done On last slide
      showSkipButton={false}
      showDoneButton={false}
      showNextButton={false}
    />
  );
};

WalkthroughScreen.propTypes = {
  appStyles: PropTypes.object,
  appConfig: PropTypes.object,
};

export default WalkthroughScreen;

this is the navigation screen:

import { createAppContainer, createSwitchNavigator} from 'react-navigation';
// importing screens
import Home from './home';
import GetStarted from './GetStarted';

const SwitchNavigator = createSwitchNavigator({
    GetStartedScreen: GetStarted,
    HomeScreen: Home    
});
export default createAppContainer(SwitchNavigator);

and this is in app.js:

import React from 'react'
import Navigator from './stack'

export default function App() {
  return (
    <Navigator />
  )
}

can someone plz tell me what i did wrong i am a bit new to react native.

thanks in advance.

Source: JavaSript – Stack Overflow

November 28, 2021
Category : News
Tags: expo | javascript | react hooks | react native | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.