Try to search your question here, if you can't find : Ask Any Question Now ?

React Native error: undefined is not an object(evaluating '_this2.props.navigation.navigate')

HomeCategory: stackoverflowReact Native error: undefined is not an object(evaluating '_this2.props.navigation.navigate')
Avatarwillson asked 2 years ago

I’m new at React Native and currently I try to build an app using Stack Navigator.
When built, the HomePage.js screen work just fine, but when I tried to touch the to move to other screen, the error appeared. I tried to change to navigator.push() but the similar error appeared:undefined is not an object(evaluating ‘_this2.props.navigator.push’).

Can somebody take a look and point out my mistake? Thank you!

Here is the code:


import React, {Component} from "react";
import { Platform, StatusBar, StyleSheet, View,Image, Text, ListView } from "react-native";
import { AppLoading, Asset, Font } from "expo";
import { Ionicons } from "@expo/vector-icons";

import HomePage from "./app/pages/HomePage";
import AboutPage from "./app/pages/AboutPage";
import InfoPage from "./app/pages/InfoPage";
import MyFavoritePage from "./app/pages/MyFavoritePage";
import MyRequestPage from "./app/pages/MyRequestPage";
import RecentPage from "./app/pages/RecentPage";
import RequestPage from "./app/pages/RequestPage";

import { StackNavigator } from 'react-navigation';
export default class App extends Component {

  render() {
    return (

export const RootNavigator = StackNavigator({
  Home: {
    screen: HomePage,
  Info: {
    screen: InfoPage,
  About: {
    screen: AboutPage,
  MyFavorite: {
    screen: MyFavoritePage,
  MyRequest: {
    screen: MyRequestPage,
  Recent: {
    screen: RecentPage,
  Request: {
    screen: RequestPage,


import React from 'react'
import { StyleSheet, View, Text, TouchableOpacity, FlatList, Image } from 'react-native'
import { AboutPage, InfoPage, MyFavoritePage, MyRequestPage, RecentPage, RequestPage } from '../Route'

export default class HomePage extends React.Component {
    render () {
        return (
            <View style={styles.container} >
                {this.renderItem('Request', 0xF1B136FF, Imgsource.compose, RequestPage)}
                {this.renderItem('Recent', 0x13B0A5FF, Imgsource.recent, RecentPage)}
                {this.renderItem('MyRequest', 0xEF6363FF, Imgsource.myrequest, MyRequestPage)}
                {this.renderItem('MyFavorite', 0xEF6363FF, Imgsource.favorite, MyFavoritePage)}
                {this.renderItem('About', 0xEF6363FF, Imgsource.about, AboutPage)}
                {this.renderItem('Info', 0xEF6363FF,, InfoPage)}


    renderItem (text, bgColor, imgsrc, route) {
        return (
                style={[styles.itemContainer, {backgroundColor: bgColor}]}
                    /*onPress={() => this.props.navigator.push(route())}*/
                    onPress={() => this.props.navigaton.navigate(text)}
                {/*<Image source= {{uri: imgsrc}} />*/}
                <Text style={styles.itemTxt} >{text}</Text>
const styles = StyleSheet.create({
    container: {
        flex: 1
    itemContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    itemTxt: {
        color: 'white',
        fontSize: 28,
        marginTop: 10


const Imgsource = {
    compose : '../components/img/request.png',
    info : '../components/img/info.png',
    favorite : '../components/img/favorite.png',
    recent : '../components/img/recent.png',
    myrequest : '../components/img/myrequest.png',
    about : '../components/img/about.png'
1 Answers
Best Answer
Avatarnaveen answered 2 years ago
Your Answer

16 + 8 =

Popular Tags

WP Facebook Auto Publish Powered By :