New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drawer nesting umbrella issue #4154

Open
brentvatne opened this Issue May 7, 2018 · 15 comments

Comments

Projects
None yet
10 participants
@brentvatne
Member

brentvatne commented May 7, 2018

Users have reported issues when nesting drawers in various ways over time. This issue is meant to collapse all of those reports into one issue for convenience of maintainers.

  • Usability - nesting drawers within drawers and programmatically opening/closing a specific drawer: #1261
  • Bug - drawer with a stack with a tab: #3954
  • Usability/confusion: stack header appears over drawer - #1305
  • Bug - stack with drawer, drawer visible in back animation - #2539
  • Bug - tab with drawer on Android, drawer not visible - #2743
  • Bug - top tabs with drawer as screen has weird animation (snack) - #1849
@mcottingham

This comment has been minimized.

mcottingham commented Jul 17, 2018

@brentvatne are there any updates on this issue? Is there a projected ETA or a workaround?

@brentvatne

This comment has been minimized.

Member

brentvatne commented Jul 17, 2018

I'm not working on this at the moment, these are all things that I'd love to see contributors help out with

@creambyemute

This comment has been minimized.

creambyemute commented Jul 18, 2018

@brentvatne I'll try to have a look into some of these when I have some more time left over, but I first have to further bootstrap and push our own project.

Probably when I have some free days :-).

Cheers

@brentvatne

This comment has been minimized.

Member

brentvatne commented Aug 21, 2018

I think the solution here is to use the drawer component from react-native-gesture-handler so we have identical implementations on iOS and on Android. Using the native drawer on Android leads to lots of strange quirks

@diickens

This comment has been minimized.

diickens commented Aug 24, 2018

Still no fix for this? Same behavior when I use router-flux?

@callcter

This comment has been minimized.

callcter commented Sep 13, 2018

same issue while drawerNavigator nested in bottomTabNavigator

@kylemarshall18

This comment has been minimized.

kylemarshall18 commented Sep 19, 2018

I'm having the same issue with nesting drawers inside of tabs.

Not sure if anyone has found the issue yet but It looks like this behaviour is being caused by the ResourceSavingScene component from the react-navigation-tabs package. The top level View of that component implements removeClippedSubviews which is always true on android but only true on iOS if the view is not in focus. See line #27 of that file.

I changed it locally to always pass !isVisible to the removeClippedSubviews prop and it seemed to do the trick. The drawer was opening as expected on android, both when swiping and calling navigation.openDrawer().

There's already an open PR (#42) that adds an option to disable removeClippedSubviews, which would resolve this issue.

@nickfla1

This comment has been minimized.

nickfla1 commented Oct 2, 2018

Even after the switch to react-native-screens for ResourceSavingScene the only way I can "solve" the
issue is to force my application to not use Screens and hard-code removeClippedSubviews to false
.

@choo737

This comment has been minimized.

choo737 commented Oct 12, 2018

I am using react-navigation v2.18, I have a bottomTabNavigator with another DrawerNavigator in it, the dark overlay issue is still happening..

Same issue with this

Refer to screenshot -> here

tried setting removeClippedSubviews to false but still the same.

export const NavigatorRouteConfig = createBottomTabNavigator({
  Login: { screen: LoginScreen },
  Register: { screen: RegisterScreen },
  Main: { screen: AppDrawer },
},
  {
    navigationOptions: {
      tabBarVisible: false,
    },
    swipeEnabled: false,
    removeClippedSubviews: true,
  });
@dianbagus96

This comment has been minimized.

dianbagus96 commented Oct 12, 2018

any update on this isue? im still got dark overlay issue when my drawerNavigator inside bottomTabNavigator, please help

@choo737

This comment has been minimized.

choo737 commented Oct 14, 2018

@dianbagus96 same here. still couldn't fix it, only happen in a certain pattern. I've created a new issue for that. #5124

@BogdanRad

This comment has been minimized.

BogdanRad commented Oct 15, 2018

same here... :(

@brentvatne

This comment has been minimized.

Member

brentvatne commented Oct 15, 2018

most of this should be resolved in react-navigation v3 because we move to a custom implementation of drawer provided by react-native-gesture-handler.

@diickens

This comment has been minimized.

diickens commented Oct 16, 2018

So this is a future release? When do you think this gonna roll out? By the way.. thanks for your efforts! Great project!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment