While adding navigation PLugin its not Working showing error - react-native

Question

New to react-native and trying to make react-native with the sample app.
I created Two Screen. LOGIN AND FORM Screen.
I want Once I clicked to login button it will go to form screen. I add library of navigation for routing.
But it shows error.
App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/pages/pages/Login';
import Form from './src/pages/pages/Form';
const AppNavigator = StackNavigator({
Login: { screen: Login},
Form: { screen: Form},
});
export default class App extends Component<{}> {
render() {
return (
<View style ={styles.container}>
<AppNavigator/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
Login.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Button,
TouchableOpacity
} from 'react-native';
export default class Login extends Component {
state = {
username: '', password: ''
}
onChangeText = (key, val) => {
this.setState({ [key]: val })
}
signUp = async () => {
const { username, password } = this.state
try {
// here place your signup logic
console.log('user successfully signed up!: ', success)
} catch (err) {
console.log('error signing up: ', err)
}
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='Username'
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('username', val)}
/>
<TextInput
style={styles.input}
placeholder='Password'
secureTextEntry={true}
autoCapitalize="none"
placeholderTextColor='white'
onChangeText={val => this.onChangeText('password', val)}
/>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Form') } title = "Form"
>
<Text > LOGIN </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
width: 350,
height: 55,
backgroundColor: '#ff4000',
margin: 10,
padding: 8,
color: 'white',
borderRadius: 4,
fontSize: 18,
fontWeight: '500',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
alignItems: 'center',
backgroundColor: '#58d63b',
padding: 10,
width:320,
height:55
}
})
Form.js
import React, {Component} from 'react';
import {View,Text} from 'react';
export default class Login extends Component {
render() {
return (
<View>
<Text> This Is Form Page</Text>
</View>
);
}
}
index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
THIS IS THE ERROR I HAVE GETTING ALL THE TIME
I tried everything clear cache and re-install npm but no luck.
Anyone can help.It would be great.