React native navigation between 2 screens - reactjs

Question

I am new in react native and I don't understand why it is not working
In my main file App.js , I need to have a button to go to another screen( AddList.js)
So, In app.js , I have
function App (navigation) {
const onPressHandler = () => {
navigation.navigate('AddList')
}
return (
<Pressable onPress={onPressHandler}>}
function addList(navigation) {
const onPressHandler = () => {
navigation.goBack();
}
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={App}
/>
<Stack.Screen
name="FavProducts"
component={FavProducts}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
There are in the same file App.js
Sorry for the question and thanks to your help
I have try with reactnative doc , but not working

Answer 1

If you are using #react-navigation/native then first you need to create container to handle the component state and then you have to create stack
in side the stack you need to define your screens like this.
import React from 'react';
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import AddList from './components/screens/AddList';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
component={AddList}
name="AddList"
options={{ headerShown: false }}
/>
// define your screens as well
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
and if you have to move from one screen to another then import in your js file where you have to create the click event
import { useNavigation } from '#react-navigation/native';
const navigation = useNavigation();
and on button press
navigation.navigate('AddList')