Monday, 18 February 2019

React Native activeTintColor not getting applied on selected drawer item

React Native activeTintColor not getting applied on selected drawer item. My react native navigation routes looks like,

-> DrawerNavigator
   -> StackNavigator
      -> HomeScreen
      -> FirstScreen
      -> SecondScreen
      -> ThirdScreen

routes.js

const RootStack = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    ChapterGroup: { screen: ChapterGroupScreen },
    Chapter: { screen: ChapterScreen },
  }

const DrawerStack = createDrawerNavigator(
  {
    Home: {
      screen: RootStack,
      params: { id: 1 }
    },
    Kural: { screen: ChapterGroupScreen, params: { id: 2 } },
    Detail: { screen: ChapterGroupScreen, params: { id: 3 } }
  }, { contentComponent: DrawerComponent}
}
export default DrawerStack;

I managed to display the First, Second, thirdScreens on the sidebar by creating a new DrawerComponent which will navigate to the appropriate stack screen on drawer item click.

DrawerComponent.js

resetStack = route => {
 let pressedDrwaerItem = route.route.key;
 let id = route.route.params.id;
 this.props.navigation.dispatch(
   StackActions.reset({
    index: 1,
    actions: [
      NavigationActions.navigate({
        routeName: "Home"
      }),
      NavigationActions.navigate({
        routeName: "ChapterGroup",
        params: { title: pressedDrwaerItem, no: id }
      })
    ]
  })
);
}

render() {
      return (<ScrollView>
              <DrawerItems
              {...this.props}
              onItemPress={this.resetStack}
            </DrawerItems</ScrollView>)
    }

It properly gets navigated to the ChapterGroup Screen on Home stack but the drawer activeitem points to the Home not the second or third custom name. I think it may be because all the other screen exists inside the Rootstack. Is there anyway to manually set the second drawer item as active?

or any successful implementation of DrawerNavigator inside StackNavigator ? ie. I want to use two screens from stack navigator as drawer items. And if we navigated through to that particular screen from home screen, the corresponding drawer item should be selected.



from React Native activeTintColor not getting applied on selected drawer item

No comments:

Post a Comment