- Notifications
You must be signed in to change notification settings - Fork0
The HOC that achieve applying navigationOptions based on the store selector.
License
NotificationsYou must be signed in to change notification settings
PeterBLITZ/conditional-navigation-options
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
npm i conditional-navigation-options
or
yarn add conditional-navigation-options
https://snack.expo.io/@peterblitz/conditional-navigation-options
import React, { useCallback } from 'react';import { Text, View, Button } from 'react-native';import { createStore } from 'redux';import { Provider, useDispatch } from 'react-redux';import { createStackNavigator, createAppContainer } from 'react-navigation';import withCondition from 'conditional-navigation-options';function Home({ navigation }) { const dispatch = useDispatch(); const navigateToMain = useCallback(() => navigation.navigate('Main')); const setAccess = access => useCallback(() => dispatch({ type: 'SET_ACCESS', payload: access }), [ dispatch, ]); return ( <View style={{ flex: 1, padding: 50 }}> <Button onPress={navigateToMain} title="Navigate to Main" /> <View style={{ height: 50 }} /> <Button onPress={setAccess('grant')} title="Grant access" color="green" /> <View style={{ height: 20 }} /> <Button onPress={setAccess('denied')} title="Deny access" color="red" /> </View> );}Home.navigationOptions = { title: 'Home',};function Granted() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Access granted</Text> </View> );}Granted.navigationOptions = { title: 'Access granted',};function Denied() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Access denied</Text> </View> );}Denied.navigationOptions = { title: 'Access denied',};const reducer = (state = 'denied', action) => { switch (action.type) { case 'SET_ACCESS': return action.payload; default: return state; }};const store = createStore(reducer);const AppNavigator = createAppContainer( createStackNavigator({ Home, Main: withCondition(Granted, Denied, state => state === 'grant'), }));export default function App() { return ( <Provider store={store}> <View style={{ flex: 1, backgroundColor: 'white' }}> <AppNavigator /> </View> </Provider> );}About
The HOC that achieve applying navigationOptions based on the store selector.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.