Routing
Describes how routes are being organized in the project
Navigation across the project is being done using react-navigation. Therefore routing is also handled by react-navigation.
Navigation flows are hierarchical starting on './src/Router.js'
const AppNavigator = createNavigator(
AppSwitch,
SwitchRouter(
{
Splash,
Auth,
Signup,
SignIn,
AppNavigation
},
{
initialRouteName: 'Splash'
}
),
{}
)
In this example there are five possible routes at root level like this:
/Splash/, /Auth/, /Signup/, /Signin/, /AppNavigation/This example also uses createNavigator. Notice that AppSwitch is a custom component that handles some common states for the entire app and holds some logic on start. Please refer to AppSwitch docs for more information.
Each of this is including a component that may or may not contain further navigation inside
'Splash' for instance is a single component without any further navigation and 'AppNavigation' contains the entire logged in flow.
There are a few patterns being used to handle navigation levels explained bellow.
There are several navigation levels using createSwitchNavigator. This is the standard navigator for web and it behaves by simply show one screen at the time. When that's the case in order to navigate
props.navigation.navigate('NewScreen')
This navigation is being used in several screens. Is build on top of createSwitchNavigator and it has primitives which are similar to the stackNavigator included in react-navigation which is not included in the web version.
createStackNavigation exports a switchNavigator in which the children routes gets via
props.screenProps all the stack primitives such as push(), back(), etc.Example
cosnt ChildrenComponent = props => {
const handleGoToSendConfirmation = () => props.screenProps.push('SendConfirmation', { sendLink, amount, reason, to })
...
}
There are a few components that serve as support to this all of them exported in the './src/appNavigation/stackNavigation.js' file such as
This components take
screenProps as parameter and use stack methods to perform the actions.When inside a stack can be saved in order to be available on back. In order to do so there is a hook called useScreenState available.
Last modified 2yr ago