Custom drawer overlay color

[sergeylaptev]

Would be great to implement drawer styles customizations:)

[przemkow]

I haven't used it yet but does contentComponent option from DrawerNavigatorConfig wouldn't be enough to add custom styles?

[sergeylaptev]

contentComponent is about internal drawer styles, not container

[grabbou]

Also see https://reactnavigation.org/docs/navigators/drawer#contentOptions-for-DrawerView.Items. If none of these is enough, please let me know your use case and proposed solution to it.

[dantman]

@grabbou All those options are for customizing the red area, have you considered that @sergeylaptev may be talking about the opacity levels/color of the blue area that no react-navigation option covers?

[sergeylaptev]

@dantman Exactly! I was asking about blue area on the screenshot above. Unfortunately, even drawer library which react-navigation uses doesn't support this customisation (e.g. iOS version) and has predefined '#000' colour with opacity.

[mattfysh]

would also like to see this configurable, colour is okay just hoping to change the opacity from 0.7 to 0.5 ;)

[gourav-singhal]

Any update on this? I also want to set the opacity to 1.

[luco]

+1 on this. Updates?

[RUIFERNANDE5]

+1

[barghi]

+1

[rformato]

+1

[Donhv]

+1. I want chang opacity

[brentvatne]

please submit a pr or open a feature request and upvote! :)

[JulianKingman]

Shouldn't this issue still be open?

I tracked this to the source, it's rather complicated...

react-navigation depends on react-navigation-drawer
react-navigation-drawer depends on react-native-drawer-layout-polyfill
react-navigation-polyfill exposes DrawerLayoutAndroid (RN core) for Android, and polyfills with react-native-drawer-layout for iOS

For iOS (react-native-drawer-layout), it's possible to add a prop for changing the color (defined here: https://github.com/react-native-community/react-native-drawer-layout/blob/master/src/DrawerLayout.js#L424)

For android, however... There's a native function (in the root Android component) called setScrimColor, that will change the color of the overlay, however, it doesn't appear to be exposed (relevant java file)

@brentvatne is there a way to call a function that's not explicitly exposed, using the RN api, using NativeModules or UIManager or something? It seems like it might be possible, since what's passed into android extends the native module, so the functions might still be available? Anyway, that would be cool, and allow a simple PR, otherwise a PR needs to be made to the RN core to allow this. Somebody posted an example of what it could look like on SO.

[brentvatne]

this is a feature request, feature requests belong on http://reactnavigation.canny.io/

this issue tracker is for bugs

[brentvatne]

sorry, the correct link is https://react-navigation.canny.io/

[JulianKingman]

https://react-navigation.canny.io/feature-requests/p/customize-overlay-opacity-for-drawer

[Runtime007]

drawerType: 'slide', overlayColor: '00FFFFF',
set overlayColor is useful for me. RN version 0.59.1

[karanpratapsingh]

@Runtime007 Thanks mate

[jordanpicaso]

@Runtime007 It's the real solution , thank you man

[sbearben]

@Runtime007 where is that config supposed to go in the context of createDrawerNavigator?

[rahulnainwal107]

const DrawerNavigation = createDrawerNavigator({
HomeTab: {
screen: HomeTab
},
},
{
initialRouteName: 'HomeTab',
headerMode: 'none',
drawerBackgroundColor: '#5A6B71',
overlayColor: '#6b52ae',
backBehavior: 'initialRoute',
contentComponent: (props) => <CustomDrawerNavigation {...props} />,
navigationOptions: {
gesturesEnabled: true
},
},
)
Use overlayColor for this inside createDrawerNavigator like this.

[thewaver]

overlayColor is not declared inside typescript/react-navigation.d.ts and even though I am able to use it, I now have unsilenceable linter errors on my project, which I cannot afford.

[tripexito]

Solution posted here by @AGIsmail works fine for me, it let me change overlay color and opacity ;-)
const DrawerNavigatorExample = createDrawerNavigator({ ... }, { ... overlayColor: "rgba(0, 0, 0, 0.7)", ... });

[raphaelpinel]

It is now in the official docs here: https://reactnavigation.org/docs/drawer-navigator/#options
Search for overlayColor. They give this example

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

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      openByDefault
      overlayColor="transparent"
    >
      {/* Screens */}
    </Drawer.Navigator>
  );
}