Drawer.Navigator is visible even when I close it

Question

I wanted to create a custom drawer view in react native. I used this styling:

  <Drawer.Navigator drawerStyle={{ margin: 18 }}>

But even when the drawer is closed, I can still still part of it (probably exactly 18 pixels from the right). I don't want to alter the width of the drawer, so is there any way that I can fix this issue without changing the width.

Answer 1

remove margin and create a like this.

const StackNavigator = () => (
    <Drawer.Navigator           
        drawerContent={(props) => <DrawerContent {...props} />}>
            <Drawer.Screen name ="StackScreens">
                {props => <StackScreens {...props} />}
            </Drawer.Screen>
    </Drawer.Navigator>
)

Here is the code for DrawerContent

import React from 'react'
import { View,Text,TouchableOpacity, StyleSheet,Image, Linking } from 'react-native';
import {  DrawerItem} from '@react-navigation/drawer';
import DRAWERHEADER from '../assets/drawerheader.svg'
import HOME from '../assets/home.svg'
import PRIVACY from '../assets/privacy.svg'
import STAR from '../assets/star.svg'
import SHARE from '../assets/share.svg'
import { COLORS, FONTS, width } from '../constants';

import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
const DrawerContent = (props) => {
    return(
        <View style={{...styles.drawerContent}}>
            <View style={styles.drawerContent}>
                <TouchableOpacity onPress={() => props.navigation.closeDrawer()} activeOpacity={1}  
                    style={{flexDirection:"row", paddingLeft:10, height:40, justifyContent:"flex-start", alignItems:"center", backgroundColor:COLORS.primaryColor}}>
                    <MaterialIcons name="arrow-back-ios" color={COLORS.lightblack} size={16} />
                </TouchableOpacity>
                <View style={styles.headerView}>               
                    <DRAWERHEADER width={200} height={200} />
                </View>
                <View style={styles.IconTextView}>
                    <HOME  width={25} height={25} />
                    <Text style={styles.text}>Home</Text>
                </View>
                <View style={styles.IconTextView}>
                    <STAR  width={25} height={25} />
                    <Text style={styles.text}>Rate Us</Text>
                </View>
                <View style={styles.IconTextView}>
                    <SHARE  width={25} height={25} />
                    <Text style={styles.text}>Share</Text>
                </View>
                <View style={styles.IconTextView}>
                    <PRIVACY  width={25} height={25} />
                    <Text style={styles.text}>Privacy</Text>
                </View>
            </View>        
        </View>
    )
}

export default DrawerContent;


const styles = StyleSheet.create({
    drawerContent: {
    flex: 1,
    backgroundColor:"#fff"
    },
    headerView:{
        width:"100%", 
        height:width/2,
        justifyContent:"center", 
        borderBottomColor:"#000", 
        borderBottomWidth:2, 
        alignItems:"center"
    },
    IconTextView:{
        flexDirection:"row", 
        paddingHorizontal:20, 
        marginTop:10, 
        width:"100%", 
        height:50, 
        alignItems:"center", 
    },
    text:{
        marginLeft:20,
        color:COLORS.lightblack,
        fontFamily:FONTS.medium
    }
});