React Native activeTintColor not getting applied on selected drawer item

Question

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.

Answer 1

Not sure whether you have tried contentOptions or not, but this is what i have found from react-navigation document

contentOptions for DrawerItems

There are various property you can use with contentOptions

contentOptions: {
  activeTintColor: '#e91e63',
  itemsContainerStyle: {
    marginVertical: 0,
  },
  iconContainerStyle: {
    opacity: 1
  }
}

From above snippet i guess for you activeTineColor might be useful.

Answer 2

I'm not sure about your intentions with the resetStack function.

If you use the following function instead, it's going to work:

navigateToScreen = (route) => {
  const navigateAction = NavigationActions.navigate({
    routeName: route.route.key
  });
  this.props.navigation.dispatch(navigateAction);
}

//...
<DrawerItems
  {...this.props}
  onItemPress={this.navigateToScreen}>
</DrawerItems>

It sets the new screen without stacking it up. It sets the activeTintColor though.

I omitted the params passing to make it simple.