how to add left border color to active drawer menu?

Question

i am working on a react native 0.62 in which i have implemented drawer navigator. As per the documentation, i have properly added activeBackgroundColor, activeTintColor etc but as per the company's requirement, when the menu is active i wanted to add borderLeftColor also with activeBackgroundColor. i have tried using style property but it didn't work for me.

Mock Up:

My Current UI:

MainNavigator.js

<Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}}  indicatorStyle={{
    borderBottomWidth: 2,
    borderBottomColor: 'red',
}}
 >
    <Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
      drawerIcon: ({ focused, size }) => (
        <Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}}  resizeMode="contain"/>
      ),
    }}
    
    />
    <Drawer.Screen name="My Profile" component={MyProfileStackScreen} options={{
      drawerIcon: ({ focused, size }) => (
        <Image source={require('../assets/images/profile.png')} style={{ height: 16, width: 16 }}  resizeMode="contain"/>
      ),
    }} />
</Drawer.Navigator >

DrawerContent.js

<DrawerContentScrollView {...props}  >
                          <DrawerItemList {...props}  
  />
    <DrawerItem     
    labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} activeBackgroundColor= "#F1F1F1" activeTintColor="#000000" inactiveTintColor= "#818181"                                        
        label="Logout"
        icon={({ focused, color, size })=>{
            return(
            <Image source={require('../assets/images/logout.png')} style={{ height: 14.36, width: 14.36 }} resizeMode="contain"/>)
         }}   
        onPress={() => {resetData(); props.dispatch({type:'AUTH_FAILURE', payload: ''}); props.dispatch(onClear())}    }                           
    />

</DrawerContentScrollView>

Thank you in advance.

Answer 1

As of now the drawer navigation 5 doesnt support an active style. But you can wrap the icon in a View and add a border to it which would give give you something similar. Not the perfect solution but will get you close to the expected output you have provided.

<Drawer.Screen
        name="My Profile"
        component={MyProfileStackScreen}
        options={{
          drawerIcon: ({ focused, size }) => (
            <View
              style={
                focused
                  ? {
                      borderLeftColor: 'red',
                      borderLeftWidth: 2,
                      paddingLeft: 5,
                    }
                  : null
              }>
              <Image
                source={require('../assets/images/profile.png')}
                style={{ height: 17.78, width: 16 }}
                resizeMode="contain"
              />
            </View>
          ),
        }}
      />