search

root-two / react-native-drawer

React Native Drawer
MIT License
2.54k stars 390 forks source link

How to change colour of overlay background? #231

Open pcfutures opened 8 years ago

pcfutures commented 8 years ago

I'm using this with type="overlay" and the following code:

style={{backgroundColor: 'transparent'}}
styles={{
    drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3, elevation: 5},
    main: {paddingLeft: 3, backgroundColor: 'transparent'},
    mainOverlay: {backgroundColor: 'transparent'},
    drawerOverlay: {backgroundColor: 'transparent'}
}}

but I can't get the overlay colour to change. It's stuck as a transparent blue colour. This may be something to do with something else, as the colour it's set to seems to match the theme colour.

Any help would be appreciated! I've attached a screenshot of what I mean.

app screenshot

pcfutures commented 8 years ago

I've worked out that this works by changing the opacity of the content underneath the menu, rather than putting an overlay over the content.

Is this intentional?

f0rr0 commented 7 years ago

This is needed since changing opacity can't achieve a translucent black overlay background that is common in this UI pattern

f0rr0 commented 7 years ago

Turns out I was wrong. It is possible https://github.com/root-two/react-native-drawer/issues/162

unaivv commented 7 years ago

In Drawer props put this: tweenHandler={(ratio) => { return { mainOverlay: { opacity: ratio/1.5, backgroundColor: 'black' } } }} In BackgroundColor put the color you want.