ndonfris/React-Native-authentication-example

A working example for refrencing React Native nested screens

Includes:

• animated log-in screen
• native implemetaion of the react-native-paper
• log-in log-out functionality

---

Docs

Contexts | Reducers

• AuthContext - just useful to simulate the login / logout process

export const AuthContext = createContext({
    state: initialAuthState as authState,
    dispatch: ({type, payload}: authAction) => {},
});

• authState properties: isLoggedIn and isLoading

export type authState = {
    isLoading: boolean,
    isLoggedIn: boolean,
}

• authAction properties: passed to the reducer

// type = field to update
// payload = new value
export type authAction = 
      {type: 'setIsLoading', payload: boolean}
    | {type: 'setIsLoggedIn', payload: boolean};

Screens | Stack Navigators

Location	Description
Individual Screen's	Where the individual screens are located
Wrapped Screen's	Where the stacks of screen's are located which wrap the individual screens
Splash Screen	The loading screen
Tab Navigator Stack	The Home Screen which is Tab Stack Navigator of the wrapped screens

Dependencies

• icons

yarn add @expo/vector-icons react-native-vector-icons

• relative links

yarn add -D metro-react-native-babel-preset

• navigation

yarn add -D @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs  @react-navigation/material-bottom-tabs  @react-navigation/bottom-tabs @react-native-community/masked-view react-native-screens react-native-gesture-handler

• animated splash screen

 yarn add lottie-react-native

• animated bottom bar (not yet externally needed)

yarn add -D ...