https://github.com/lavkushwaha/react-native-app-structure-and-authentication-flow
Authentication FLow Set Up Very Basic
https://github.com/lavkushwaha/react-native-app-structure-and-authentication-flow
appstucture authentication-flow login react-native react-native-app react-navigation signup-reactnative
Last synced: about 2 months ago
JSON representation
Authentication FLow Set Up Very Basic
- Host: GitHub
- URL: https://github.com/lavkushwaha/react-native-app-structure-and-authentication-flow
- Owner: Lavkushwaha
- Created: 2018-07-08T10:26:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-09T12:09:38.000Z (almost 8 years ago)
- Last Synced: 2025-01-05T10:07:46.255Z (over 1 year ago)
- Topics: appstucture, authentication-flow, login, react-native, react-native-app, react-navigation, signup-reactnative
- Language: JavaScript
- Size: 899 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native App Structure And Authentication FLow :+1:
React TabNavigation and StackNavigation of react-navigation is used here to make a solid Basic App Structure
In this Project We have
4 screens:-
> LoginScreen, SignUpScreen, WelcomeScreen,AppTabNavigatorScreen
# App.js
```
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import { createStackNavigator} from 'react-navigation';
import WelcomeScreen from './screens/WelcomeScreen';
import LoginScreen from './screens/LoginScreen';
import SignupScreen from './screens/SignupScreen';
import AppTabNavigator from './screens/AppTabNavigator';
export default class App extends Component{
render(){
return(
);
}
}
const AppStackNavigator = new createStackNavigator({
WelcomeScreen:{screen:WelcomeScreen,},
LoginScreen:{screen:LoginScreen},
SignupScreen:{screen:SignupScreen},
AppTabNavigator:{screen:AppTabNavigator},
});
```
# AppTabNavigator.js
```
import {createBottomTabNavigator } from 'react-navigation';
import Home from './tabs/Home';
import Profile from './tabs/Profile';
const TabNavigator = new createBottomTabNavigator({
Home:{
screen:Home
},
Profile:{
screen:Profile
}
});
export default class AppTabNavigator extends Component {
static navigationOptions={
header:null
}
render() {
return (
);
}
}
```
## Another important Topic is to transfer navigation from child route to parent route
### We pass the screen Props when rendering the TabNavigator like
```
.
.
export default class AppTabNavigator extends Component {
static navigationOptions={
header:null
}
render() {
return (
//here we passed it
);
}
}
```
### and catch inside screen to call those route as
## inside profile.js for logout button
```
.
.
export default class Profile extends Component {
render() {
return (
this.props.screenProps.navigation.navigate('WelcomeScreen')}/>
);
}
}
.
.
```