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

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}
/>
)
}
}

Answer 1

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.

Answer 2

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

Answer 3

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