Dynamically change drawerPosition config of DrawerNavigator in react-navigation

user_3414905 0
Viewed 904

I have a DrawerNavigator config for my main routes

const App = DrawerNavigator(DrawerRoutes, {
  initialRouteName: 'Main',
  contentComponent: ({ navigation }) => <DrawerMenu navigation={navigation} routes={DrawerRoutes} />,
  mode: Platform.OS === 'ios' ? 'modal' : 'card',
  drawerWidth: Dimensions.get('window').width - (Platform.OS === 'android' ? 56 : 64),
  drawerPosition: 'left',
})

I want to change the drawerPosition property depending on the current language of the application. I have already tried to connect to redux with no success because it throws an error for invalid React element. How can I change the drawerNavigator properties on the fly?

react-navigation react-redux react-native
1 Answers

I ended up with a not so elegant solution.

I copied the DrawerNavigator of react-navigation and added it to my project.

The imports that weren't working properly were fixed to point to the original react-navigation project and I implemented the application logic on the drawerPosition property on the DrawerView component

 const Drawer = I18nReader()(
({ i18n, ...restProps }) =>
  <DrawerView
    {...restProps}
    useNativeAnimations={useNativeAnimations}
    drawerWidth={drawerWidth}
    contentComponent={contentComponent}
    contentOptions={contentOptions}
    drawerPosition={i18n.rtl ? 'right' : 'left'}
  />
)

const navigator = createNavigator(
  drawerRouter,
  routeConfigs,
  config,
  NavigatorTypes.DRAWER
)(Drawer)
user_34149050
Related