react navigation giving error undefined is not an object(evaluating 'this.props.navigation') - react-native

Question

I am new to react native I am using expo app to run my code I dont have index file as explained in other questions all the files i have are app.js ,login.js, router.js,home.js and My application flow should go like this Login> on button click > Home
but on button click I am getting error Undefined is not an object(evaluating 'this.props.navigation'),
please help me where i am going wrong.
thanks in advance.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './containers/Login/Login';
import {Navigate} from './containers/Navigation/Router';
import { AppRegistry } from 'react-native';
export default class App extends React.Component {
render() {
return (<Login navigation={this.props.navigation}/>);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
import React from 'react';
import { StyleSheet, Text,TextInput,Button,Image, View } from 'react-native';
import Navigate from '../Navigation/Router';
import RNChart from 'react-native-chart';
export default class Login extends React.Component{
static navigationOptions = {
title:'Login',
};
render() {
const navigate = this.props.navigation;
return (
<View style={styles.container}>
<RNChart style={styles.chart}
chartData={chartData}
verticalGridStep={5}
type="bar"
xLabels={xLabels}>
</RNChart>
<Image
source={require('../../NCS.png')}
/>
<TextInput
style={styles.textInput}
placeholder="Username"
/>
<TextInput
style={styles.textInput}
placeholder="Password"
secureTextEntry= {true}
/>
<Button
onPress={this._handlePress}
title="Login"
color="#0086b3"
/>
</View>
);
}
_handlePress(event) {
//navigate('Home')
this.props.navigation.navigate('Home', {name: 'Home'})
}
}
var chartData = [
{
name:'BarChart',
type:'bar',
color:'purple',
widthPercent:0.6,
data:[
30, 1, 1, 2, 3, 5, 21, 13, 21, 34, 55, 30
]
},
{
name:'LineChart',
color:'gray',
lineWidth:2,
showDataPoint:false,
data:[
10, 12, 14, 25, 31, 52, 41, 31, 52, 66, 22, 11
]
}
];
var xLabels = ['0','1','2','3','4','5','6','7','8','9','10','11'];
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
textInput: {
padding: 10,
width: 200,
},
chart: {
position: 'absolute', top: 16, left: 4, bottom: 4,right: 16
}
});
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Navigate} from '../Navigation/Router';
export default class Home extends React.Component {
static navigationOptions = {
title:'Home',
};
render() {
return (
<View style={styles.container}>
<Text> Work under progress</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from '../Login/Login';
import Home from '../Home/Home';
export default Navigate = StackNavigator({
Home: { screen: Home, },
});

Answer 1

The problem is that React Navigation is not connected to your App component as #Eden mentioned. The component you return in App needs to be your StackNavigator.
Here's a very good tutorial that show's this with a TabNavigator.
https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4