how to add left border color to active drawer menu?

user_13935674 0
Viewed 1042

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:
enter image description here

My Current UI:
enter image description here

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.

react-navigation-v5 react-redux react-native
2 Answers

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>
          ),
        }}
      />
user_14357220

I know I am too late, but may be helpful in future for someone

enter image description here

I achieved the design by doing like below,
here is my CustomDrawerComponent

I used props -> state object to identify the active route name

Then apply conditional styles to <DrawerItem style={{}}/>

import { createDrawerNavigator } from '@react-navigation/drawer';
import {DrawerItem,DrawerContentScrollView} from '@react-navigation/drawer';

const CustomDrawerContent = props => {
  const {state} = props;
  const {routes, index} = state;
  //here we get the active route name
  const focusedRoute = routes[index].name;
  return (
    <View style={{flex: 1}}>
      <ProfileHeader />
      <DrawerContentScrollView
        {...props}
        contentContainerStyle={{paddingTop: 0, flex: 1}}>
        <DrawerItem
          {...props}
          label="Screen1"
          style={
            focusedRoute === 'Screen1' ? styles.itemActive : styles.itemInactive
          }
          labelStyle={{}}
          icon={({}) => <Icon />}
          onPress={() => {
            props.navigation.navigate('Screen1');
          }}
        />
        <DrawerItem
          {...props}
          label="Screen1"
          style={
            focusedRoute === 'Screen2' ? styles.itemActive : styles.itemInactive
          }
          labelStyle={{}}
          icon={({}) => <Icon />}
          onPress={() => {
            props.navigation.navigate('Screen2');
          }}
        />
        <DrawerItem
          {...props}
          label="Logout"
          style={styles.itemInactive}
          labelStyle={{}}
          icon={({}) => <Icon />}
        />
      </DrawerContentScrollView>
    </View>
  );
};

Here is my Root Drawer.Navigator setup

<Drawer.Navigator
      drawerContent={props => <CustomDrawerContent {...props} />}>
// Drawer Screens
</Drawer.Navigator>
user_26461580
Related