Show dynamic drawerWidth.

[HeroSony]

After I test it on others device it looks like the behind drawer appeared, so how can we hide it or dynamically calculate drawerWidth?

[gaetanozappi]

Hi @HeroSony ,

• First of all there is a typology of question structure to make these kind of requests, and I took time to realize it, with various questions that help me to better understand how to help you. I would like to ask you to respect the documentation I wrote with commitment to the issues.
• Second, please be more discursive to explain the problem.

If you publish the code it would be more helpful.

[HeroSony]

Hi @gaetanozappi , thank for reply and sorry for not including the code.

DrawerComponent.js

...
render() {
    return (
       <NavigationDrawerLayout
        percent={68.1}
        //statusBar="#008cff"
        statusBarTransparency={0.3}
        type={this.state.type}
        drawerPosition="left"
        selected="opt0"
        window="menu"
        color="#fff"
        backgroundColor="#fff" //303030
        // imageBackground={{ uri: "https://c.wallhere.com/photos/aa/44/glare_colorful_bright_circles-679384.jpg!d" }}
        topBackgroundColor="#000"
        first={'name'}
        second={'phone'}
        badgeFunction={e => {
          return e > 99 ? '99+' : e
        }}
        account={[
          {
            username: 'kheansenghort',
            name: 'Kheang Senghort',
            email: 'khengsenghort@gmail.com',
            image: 'https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Casual_Man_2-512.png',
            phone: '0189702323',
            badgeText: '100',
            badgeColor: '#fff',
            badgeBackground: '#303030',
            circle: ['transparent', 'transparent'],
          },
        ]}
        menu={[
            {
              type: 'menu',
              name: 'history',
              title: 'History',
              icon: 'history',
              colorText: '#575757',
              colorTextFocus: '#607D8B',
              colorIcon: '#575757',
              colorIconFocus: '#607D8B',
              background: 'transparent',
              backgroundFocus: '#e8e8e8',
            },
        ]}
        onPress={e => {
          const { route } = e
          let params = {}
          console.log('Menu:', e)

          if (route) {
            this.props.navigation.navigate(route, params)
          }
        }}
        />
       )
  }
...

DrawerNavigator.js

...
export default createDrawerNavigator(
  {
    HomeStack: HomeStackNavigator,
    SettingsStack: SettingsStackNavigator,
    PaymentStack: PaymentStackNavigator,

  },
  {
    contentComponent: DrawerComponent,
    overlayColor: 'rgba(0, 0, 0, 0.5)',
    drawerBackgroundColor: 'rgba(255,255,255,0)',
  }
)

[gaetanozappi]

@HeroSony :

• Does it happen on all tested devices?
• What happens put percent = {75}?
• Can you make a gif or video to see what happens and in what situation?
• Try removing this: overlayColor: 'rgba(0, 0, 0, 0.5)'

If you can give me more information, I will be able to better understand the problem.

[HeroSony]

Hello @gaetanozappi
Below images are tested on 2 devices: I set percent = {75} and, removed overlayColor: 'rgba(0, 0, 0, 0.5)'

• Galaxy Grand Prime (Drawer not yet open)

• Galaxy Grand Prime (Drawer opened)

• Samsung A50 (Drawer not yet open)

• Samsung A50 (Drawer opened)

[gaetanozappi]

Hi @HeroSony , the problem you have is only Samsung A50?