-
-
Notifications
You must be signed in to change notification settings - Fork 5k
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 does not close after selecting item #11988
Comments
The versions mentioned in the issue for the following packages differ from the latest versions on npm:
Can you verify that the issue still exists after upgrading to the latest versions of these packages? |
Confirmed. Issue still exists. |
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. |
This is currently happening in our expo project too since migrating to expo51 |
This is happening for me as well. This causes strange things such as needing to tap a menu item in the drawer twice to close it. Or if you find yourself having closed it (such as by putting a delay before |
Also now having reports of some Android users experiencing the same issue with their "Remove Animations" setting turned on. |
Hello, Did any one got resolution for this issue? I am also facing same issue for iOS. |
Also happens on my end. react-native@0.74.1, expo@51.0.9, react-native-reanimated@3.10.1, @react-navigation/drawer@6.6.15. |
@tipleavalentin We've messed around with the newer reanimated / expo versions to no success so far. I think we'll have to wait until a maintainer works on the project. For now has anyone reverted Expo versions successfully? |
for me the bug disapear when updating to 6.6.15 :
|
Still experiencing the issue with those versions. This is becoming a huge annoyance in my project and rolling back was a big undertaking, so I edited the Drawer component myself to make it work in the meantime. Here's what worked for me. In the file
|
Hi! Later edit:
|
Thank you for this. I hadn't done a build, only pushed an update with My attempts to get this to work while building on expo servers (rather than local builds) aren't working, but I'd rather not spend more time on this. Will rely on the update until the package is fixed. |
Another workaround is to tell reanimated that it's not on "reduced motion" device:
|
Any update on this? Still facing the issue and do not want to mess with the default builds. |
There is workaround that I'm using. I hope that a) it helps others and b) if there is a problem with it (aside from its ugliness) someone can point it out: THEORY CODE const [drawerBumpKeyHACK, setDrawerBumpKeyHACK] = useState(0);
const [showDrawerHACK, setShowDrawerHACK] = useState(false);
return (
<NavigationContainer
ref={navigationRef}
onStateChange={(state) => {
const route = state?.routes?.[state?.index];
if (!route) {
return;
}
// HACK! If reduced animation is on, the drawer doesn't always open or close:
// https://github.com/react-navigation/react-navigation/issues/11988
// As a workaround: force rerendering the drawer w/ the proper default state set if:
// - reduced Motion is on
// - this state change involves the 'drawer' screen (ie not something else in the stack, may not apply to you)
// - the latest change (based on the history) is routing to EITHER:
// - a screen
// - opening/closing the drawer
// Note: manually dispatching a close drawer event doesn't work:
// ie this: navigationRef.current?.dispatch(DrawerActions.closeDrawer());
if (reduceMotionEnabled && route.state?.type === 'drawer') {
const history = route.state?.history;
const last = history?.[history.length - 1];
if (last) {
if (last['type'] === 'route') {
setShowDrawerHACK(false);
setDrawerBumpKeyHACK((existing) => existing + 1);
} else if (last['type'] === 'drawer') {
setShowDrawerHACK(last['status'] === 'open');
setDrawerBumpKeyHACK((existing) => existing + 1);
}
}
}
}} >
<Stack.Navigator>
<Stack.Screen
key={`drawer-screen-${reduceMotionEnabled ? drawerBumpKeyHACK : 'default'}`}
name={'drawer'}
>
{() => (
<Drawer.Navigator
initialRouteName={'testItem1'}
defaultStatus={reduceMotionEnabled && showDrawerHACK ? 'open' : 'closed'}>
<Drawer.Screen
name={'testItem1'}
component={MyScreen1}
/>
<Drawer.Screen
name={'testItem2'}
component={MyScreen2}
/>
</Drawer.Navigator>
)}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>); For knowing when reduced motion is enabled: in my experience useReduceMotion() doesn't work consistently // const reduceMotionEnabled = useReduceMotion(); // from react-native-reanimated
const [reduceMotionEnabled, setReducedMotionEnabled] = useState<boolean>(false);
useEffect(() => {
AccessibilityInfo.isReduceMotionEnabled().then(setReducedMotionEnabled);
const reducedMotionListener = AccessibilityInfo.addEventListener('reduceMotionChanged', (event) => {
setReducedMotionEnabled(event.valueOf());
});
return () => {
reducedMotionListener.remove();
};
}, []); |
I had the same problem on Android after upgrade to Expo 51, the issue is resolved using these in my case:
|
Fixed via c2caf87 |
Current behavior
When using a drawer navigator with nested stack navigators and selecting an item, the selected screen will appear, but the drawer will not close.
This happens on iOS devices with "Reduce Motion" and "Prefer Cross-Fade Transitions" enabled.
RPReplay_Final1715791549.mov
Expected behavior
The drawer should close when an item is selected
Reproduction
https://snack.expo.dev/@jbrandes/authentic-yellow-apple
Platform
Packages
Environment
The text was updated successfully, but these errors were encountered: