React navigation drawer not working on web with React Native CLI

[gaborszita]

Current behavior

I'm using react-native-web with React Native CLI (not Expo). I followed this guide to set up react native web with webpack. When I ran the react navigation drawer example, I got this:

The drawer is rendering, though, just not in the correct place. I know this because when I increase the body margin, the drawer does display. This is how it looks when the body margin is 60px:

However, modifying the margin is obviously not a good long-term fix and the button is still not in the correct place. I'm trying to figure out why it does not render correctly.

Expected behavior

The drawer should work like it does in Expo :

Reproduction

https://github.com/gaborszita/react-navigation-drawer-web-error

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.1.9
@react-navigation/drawer	6.6.6
react-native-reanimated	3.5.4
react-native	0.72.6
node	20.6.1
npm or yarn	9.8.1

[github-actions]

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

• @react-navigation/native

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

[gaborszita]

@github-actions I updated it.

[npmun]

Set the below style in the index.html

 #react-native-web-app {
  display: flex;
  height: 100%;
}

[Priyanshu2117]

any solution for this?