Style Drawer menu toggle button in react native

Question

I'm trying to add some background shade to the toggle button and also increase the size a little more, but I'm unable to find the right prop that targets the button.

Here's my code.

<Drawer.Navigator screenOptions={(navigation) => ({
        drawerStyle:{width:280},
        drawerItemStyle: {
           borderRadius: 0,
           width: '100%',
           marginVertical: 0,
           marginLeft: 0,
        },
        drawerLabelStyle: {
          fontFamily: 'sans-serif',
          fontWeight:'100'
       },
       drawerActiveTintColor: '#288df9',
       drawerInactiveTintColor: '#444'
      })}>

      ...

      </Drawer.Navigator>

Any help on how to style the toggle button will be rightly appreciated.

you can refer this it might be helpful--> https://aboutreact.com/custom-navigation-drawer-sidebar-with-image-and-icon-in-menu-options/ — Ankit Vora, Dec 27 '22 at 04:03

score 0 · Answer 1 · answered Dec 27 '22 at 16:01

If you check the implementation of this Drawer you can find that this button is an Image hardcoded inside: https://github.com/react-navigation/react-navigation/blob/b91c9b05ff96727f5fa6ef0bec51b5d7eac06600/packages/drawer/src/views/DrawerToggleButton.tsx#L37

export default function DrawerToggleButton({ tintColor, ...rest }: Props) {
  const navigation = useNavigation<DrawerNavigationProp<ParamListBase>>();

  return (
    <PlatformPressable
      {...rest}
      accessible
      accessibilityRole="button"
      android_ripple={{ borderless: true }}
      onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
      style={styles.touchable}
      hitSlop={Platform.select({
        ios: undefined,
        default: { top: 16, right: 16, bottom: 16, left: 16 },
      })}
    >
      <Image
        style={[styles.icon, tintColor ? { tintColor } : null]}
        source={require('./assets/toggle-drawer-icon.png')}
        fadeDuration={0}
      />
    </PlatformPressable>
  );
}

I think what you can do is replace the image in your node_modules and using patch-package save it as a patch in your local repository.

Another way is to implement your own Button and use openDrawer/closeDrawer methods to control the drawer.

Style Drawer menu toggle button in react native

1 Answers1