Drawer Hidden When Changing drawerType to permanent on Web

7
open
CodingItWrong
CodingItWrong
Posted 1 month ago

Drawer Hidden When Changing drawerType to permanent on Web #10044

Current behavior

On web, if you change drawerType from a value other than "permanent" to "permanent", the space for the drawer appears, but the drawer is not shown if it was previously closed.

sidebar-web

Expected behavior

I expect that if you change drawerType to "permanent", the drawer would be visible, regardless of whether it was previously closed.

Note that this expected behavior is what happens on iPad split screen view: if you drag the area for the app wider or narrower, the drawer does consistently appear.

Reproduction

https://github.com/CodingItWrong/persistent-sidebar-toggle

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.0.6
@react-navigation/drawer 6.1.8
react-native-safe-area-context 3.2.0
react-native-screens 3.4.0
react-native-gesture-handler 1.10.3
react-native-reanimated 2.2.2
react-native https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz
expo 42.0.4
node 14.18.1
npm or yarn yarn 1.22.15
github-actions[bot]
github-actions[bot]
Created 1 month ago

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

  • @react-navigation/bottom-tabs
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs
  • @react-navigation/stack

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

CodingItWrong
CodingItWrong
Created 1 month ago

The packages with missing version numbers are because I'm not using those packages. As mentioned in the issue template:

When filling the table below, please remove the packages that you're not using.

So I removed those packages.

willstepp
willstepp
Created 1 month ago

I'm seeing this too. Cannot seem to get it to work.

deman4ik
deman4ik
Created 3 weeks ago

As a workaround - it works when the previous value was back and it changes to permanent.

Scrat94
Scrat94
Created 2 weeks ago

Also facing the same issues. A few weeks/month it was working just fine. What happened? @deman4ik workaround is working for me - thanks for now.

CodingItWrong
CodingItWrong
Created 2 weeks ago

@deman4ik's workaround works for me too; I don't need any particular drawer type for my app, so back works fine. I found that I also need to manually navigation.closeDrawer() when switching to permanent to avoid a visual gap.

adamhari
adamhari
Created 2 weeks ago

This broke for me when I upgraded from @react-navigation/drawer 6.1.4 --> 6.1.5

This is probably the cause https://github.com/react-navigation/react-navigation/commit/2a88d0d5ee2f504e8b4f95a11eac77c764844352