Component Exception in React Native application - react-native

Question

LoginScreen.js
import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableOpacity, TextInput } from 'react-native'
import { color } from 'react-native-reanimated'
import Button from 'react-native-elements'
import ValidationComponent from "react-native-form-validator"
import axios from 'axios'
import AsyncStorage from '#react-native-community/async-storage'
export default class LoginScreen extends ValidationComponent {
render() {
return (
<View style = {{
width:'100%',
height:'100%',
justifyContent: 'center',
alignSelf: 'center',
alignContent: 'center',
alignItems: 'center' }}>
<Text style={styles.TextLogin}>DEW WATER</Text>
<TextInput placeholder={'Enter the user Name'}
onChangeText={(value) => this.setState({username : value})}
style={{ height:42, width:'80%',
borderBottomWidth:1 }}/>
<TextInput placeholder={'Enter the user password'}
onChangeText={(value) => this.setState({password : value})}
style={{ height:42, width:'80%',
borderBottomWidth:1, marginTop: '5%'}}/>
<View style={{
marginTop:'10%',
width:'80%'}}>
<Button titleStyle={{fontSize: 22,}} buttonStyle={{borderRadius:50,width:100,backgroundColor:'#307cee',marginBottom:5 }}
onPress={this._onPressButton} color='white' title='LoginScreen'></Button>
<View style={styles.Signup}>
<Text style={[styles.textSignup, {color: 'gray'}]}>Don't have an account?</Text>
<TouchableOpacity
onPress = {() => {this.props.navigation.replace("RegisterScreen")}}>
<Text style={[styles.textSignup, {color:'#3465d9', marginLeft: 4}]}>Signup</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
}
const styles =StyleSheet.create({
TextLogin: {
fontSize: 35,
marginBottom: 60,
opacity: 0.9,
color:'#5f9ea0'
},
Signup: {
marginTop: 25,
flexDirection: 'row',
justifyContent: 'center'
},
textSignup: {
textAlign: 'center'
}
})
App.js
import React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createStackNavigator } from '#react-navigation/stack'
import LoginScreen from './screens/LoginScreen'
import RegisterScreen from './screens/RegisterScreen'
import Template from './screens/Page/Template'
const Stack = createStackNavigator();
function App() {
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name = 'Login' component = {LoginScreen}/>
<Stack.Screen name = 'Register' component = {RegisterScreen}/>
<Stack.Screen name = 'Template' component = {Template}/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App;