Drawer position is not correct in Expo 49

react-navigation / react-navigation

Routing and navigation for your React Native apps

https://reactnavigation.org

23.3k stars 4.97k forks source link

Drawer position is not correct in Expo 49 #11955

Open zainkhas opened 3 weeks ago

zainkhas commented 3 weeks ago

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

[X] Android
[X] iOS
[X] Web
[ ] Windows
[ ] MacOS

Packages

[ ] @react-navigation/bottom-tabs
[X] @react-navigation/drawer
[ ] @react-navigation/material-top-tabs
[ ] @react-navigation/stack
[ ] @react-navigation/native-stack
[ ] react-native-tab-view

Environment

[x] 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

github-actions[bot] commented 3 weeks ago

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 commented 3 weeks ago

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

But unfortunately, the issue still exists.

szado commented 2 weeks ago