react-native-drawer-layout: right drawer stuck in open position. Won't close.

[jehillert]

Current behavior

This issue seems nearly the same as this one, except for react-native-drawer-layout version 3.2 and above. The app opens with the right drawer fully extended, and changing the state directly doesn't do anything. It was weird though, because I didn't have issue for months and it just started happening. And I could get it to go away and stay away, but if I cleaned the project it came back again and guaranteed it would show up on deployment.

I got it to go away by reverting to version 3.0.0.

Expected behavior

Expected it not to block the app. My repo is private so I cannot share code, but I think in this case you are aware of what needs to be done. I am just pointing it out it's also present in the react-native-drawer-view package as well. If not useful, feel free to close this right away. Also, npm doesn't link directly to the react-native-drawer-view repo, so I figured this was the place to post

Reproduction

.

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• [] I've removed the packages that I don't use
  "@react-navigation/material-top-tabs": "^6.6.8",
  "@react-navigation/native": "^6.1.8",
  "@react-navigation/native-stack": "^6.9.20",
  "react-native-drawer-layout": "^3.2.1",

[github-actions]

Hey @jehillert! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro.

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

• Expo Snack
• TypeScript Playground
• GitHub repo under your username

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a repro.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/drawer

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.1.8, latest: 6.1.12)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[jehillert]

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

I also tried 4.0.0-alpha.5 and it was there too. Sorry about the format of this Issue, but I just spent 24 hours trying to figure it out and I'm toast at the moment.

[likeSo]

Please check this: #11651
I am waiting for the resolution too

All right drawers are unusable and I suspect this framework was not tested at all before going live

[yuvrajchaudhari03]

<Drawer
        open={false}
        onOpen={() => setRightDrawerOpen(true)}
        onClose={() => setRightDrawerOpen(false)}
        drawerPosition="right"
        drawerType="front"
        renderDrawerContent={() => (
          <>
            <Text>Right</Text>
          </>
        )}
      >
        <NavigationDrawer {...props} />
      </Drawer>

still, it shows/opens.
found any solution?

[jehillert]

I dropped the version down to 3.0.0, and it went away.

[neomeisters]

Downgrading to version 3.0.0 works!, thanks

[sindarovcoder]

Screenrecorder-2024-03-26-13-36-55-831.mp4

that's how it works for me

[bserrano27]

Downgrading to version 3.0.0 works!, thanks

How can I downgrade the version? I'm just using @react-navigation/drawer no react-native-drawer-layout

[jehillert]

Downgrading to version 3.0.0 works!, thanks

How can I downgrade the version? I'm just using @react-navigation/drawer no react-native-drawer-layout

I don't think you could without patch package and you really wouldn't want to. If you are using @react-navigation/drawer then I think that uses drawer-layout as a dependency. Maybe try reverting back to the version of @react-navigation/drawer that was out when version 3.0.0 of react-native-drawer-layout came out. If that doesn't work, go back earlier and see if - that does it.

Btw, there is a similar issue (#8551) for @react-navigation-drawer where a solution was to revert back to version 6.1.4.

[bserrano27]

Downgrading to version 3.0.0 works!, thanks

How can I downgrade the version? I'm just using @react-navigation/drawer no react-native-drawer-layout

For those who would like to know how to solve this if you're using @react-navigation/drawer on Expo, please update Expo to SDK 50 or please refer to this closed issue #11616

[chanphiromsok]

I used 3.2.2 is not stuck but is open by default sometime when app start I set it isOpen to false but no luck

[milesingrams]

In general the drawerPosition: "right" needs a lot of work. For 3 years it hasn't worked in web due to the translateX not updating on window resize. Lots of issues related to this problem in the past have been closed without solutions other than to use useLegacyImplementation, however this stopped being possible since reanimated 3 disallows it.