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

React Navigation Drawer opens a little when screen rotate #10368

Closed
2 of 11 tasks
elmcapp opened this issue Feb 19, 2022 · 24 comments
Closed
2 of 11 tasks

React Navigation Drawer opens a little when screen rotate #10368

elmcapp opened this issue Feb 19, 2022 · 24 comments

Comments

@elmcapp
Copy link

elmcapp commented Feb 19, 2022

Current behavior

On iOS 15 device the drawer opens a little when screen rotate.

Simulator.Screen.Recording.-.iPhone.13.-.2022-02-19.at.01.59.40.mp4

Expected behavior

drawer should stay closed when screen rotate

Reproduction

I have video

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

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

Environment

  • [] I've removed the packages that I don't use
package version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn
@github-actions
Copy link

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

@github-actions
Copy link

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

  • @react-navigation/native
  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @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.

@elmcapp
Copy link
Author

elmcapp commented Mar 13, 2022

"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/drawer": "^6.3.1",
"@react-navigation/material-bottom-tabs": "^6.1.1",
"@react-navigation/material-top-tabs": "^6.1.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/stack": "^6.1.1",
"react": "17.0.2",
"react-native": "0.67.2",

@github-actions
Copy link

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

@github-actions github-actions bot added the stale label Apr 13, 2022
@elmcapp
Copy link
Author

elmcapp commented Apr 13, 2022

still have this problem

@github-actions github-actions bot removed the stale label Apr 14, 2022
@github-actions
Copy link

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

@github-actions github-actions bot added the stale label May 14, 2022
@elmcapp
Copy link
Author

elmcapp commented May 14, 2022

still have this problem

@github-actions github-actions bot removed the stale label May 15, 2022
@github-actions
Copy link

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

@github-actions github-actions bot added the stale label Jun 14, 2022
@elmcapp
Copy link
Author

elmcapp commented Jun 14, 2022

Still having this issue

@github-actions github-actions bot removed the stale label Jun 15, 2022
@vcellu
Copy link

vcellu commented Jul 8, 2022

We are also experiencing the same issue.

@github-actions
Copy link

github-actions bot commented Aug 8, 2022

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

@github-actions
Copy link

github-actions bot commented Nov 4, 2022

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

@ankuragrawal29
Copy link

We are also experiencing the same issue.

@Dzban-Diego
Copy link

I also get the same issue. After few hours i manage to find solution.
The bug was present only when i add width: '100% to drawerStyle. I need the drawer to be full screen.
I simple change it to width: dimentions.width to set width as the screen, and this is working as expected.

@JJSLIoT
Copy link

JJSLIoT commented Apr 1, 2023

Facing the same issue, why is this issue closed in spite of so many user actively reporting this issue?

@Dhananjay-JSR
Copy link
Member

Dhananjay-JSR commented Apr 1, 2023

Can you please provide a https://snack.expo.dev/ link for reproducing this issue with minimal setup

@github-actions
Copy link

github-actions bot commented Apr 1, 2023

Hey @elmcapp! 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:

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.

@nimabk82
Copy link

any solution for this issue ?

@ninamargretdadadottir
Copy link

This worked for me:

<Drawer.Navigator
defaultStatus={'closed'}
drawerStyle: {
width: Dimensions.get('window').width
}>

@SagarAhir
Copy link

SagarAhir commented Nov 26, 2023

I am also facing this issue, Dimensions.get('window').width didn't work for me. also I have notice this issue while i am using drawerPosition: "right", for temporary fix I have used drawerType: "back" animation

@klendi
Copy link

klendi commented Dec 8, 2023

I tried @ninamargretdadadottir solution and it worked. It seems like to act weird when applied custom width.

This worked for me:

const width = Dimensions.get("window").width;

....

drawerStyle: {
          width: width * 0.8,
        },

@ankuragrawal29
Copy link

any luck with this issue?

@JJSLIoT
Copy link

JJSLIoT commented Jun 28, 2024

Can we please reopen this issue, this is still affecting many users!

@rozekfr
Copy link

rozekfr commented Aug 30, 2024

Same here, please solve it or reopen the issue.

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