search

AlexLazcano / Pink4Thursday

0 stars 0 forks source link

Develop/prototype app structure and UI flow using multi-navigation scheme #5

Open jake-pauls opened 3 years ago

jake-pauls commented 3 years ago

Have two seperate navigation styles/stacks in-app using @react-navigation and react-native-paper libraries. One of these navigation stacks will be used for the 'Signed Out' layout and the other for the 'Signed In' layout.

The 'Signed Out' layout should have components and screens for the components/auth and screens/auth project directories. On a successful login attempt ('Signed In' layout), the stack should switch into the default bottom-nav UI flow.

jake-pauls commented 3 years ago

Proposed Solution/Flow

All the authentication context happens in app/Router.js using the AuthRouter component. Here, we'll perform the authentication for the user and display the proper navigation context should they be logged in or not and display the proper navigation stack in either case.

return user ? (
    <LoggedInNavigation />
  ) : (
    <LoggedOutNavigation />
)

Prototype Notes

Current prototype has the logged in navigation wired into the logged out stack simply for testing purposes until we can facilitate proper user authentication.

Reference/Inspiration (really great for using firebase auth too)

https://heartbeat.fritz.ai/how-to-manage-authentication-flows-in-react-native-with-react-navigation-v5-and-firebase-860f57ae20d3