Nativebase: Drawer content color keep dark

[EasonWang01]

import React from 'react';
import { Container, Drawer, Button, Icon, Content, Text } from 'native-base';

export default class App extends React.Component {
  static navigationOptions = {
    header: null,
  };
  closeDrawer = () => {
    this.drawer._root.close()
  };
  openDrawer = () => {
    this.drawer._root.open()
  };

  render() {
    return (
      <Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={<Content style={{ backgroundColor: '#FFFFFF' }}>
          <Text>Drawer</Text>
        </Content>}>
              <Button onPress={() => this.openDrawer()} transparent>
              <Icon name='menu' />
            </Button>
      </Drawer>
    )
  }
}

Expect result: Drawer content is light and white color.

[UKbed990]

exact same issue here! any answer please...

[andreslopezdreams]

I still have the same problem, try zIndex and it does not work either, the only thing I could change is the type to displace

Node: 8.12.0
Mac OS: Mojave
react-native: 0.57.1
native-base: ^2.8.0

[ilkka-yli]

Same issue here!

native-base: ^2.8.0,
react-native: 0.57.1

[MariaFF]

The same issue here :/
react-native: 0.57.0,
native-base: 2.8.0

[alextrevisan]

Same isse here.
react-native: 0.57.0,
native-base: "^2.8.0

[grean]

Same as well
react-native: 0.57.1,
native-base: "^2.8.1

[suishum]

Managed to fix this issue by digging into the default properties of the Drawer component, by default the Drawer component's overlay has an elevation property of 8.

The elevation prop only effects Android (which is why this problem is not present in iOS) - to change the default props you can do this:

import { Drawer } from 'native-base';
...
Drawer.defaultProps.styles.mainOverlay.elevation = 0;

or wait until the above PR is merged (:

[jimcullenaus]

@suishum when I try that workaround I get:

You attempted to set the key `elevation` with the value `0` on an object that is meant to be immutable and has been frozen.

throwOnImmutableMutation
`deepFreezeAndThrowOnMutationInDev.js:71:4

etc.

My editor also underlines defaultProps in red, saying "Property 'defaultProps' does not exist on type 'typeof Drawer'." (But then, it also says property _root doesn't exist on drawer, and yet my open and close methods work just fine, so that's easy enough to ignore.)

However, adding styles={{mainOverlay: 0}} to the Drawer's props worked just fine.

[hesham-abboud]

@suishum when I try that workaround I get:

You attempted to set the key elevation with the value 0 on an object that is meant to be immutable and has been frozen.

throwOnImmutableMutation
`deepFreezeAndThrowOnMutationInDev.js:71:4

etc.

My editor also underlines defaultProps in red, saying "Property 'defaultProps' does not exist on type 'typeof Drawer'." (But then, it also says property _root doesn't exist on drawer, and yet my open and close methods work just fine, so that's easy enough to ignore.)

However, adding styles={{mainOverlay: 0}} to the Drawer's props worked just fine.

@jimcullenaus The error u mentioned appeared to me second time the view was rendered.
adding below code fixed the problem

if (Drawer.defaultProps.styles.mainOverlay.elevation != 0)
Drawer.defaultProps.styles.mainOverlay.elevation = 0;