Skip to content
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 position is not correct in Expo 49 #11955

Open
5 of 12 tasks
zainkhas opened this issue Apr 22, 2024 · 3 comments
Open
5 of 12 tasks

Drawer position is not correct in Expo 49 #11955

zainkhas opened this issue Apr 22, 2024 · 3 comments

Comments

@zainkhas
Copy link

zainkhas commented Apr 22, 2024

Current behavior

The position of drawer using react-navigation with Expo 49 is not correct when drawerType is slide. In Android & iOS the drawer is not visible at all and on Web it shows up in middle of the screen. It is caused by the CSS transform property having invalid value.

Dependencies versions:
"expo": "^49.0.0"
"react-native-web": "0.17.7"
"@react-navigation/drawer": "^6.1.8"
"@react-navigation/native": "^6.0.8"
"react-native-web": "~0.19.6"
"react-native-safe-area-context": "4.6.3"
"react-native-reanimated": "~3.3.0"

Expected behavior

The drawer should be at the correct position in the viewport, depending on the drawerPosition and drawerType.

Reproduction

https://snack.expo.dev/@zainkhas/react-native-web---drawer-issue

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
package version
@react-navigation/native ^6.0.8
@react-navigation/bottom-tabs ^6.2.0
@react-navigation/drawer ^6.1.8
@react-navigation/stack ^6.0.11
@react-navigation/native-stack ^6.4.0
react-native-screens ~3.22.0
react-native-gesture-handler ~2.12.0
react-native-reanimated ~3.3.0
react-native-tab-view 3.3.0
react-native-pager-view 6.2.0
react-native 0.72.6
expo 49.0.0
node v18.17.0
npm or yarn 10.5.0
Copy link

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

  • @react-navigation/drawer (found: 6.1.8, latest: 6.6.15)
  • @react-navigation/native (found: 6.0.8, latest: 6.1.17)
  • @react-navigation/bottom-tabs (found: 6.2.0, latest: 6.5.20)
  • @react-navigation/stack (found: 6.0.11, latest: 6.3.29)
  • react-native-tab-view (found: 3.3.0, latest: 3.5.2)

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

@zainkhas
Copy link
Author

Updated the Snack with latest versions (only relevant to this snack)
https://snack.expo.dev/2a2vJVk0Ybk7pz6pxWTCi

But unfortunately, the issue still exists.

@szado
Copy link

szado commented Apr 29, 2024

Probably related: #11692

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

No branches or pull requests

2 participants