I have a issue when i try to write react navigation - reactjs

Question

I have begun the React Navigation. I have some issue about my project and i wish everybody can support me.
In the app.js, i code:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
StatusBar,
} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends Component {
static navigationOptions = {
header: null
}
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#1e90ff"
barStyle="light-content" />
<Text style={styles.welcome}>Login To My App</Text>
<TextInput
style={styles.input}
placeholder="Username" />
<TextInput
style={styles.input}
placeholder="Password"
secureTextEntry
/>
<View style={styles.btnContainer}>
<TouchableOpacity style={styles.userBtn}
onPress{() => this.props.navigation.navigate('Details')}
>
<Text style={styles.btnTxt}>Login</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.userBtn}
onPress{() => this.props.navigation.navigate('Details')}>
<Text style={styles.btnTxt}>Signup</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
class DetailsScreen extends Component {
static navigationOptions = {
title: 'My App',
headerRight: <View/>
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
const RootStack = createStackNavigator({
Home: HomeScreen,
Detail: DetailsScreen
},
{
intialRouteName: 'Home',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: "#1e90ff"
}
},
headerTintColor: "#fff",
headerTitleStyle: {
textAlign: "center",
flex: 1,
}
}
);
const AppContainer = createAppContainer(RootStack);
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<AppContainer />
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
backgroundColor: "lightskyblue",
},
welcome: {
fontSize: 30,
textAlign: "center",
margin: 10,
color: "lightgray",
},
input: {
width: "90%",
backgroundColor: "#fff",
padding: 15,
marginBottom: 10,
marginLeft: 20,
},
btnContainer: {
flexDirection: "row",
justifyContent: "space-between",
width: "90%",
marginLeft: 20,
},
userBtn: {
backgroundColor: "#FFD700",
padding: 15,
width: "45%"
},
btnTxt: {
fontSize: 18,
textAlign: "center",
}
})
Detail: I try to write the code based on the youtube https://www.youtube.com/watch?v=bUesHGYxSLg&list=PLQWFhX-gwJblNXe9Fj0WomT0aWKqoDQ-h&index=4&ab_channel=PradipDebnath and i cannot understand the mistake i met.
When i tried to run by npx react-native run-android in terminal, the warning appeared.
Result: Error failed to instal the app. Make sure you have the Android development environmet set up.
Error: Command fail: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081.
Question: How can i fix the mistake? Because when i star a new file, it did not haave the mistake. Thank for your attention.