Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem with React Navigation drawers - screen overlay not removed

See original GitHub issue

Description

Not 100% sure if this is a reanimated thing or one for react-navigation, however, with reanimated 2.0.0-rc.1 there is a weird bug when using a React Navigation drawer on Android that seems to prevent the overlay being removed correctly. It results in a screen being unclickable. This doesn’t happen with previous versions of reanimated (tested with 2.0.0-alpha.6 and bug is not present) and doesn’t seem to happen on iOS either.

Screenshots

Video below: https://user-images.githubusercontent.com/25434369/104173823-9e75f680-5406-11eb-9977-232a9b37bb53.mp4

Steps To Reproduce

Clone this repo
Run yarn to install packages (latest react-navigation is in here)
Run yarn android to run on your simulator/device.
Click the animate button a few times - everything works as expected
Click ‘Open Drawer’ - the drawer opens
Click on the backdrop to hide the drawer - the drawer will close
Try and click anything else on the screen - it’s not possible, like there’s some kind of overlay still in place.

(If you slide the drawer out from the left-hand edge and slide it back in again, the screen does work as expected. It’s only when clicking on the backdrop to remove the overlay that this bug occurs).

Expected behavior

Drawer should work as expected and the screen should remain interactive once the drawer is closed.

Actual behavior

Screen can’t be interacted with once the drawer has closed.

Snack or minimal code example

Minimal code repo

Package versions

React: 16.13.1
React Native: 0.63.4
React Native Reanimated: 2.0.0-rc.1
NodeJS: 12.16.3

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:12 (1 by maintainers)

Top GitHub Comments

3reactions

jakub-gonetcommented, Feb 1, 2021

@sarthakpranesh @AhmadHddad

Hey, I am facing the same issue with 2.0.0-rc.2. Is there a temporary fix for this bug that can be used for now, while we wait for the next release with bug fixes?

You can use patch-package to temporarily use patch from #1665.

2reactions

AhmadHddadcommented, Feb 1, 2021

@sarthakpranesh, @jakub-gonet, thanks guys, I was able to downgrade to a lower version of @react-navigation/drawer, it worked just fine “@react-navigation/drawer”: “^5.9.0”,

Top Results From Across the Web

react native navigation drawer : Drawer not closing when ...

Drawer is closing fine in android platform. This is only happening in iOS. I am not sure but something with react-native-reanimated or react- ......

Drawer Navigator | React Navigation

Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with react-native-screens.

react-native-screens - npm

This project aims to expose native navigation container components to React Native. It is not designed to be used as a standalone library ......

React Native Modal Drawer

Drawer Navigator Component that renders a navigation drawer which can be ... The navigation view is initially not visible on the screen, but...

Upgrading from 3.x - React Navigation - Netlify

Then change any imports for stack, tabs or drawer to import from the above packages instead of react-navigation . Copy. - import {...