CODEWITHSUNDEEP
reactjsreact-nativereduxreact-navigation
Shivam
Shivam

Reputation: 3131

React Native - Identify the active screen. Drawer navigator

I am using stack navigator inside the drawer navigator. What I want to do is, I need to know the activeItem (the active screen), so as to display it as active.

StackNavigator

const stackNav = StackNavigator({
  homeComponent: { screen: HomeScreen },
  serviceScreen: { screen: ServiceScreen },
  serviceDetailScreen: { screen: ServiceDetailScreen },
  selectVehicleScreen: { screen: SelectVehileScreen },
  addEditVehicle: { screen: AddVehicle },
  dateTimeScreen: { screen: DateTimeScreen },
  reviewScreen: { screen: ReviewScreen },
  notesScreen: { screen: NotesScreen },
}, {
  headerMode: 'none'
});

DrawerNavigator

const DrawerStack = DrawerNavigator({
  appointment: {
    screen: stackNav,
  },
}, {
  headerMode: 'none',
  gesturesEnabled: false,
  contentComponent: DrawerContainer

});

export default DrawerStack;

Upvotes: 3

Views: 5662

Answers (1)

Ankush Rana
Ankush Rana

Reputation: 68

What you can do is

In your context there is only one screen that can be active and that is appointment screen. If you want to know that if appointment screen is focused then you should check the props inside the DrawerContainer Component. It will give you the activeItemKey i.e appointment.

And then you can simply check in DrawerComponent that if 

this.props.activeItemKey === 'appointment' ? { color: '#000' } : { color: '#fff' }]}

You can also pass the activeTintColor prop from DrawerNavigator as shown below You can find other DrawerNavigatorConfigs here

const DrawerStack = DrawerNavigator({
  appointment: {
    screen: stackNav,
  },
}, {
  headerMode: 'none',
  gesturesEnabled: false,
  contentComponent: DrawerContainer,
  contentOptions: {
    activeTintColor: '#e91e63',
    itemsContainerStyle: {
        marginVertical: 0,
    },
    iconContainerStyle: {
        opacity: 1
    }
  }
});

export default DrawerStack;

Upvotes: 4

Related Questions