undefined is not an object (evaluating '_this2.props.navigation.navigate')

Question

When the header is click, I want it navigate to next page. However, I do not know how to access navigation props outside the class. Any suggestion on how to do this?

import React,{Component} from 'react'
import { View, Text, TouchableOpacity, FlatList} from 'react-native'

class header extends Component {
  render(){
    return(
        <TouchableOpacity
          onPress={() => **this.props.navigation.navigate('PageTwo')**}
        >
          <Text>{'Go to next Page Two'}</Text>
        </TouchableOpacity>
    )
  }
}

export default class PageOne extends Component {
  static navigationOptions = {
    title: 'Page One',
  }
  constructor(props) {
    super(props);
    this.state = {
      data: // ...
    };
  }

  _renderItem = ({item}) => (
    // ...
  );

  render(){
    return(
        <FlatList
          ListHeaderComponent={header}
          data={this.state.data}
          renderItem={this._renderItem}
        />
    )
  }
}

Ashik Abbas · Accepted Answer · 2017-08-01 13:17:03Z

For React Navigation First make sure you installed react-navigation lib in your project. If not then run "npm install --save react-navigation" in cmd. Then create an App.js file to hold all router names like

App.js :

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native';
import {StackNavigator} from 'react-navigation';

import Splash from './src/components/Splash/Splash'
import Login from './src/components/Splash/Login'

const Navigation = StackNavigator({
  Splash : {
    screen : Splash
  },
  Login : {
    screen : Login
  },
})
export default Navigation;

In my case src is dirtecory for store all js file.

Now set AppRegistry.registerComponent in index.android.js.

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Splash from './src/components/Splash/Splash'
import Navigation from './App'
export class FirstReactDemo extends Component {
  render() {
    return (
      <Splash/>
    );
  }
}
AppRegistry.registerComponent('FirstReactDemo', () => Navigation);

Now, set onclick listener in first screen.

Splash.js

import React, { Component } from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet,
} from 'react-native';
import {StackNavigator} from 'react-navigation';

export default class SplashScreen extends Component {



static navigationOptions = {
      title: 'Splash',
    };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text
          onPress={() =>navigate('Login')}
          style={styles.text}>My Splash screen</Text>
      </View>
    );
  }
}

Create Login.js file for next screen.

Juwan Wheatley · Accepted Answer · 2017-05-17 09:33:00Z

1

React Navigation I assume?

use the withNavigation HOC (https://github.com/react-community/react-navigation/blob/aead8ff9fbd2aceb2d06c8049c8ad0d55d77b5ab/docs/api/withNavigation.md)

answered May 17, 2017 at 9:33

Juwan Wheatley

5235 silver badges9 bronze badges

Comments

Kevin Kiwango · Accepted Answer · 2018-04-09 10:19:00Z

0

pass navigation = {navigation} yourself while using your child component.

answered Apr 9, 2018 at 10:19

Kevin Kiwango

991 silver badge4 bronze badges

1 Comment

errorous Over a year ago

Sorry for bumping, but how do I do it? Please check out stackoverflow.com/questions/53640941/…

Collectives™ on Stack Overflow

undefined is not an object (evaluating '_this2.props.navigation.navigate')

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related