Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
react-navigation-tree.jsx
const App = createAppContainer(
createStack({
LoggedSwitch: createSwitch({
// When user is authenticated
LoggedIn: createStack({
// The logged in root is generally a tab or drawer navigator
LoggedInRoot: createTabsOrDrawer({
Home,
Feed,
Notifications,
Settings,
}),
// Main order process
Order: createOrderNavigator(),
// Some authenticated stack screens...
Orders,
Profile,
EditProfile,
}),
// When user is not authenticated
LoggedOut: createStack({
LoggedOutRoot,
Signup,
ForgotPassword,
}),
}),
// Stack screens that can be shared between LoggedIn and LoggedOut part
// those screens should not expect an authenticated user in context
TermsOfService,
GameRules,
AppInfos,
RGPD,
Contacts,
})
);
// The order workflow is stateful, and it's a generally a bunch of multiple stack screens
// you don't necessarily need a global state like Redux to handle this,
// just creating a custom navigator with context and you are fine
// see https://reactnavigation.org/docs/en/custom-navigators.html
// note you may want to preserve the basket if user exit the workflow,
// in which case order state should probably be higher or global
const createOrderNavigator = () => {
const OrderStackNavigator = createStack({
OrderProductList,
OrderBasket,
OrderPaymentDetails,
OrderStrongPaymentAuthentication,
OrderSummary,
});
// This is how you create a custom navigator
// Here it gives us the ability to wrap a navigator in a custom state provider
// It's your responsability to choose how to implement ProvideOrderState
const OrderNavigator = ({ navigation }) => (
<ProvideOrderState>
<OrderStackNavigator navigation={navigation} />
</ProvideOrderState>
);
OrderNavigator.router = OrderStackNavigator.router;
return OrderNavigator;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.