root-two / react-native-drawer

React Native Drawer
MIT License
2.54k stars 392 forks source link

Right side drawer causing main view clipping on close #368

Closed christopherwk210 closed 6 years ago

christopherwk210 commented 6 years ago

As I open and close a right sided drawer I have in my app, the main view clips further and further on the right side. To see what I mean, see this video.

Here's a screenshot:

In the screenshot, the drawer is closed, but you can see my application clipped on the right side.

My drawer has the following styles:

containerDrawer: {
    ...StyleSheet.absoluteFillObject,
    flexDirection: 'column',
    overflow: 'hidden'
  }

Here's my template usage:

<Drawer
        ref={(ref) => this._drawer = ref}
        type={'static'}
        content={<DrawerContent />}
        side={'right'}
        openDrawerOffset={200}
        tweenHandler={Drawer.tweenPresets.parallax}
        panCloseMask={1}
        captureGestures={false}
        tweenEasing={'easeOutCirc'}
        style={styles.containerDrawer}
      >

I removed absoluteFillObject just to see if absolute positioning had anything to do with it, but no help. It seems like the problem doesnt happen when side={'left'}. I've tried removing all of the attributes except side={'right'} and the error still occurs.

In addition, you can see in my card on the bottom of the screen, the gray-background webview has its background clipped as well, which makes things even more confusing.

christopherwk210 commented 6 years ago

This line from an existing pull request fixed the issue for me: https://github.com/root-two/react-native-drawer/pull/367/files#diff-09673ef13c9c1bde9065026b1aa1e1c8R30