CODEWITHSUNDEEP
reactjsnavigationnative
kylian911
kylian911

Reputation: 11

React native navigation between 2 screens

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

Upvotes: 1

Views: 1012

Answers (1)

Sumit_VE
Sumit_VE

Reputation: 487

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')

Upvotes: 2

Related Questions