https://github.com/erabossid/react-navigation-for-mobile-app

https://github.com/erabossid/react-navigation-for-mobile-app

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/erabossid/react-navigation-for-mobile-app
• Owner: erabossid
• License: mit
• Created: 2021-06-15T06:03:05.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-06-15T08:11:40.000Z (over 3 years ago)
• Last Synced: 2024-11-15T01:44:24.572Z (2 months ago)
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-navigation-codes-for-mobile-app

## Install React-Navigation

```node

npm install @react-navigation/native

```

## Install dependencies (for expo app)

```node

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

```

## Install dependencies (with npm)

```node

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

```

## Install react-navigation/stack

```node

npm install @react-navigation/stack

```

## Use React-Navigation to your app

* Import 

```javascript

import 'react-native-gesture-handler';

//the above line will be on the top

//...

import { NavigationContainer } from '@react-navigation/native';

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

```

## Create and use Stack navigator

* Import your screen components like HomeScreen, LoginScreen, SignupScreen then use them  

```javascript

const Stack = createStackNavigator();

export default function App(){

return (

    

      

        

        

        

      

    

  );

}

```

## Move to another screen

* Press a button to go to LoginScreen from HomeScreen

```javascript

export default function HomeScreen({ navigation }) {

  return (

    

      Home Screen

       navigation.navigate('Login')} />

    

  );

}

```

## Go back to previous screen

```javascript

 navigation.goBack()} />

```

## Go back to the first screen

```javascript

 navigation.popToTop()} />

```