0

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

enter image description here

And when the drawer is closed here is the result

enter image description here

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)

Amine
  • 2,241
  • 2
  • 19
  • 41

0 Answers0