DrawerLayout broken on RN 0.70

[lightrow]

Description

Updated RN from 0.68 to 0.70 - DrawerLayout reappears right after closing and stays on the screen until you try to pull it out again

Steps to reproduce

1. Open DrawerLayout
2. Close DrawerLayout
3. Drawer pops back after closing and doesn't go away

Snack or a link to a repository

--

Gesture Handler version

2.6.0

React Native version

0.70.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[renchap]

I can confirm this on my app, it happens with both iOS and Android after upgrading from RN 0.69.4 to RN 0.70.0

[siderakis]

https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/new_api/betterHorizontalDrawer/BetterHorizonatalDrawer.tsx is working for RN 70 although the touch interaction is slightly different (at-least for draw type "front"). The border edge jumps to where the finger is which can be quite abrupt when it in the middle of the draw.

[renchap]

As mentioned in facebook/react-native#34665, using <DrawerLayout useNativeAnimations={false} /> fixes the issue.

This is a workaround until the real Animated bug is fixed, I tested it both on Android and iOS.

[j-piasecki]

Fixed in facebook/react-native#34927.

[atheck]

I still have that issue with react-native 0.70.4 and react-native-gesture-handler 2.8.0 using the old architecture.

Setting useNativeAnimations to false fixes the issue, but the animations are stuttering. Am I missing something?

[Nova41]

Still getting the bug in 0.70.4.

[Ahsan-J]

Using RN 0.70.6. I am still getting the issue. Any workaround to solve it?

I don't want to set useNativeAnimations to false.

[mikehardy]

Desire aside, the only workaround appears to be as described: disable native animations
Alternatively, the fix commit link shows it is on the react-native 0.71 stable branch, which is on rc3 at the moment), so if you desire native animations strongly enough, update to react-native 0.71.0-rc.3 to get the solution, or wait until 0.71.0 is released as stable then upgrade

[kelset]

@mikehardy that commit has been cherry picked in 0.70.3: https://github.com/facebook/react-native/releases/tag/v0.70.3

[mikehardy]

Oh! That changes things if I misread that, sorry everyone. So this should be fixed but is not? 🤔

[kelset]

it should, yeah

[j-piasecki]

It seems like the problem still persists when the animation gets interrupted by another one. I've added a comment with an explanation and repro in the issue in the React Native repo.

[hotaryuzaki]

I can confirm this issue still exists in react-native-gesture-handler 2.8.0
if i open the drawer and quickly close it, the drawer view will reappear. and then I cannot close it again.
it looks like that open animation process still running and change the state.
useNativeAnimations set to false solve the issue.

so the problem is from RN core?

[j-piasecki]

@hotaryuzaki Yes, the problem is from RN core, but AFAIK the 0.71 doesn't have that issue so upgrading may solve the problem.

Nvm, it seems like it doesn't help.

[segicm]

Any updates on this? The problem persists for the past 6 months...

[lightrow]

we are still using this
https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/new_api/betterHorizontalDrawer/BetterHorizonatalDrawer.tsx
with some tweaks to make drawerType={'slide'} work at cost of others that we don't need

just be aware that it causes a crash on hot-reload on iOS due to new Gesture API software-mansion/react-native-reanimated#3884

[Adr1anPopescu]

Any update here?

[dinhthi147]

Any updates on this? I still have to disable useNativeAnimations

[traxx10]

Same issue here as well

[linxianxi]

same

[shubhamguptadream11]

Same issue here as well in RN 0.72.4 with react-native-gesture-handler": "2.7.1.
By disabling native animations it worked but I don't want to do that.

[linxianxi]

try https://reactnavigation.org/docs/drawer-layout/ I used this now, it works fine.

[latekvo]

Hi, the DrawerLayout component is now deprecated by ReanimatedDrawerLayout which was released in 2.21.0.
This bug should be fixed by the new ReanimatedDrawerLayout component.