title: How to change backdrop color to transparent in react-navigation-drawer
body: <p><a href="https://i.stack.imgur.com/OCKBm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OCKBm.png" alt="enter image description here"></a></p>
  
  <p>Hi all, I am trying to add react-navigation-drawer in my app and I am facing this issue. whenever I open the drawer, backdrop or background got opaque black. I tried to add background colour but it didn't work for me.
  Here my code for sidebar:-</p>
  
  <pre><code>import { Text, TouchableOpacity, View,StyleSheet, ScrollView, Dimensions,BackHandler} from "react-native";
  import Icon from 'react-native-vector-icons/Entypo';
  const { width, height } = Dimensions.get("window");
  const window = Dimensions.get("window");
  let h = window.height / 812;
  let w = window.width / 375;
  let p = (h + w) / 2;
  
  export default class SideBar extends Component {
      constructor(props) {
          super(props)
          this.state = {
              refreshing: true,
              index: '',
          }
      }
  
      componentDidMount() {
          BackHandler.addEventListener("hardwareBackPress", () =&gt; this.hardwareBackPress);
      }
  
      componentWillUnmount() {
          BackHandler.removeEventListener("hardwareBackPress", () =&gt; this.hardwareBackPress);
      }
  
      hardwareBackPress() {
          this.props.navigation.closeDrawer();
      }
  
      navigate(location) {
          this.props.navigation.closeDrawer();
          this.props.navigation.navigate(location);
      }
  
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;View style={[styles.headerSection, { flexDirection: 'row', padding: 10, }]} &gt;
                      &lt;View style={{ alignItems: 'center', height: p * 90, width: p * 90, marginTop: p * 10, borderColor: '#fff', borderWidth: 4, borderRadius: p * 90, elevation: 2 }}&gt;
                          &lt;Icon name="home" size={20} color={tintColor} /&gt;
                      &lt;/View&gt;
                      &lt;View style={{ width: '70%', marginTop: p * 15, justifyContent: 'center' }}&gt;
                          &lt;Text style={{ width: '100%', textAlign: "center", fontSize: 16, marginTop: 10, fontWeight: 'bold' }}&gt;{this.state.uname}&lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
  
                  &lt;View&gt;
                      &lt;ScrollView style={{ height: '100%', marginTop: 20 }}&gt;
  
                          &lt;TouchableOpacity
                              style={styles.container}&gt;
                              &lt;View style={styles.textView}&gt;
                                  &lt;View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}&gt;
                                      &lt;Icon name="home" size={20} color={tintColor} /&gt;
                                  &lt;/View&gt;
  
                                  &lt;View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}&gt;
                                      &lt;Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}&gt;Edit Profile&lt;/Text&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                          &lt;/TouchableOpacity&gt;
  
                          &lt;TouchableOpacity
                              style={styles.container}&gt;
                              &lt;View style={styles.textView}&gt;
                                  &lt;View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}&gt;
                                      &lt;Icon name="home" size={20} color={tintColor} /&gt;
                                  &lt;/View&gt;
                                  &lt;View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}&gt;
                                      &lt;Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}&gt;My Account&lt;/Text&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                          &lt;/TouchableOpacity&gt;
  
                          &lt;TouchableOpacity
                              style={styles.container}
                              onPress={() =&gt; this.navigate("HelpText")}&gt;
                              &lt;View style={styles.textView}&gt;
                                  &lt;View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}&gt;
                                      &lt;Icon name="home" size={20} color={tintColor} /&gt;
                                  &lt;/View&gt;
  
                                  &lt;View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}&gt;
                                      &lt;Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}&gt; Help &lt;/Text&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                          &lt;/TouchableOpacity&gt;
  
                          &lt;TouchableOpacity
                              style={styles.container}
                              onPress={() =&gt; this.navigate("Notificationalert")}&gt;
                              &lt;View style={styles.textView}&gt;
                                  &lt;View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}&gt;
                                      &lt;Icon name="home" size={20} color={tintColor} /&gt;
                                  &lt;/View&gt;
  
                                  &lt;View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}&gt;
                                      &lt;Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}&gt; Notification &lt;/Text&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                          &lt;/TouchableOpacity&gt;
  
                          &lt;TouchableOpacity
                              style={styles.container}
                              onPress={() =&gt; this.navigate("Support")}&gt;
                              &lt;View style={styles.textView}&gt;
                                  &lt;View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}&gt;
                                      &lt;Icon name="home" size={20} color={tintColor} /&gt;
                                  &lt;/View&gt;
  
                                  &lt;View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}&gt;
                                      &lt;Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}&gt;Support&lt;/Text&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                          &lt;/TouchableOpacity&gt;
  
                          &lt;TouchableOpacity
                              style={styles.container}
                              onPress={() =&gt; this.navigate("AboutUs")}&gt;
                              &lt;View style={styles.textView}&gt;
                                  &lt;View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}&gt;
                                      &lt;Icon name="home" size={20} color={tintColor} /&gt;
                                  &lt;/View&gt;
  
                                  &lt;View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}&gt;
                                      &lt;Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}&gt;About&lt;/Text&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                          &lt;/TouchableOpacity&gt;
  
                          &lt;TouchableOpacity
                              style={styles.container}&gt;
                              &lt;View style={styles.textView}&gt;
                                  &lt;View style={{ padding: 8, justifyContent: 'center', alignItems: "center", width: '15%' }}&gt;
                                      &lt;Icon name="home" size={20} color={tintColor} /&gt;
                                  &lt;/View&gt;
  
                                  &lt;View style={{ borderBottomColor: '#e6e6e6', borderBottomWidth: 1, width: "90%", padding: 8, flex: 1, justifyContent: 'center' }}&gt;
                                      &lt;Text style={{ fontSize: 14, fontFamily: 'Lato-Light', color: '#000' }}&gt;Sign_Out&lt;/Text&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                          &lt;/TouchableOpacity&gt;
                      &lt;/ScrollView&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          backgroundColor: "#ffffffff",
          flex: 1,
      },
      textView: {
          flex: 1,
          flexDirection: 'row',
      },
      headerSection: {
          backgroundColor: '#f5f5f5', 
          height: height / 6,
          borderBottomColor: '#e6e6e6', 
          borderBottomWidth: 2,
      },
      textInput: {
          marginTop: 10,
          fontSize: p * 16,
          height: p * 40,
          paddingHorizontal: p * 10,
          borderWidth: 2,
          borderRadius: 3
      },
      scrollView: {
          zIndex: 0,
          width: width,
      }
  });
  </code></pre>
  
  <p>and here is my Navigator in which I added Drawernavigator.</p>
  
  <pre><code>import { createAppContainer, createSwitchNavigator } from 'react-navigation';
  import {createStackNavigator} from 'react-navigation-stack'
  import { createDrawerNavigator } from 'react-navigation-drawer';
  import React from 'react';
  import HomeScreen from './src/Dashboard'
  import OtherScreen from './src/Screen2'
  import AuthLoadingScreen from './src/LoadingScreen'
  import SignInScreen from './src/Login'
  import SignUpScreen from './src/Signup'
  import ForgetPassword from './src/Forget'
  import SideMenu from './utils/Sidebar'
  
  const AppStack = createDrawerNavigator(
      {
          Home: { screen: HomeScreen },
          Other: { screen: OtherScreen },
      },
      {
          headerMode: 'screen',
          navigationOptions: ({ navigation }) =&gt; ({
              gesturesEnabled: false,
              swipeEnabled: false,
              drawerLockMode: 'locked-closed',
              headerStyle: { backgroundColor: '#fff' }
          }),
          drawerPosition: 'right',
          contentComponent: (props) =&gt; &lt;SideMenu {...props} /&gt;
      });
  
  const AuthStack = createStackNavigator({ SignIn: SignInScreen, SignUp: SignUpScreen, Forget: ForgetPassword }, {
      headerMode: 'none',
      navigationOptions: {
          headerVisible: false,
      }
  });
  
  export default createAppContainer(
      createSwitchNavigator(
          {
              AuthLoading: AuthLoadingScreen,
              App: AppStack,
              Auth: AuthStack,
          },
          {
              initialRouteName: 'AuthLoading',
          }
      )
  );
  </code></pre>
  
  <p>Please check this code and help me if anyone knows the solution.
  I want to make the background transparent.</p>
  
  <p>Thanks in advance.</p>