Error: Can't find variable Stack, React Navigation - react-native

Question

I am trying to develop a todolist app using react native, for which I coded the home screen. I had following some docs, but it gives me this error. Please help.
I have executed the commands in the following order.
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
npm install #react-navigation/native
npm install #react-navigation/stack
This is my code.
import React from 'react';
import { StyleSheet, Text, View ,Button} from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator} from '#react-navigation/stack';
class HomeScreen extends React.Component {
constructor(props){
super(props);
this.state={}
}
render(){
return(
<View>
<View style={{margin:50}}>
<Button title="New Task"></Button>
</View>
</View>
)
}
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}

Answer 1

You are not declaring Stack in your program include this line in your program:
const Stack = createStackNavigator();
Add this line in your App function like this:
export default function App() {
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Hope this helps!

Answer 2

Add this line to the top of your code
import { createStackNavigator } from "#react-navigation/stack";

Answer 3

In case someone looking for without using class...
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Try on expo, click here

Answer 4

write this instead if you are using react native:
import { createNativeStackNavigator } from '#react-navigation/native-stack';
&&
const Stack = createNativeStackNavigator();