/Javascript/React/React native navigation

React native navigation

React navigation react native

### ISNTALATION

npm install @react-navigation/native --save
yarn add @react-navigation/native

### core dependencies

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

### stack navigation
yarn add @react-navigation/stack

Source: reactnavigation.org

React native navigation

npm install @react-navigation/native @react-navigation/stack

Source: reactnative.dev

React native navigation

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Source: reactnative.dev

React native navigation

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Source: reactnavigation.org

React native navigation

npm install react-navigation

#Installing dependencies into an Expo managed project
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view


#Installing dependencies into a bare React Native project
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Source: reactnavigation.org

Navigation react native

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Source: reactnavigation.org

Similar codes

0 vote343 views1 answer
Background image not loading from a link react
Javascript React
0 vote378 views1 answer
Copy paste menu react native textinput disable
Javascript React
0 vote345 views1 answer
React-native-dropdown-picker for form react native
Javascript React
0 vote393 views1 answer
Create react app cloudfront invalidation
Javascript React
0 vote351 views1 answer
React native filter list
Javascript React
10 votes294 views1 answer
That is neither a react function component nor a custom react hook function. react component names must start with an uppercase letter. react hook names must start with the word "use"
Javascript React
0 vote323 views1 answer
Unexpected token react
Javascript React
9 votes350 views2 answers
Axios react js
Javascript React
-1 vote341 views1 answer
What is the use of consrtructors in reactjs
Javascript React
0 vote332 views1 answer
React form hook trigger is not a function
Javascript React