I there a way to let the navigation drawer close (go off the screen) more than the screen width?
The reason I am asking this is because in my navigation drawer, I have an icon floating outside the navigation drawer like this
And when the drawer is closed here is the result
As you can see the floating part is still visible.
Here is my code
const Drawer = createDrawerNavigator(
{
Home: { screen: Home },
Anatomy: { screen: Anatomy },
Header: { screen: Header },
Footer: { screen: Footer },
NHBadge: { screen: NHBadge }
},
{
initialRouteName: "Home",
drawerLockMode: 'locked-closed',
drawerPosition: 'right',
drawerWidth: 300,
contentComponent: props => <SideBar {...props} />
}
);
And this is the SideBar code
render() {
return (
<Container>
<View style={styles.drawerCover} />
<Image square style={styles.drawerImage} source={drawerImage} />
<Content
bounces={false}
style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
>
<List
dataArray={datas}
renderRow={data =>
<ListItem
button
noBorder
onPress={() => this.props.navigation.navigate(data.route)}
>
<Left>
<Icon
active
name={data.icon}
style={{ color: "#777", fontSize: 26, width: 30 }}
/>
<Text style={styles.text}>
{data.name}
</Text>
</Left>
{data.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: data.bg
}}
>
<Text
style={styles.badgeText}
>{`${data.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
</Content>
</Container>
);
}
}
EDIT : Solution
This is how I solved the issue: Changed the render of the image depending on the state of the navigation drawer (close / open)