Ios Drawer Navigation is not working properly when drawerPosition: 'right'

[dhruvpvx]

Current behavior

When drawer is positioned right side and if I open camera then if the camera is closed without capturing photo some part of the drawer remains unclosed and it can only be fixed after killing the app

uploaded image is from simulator but this isssue is causing mostly in real device when opening or closing the camera

Simulator.Screen.Recording.-.iPhone.13.-.2022-09-08.at.14.44.50.mp4

Expected behavior

the drawer should close completely even if opening any type of feature

Reproduction

nolink

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/drawer
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native
node
npm or yarn

[github-actions]

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

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

A repro will help us debug the issue. The issue will be closed automatically after a while if you don't provide a repro.

[github-actions]

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

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

[joshbuchea]

We ran into this issue at my job recently. I'm not sure if this is the best solution, but we were ultimately only able to resolve by adding a marginLeft and adjusting the width in our drawer styles:

from { width: '80%' } to { marginLeft: '20%', width: '100%' }

<Drawer.Navigator
  screenOptions={{
    // ...
    drawerStyle: {
      // ...
      marginLeft: '20%',
      width: '100%',
    }
  }}>
  ...
</Drawer.Navigator>

Hopefully this info is helpful for your situation, good luck!

[github-actions]

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.

[RenanDore]

this solution resolved to me:

Inside the navigator:

screenOptions={() => ({
        drawerStyle: {
          backgroundColor: 'white',
          width: '60%',
          color: '#f1f1f1',
          marginLeft: Platform.OS === 'ios' ? '10%' : '0%',
        },

Inside the drawerComponent at VStack:
w={Platform.OS === 'ios' ? '90%' : '100%'}

[github-actions]

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.

[github-actions]

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

• Expo Snack
• TypeScript Playground
• GitHub repo under your username

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.

[usichenko-nikita]

As was mentioned here #10335 (comment) just add useLegacyImplementation prop to Drawer.Navigator

[MrSquaare]

useLegacyImplementation can't be used with Reanimated 3+ since legacy support has been removed

[minwoo129]

I had the same problem, but I think I found the way to solve it temporarily. (thanks to my colleague)

I think there is a problem in react-native-safe-area-context that drawer navigation library call.

we've edited by this (Check the drawerStyle block)

const dimensions = useSafeAreaFrame();

  return (
    <Drawer.Navigator
      initialRouteName="MainTabNavigator"
      screenOptions={{
        drawerType: 'front',
        drawerPosition: 'right',
        swipeEnabled: false,
        headerShown: false,
        drawerStyle: {
          backgroundColor: 'white',
          width: Dimensions.get('window').width * 0.95,
          marginLeft: Dimensions.get('window').width - dimensions.width,
        },
      }}