You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I created an issue about my journey to solve this frequentlyreported problem. It wasn't very well received, so I'd like to post it in discussions to save anyone else some time trying to get this to work, which I would have appreciated when I started trying to resolve it.
Essentially, by making the container of the card pass pointer events on to its children without handling them itself, it is possible to have a cardOverlay component something like this:
function PressableCardOverlay() {
const nav = useNavigation();
const closeCurrentSheet = React.useCallback(() => nav.goBack(), [nav]);
// Allow "esc" to close the overlay on web.
React.useEffect(() => {
if (Platform.OS !== 'web') {
return;
}
const close = (e: any) => {
if (e.key === 'Escape') {
// Prevent other listeners of the same event from being called, to avoid
// closing all open sheets when pressing escape.
e.stopImmediatePropagation?.();
closeCurrentSheet();
}
};
const window = globalThis as any;
window.addEventListener('keydown', close);
return () => window.removeEventListener('keydown', close);
}, [closeCurrentSheet]);
return (
<Animated.View style={[style, {flex: 1, backgroundColor: '#000'}]}>
<Pressable style={{flex: 1}} onPress={closeCurrentSheet} />
</Animated.View>
);
}
In order for the above code snippet to work, the following patch needs to be applied to @react-navigation/stack. You can use something like patch-package or yarn patch to apply the diff on install.
From my testing I can't find any downside to this, the container element itself doesn't handle presses directly anyway. But please do your own testing and come to your own conclusions.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I created an issue about my journey to solve this frequently reported problem. It wasn't very well received, so I'd like to post it in discussions to save anyone else some time trying to get this to work, which I would have appreciated when I started trying to resolve it.
Essentially, by making the container of the card pass pointer events on to its children without handling them itself, it is possible to have a
cardOverlay
component something like this:In order for the above code snippet to work, the following patch needs to be applied to
@react-navigation/stack
. You can use something like patch-package or yarn patch to apply the diff on install.From my testing I can't find any downside to this, the container element itself doesn't handle presses directly anyway. But please do your own testing and come to your own conclusions.
Hope this saves someone else some time and frustration, maybe one day it won't require a patch.
Beta Was this translation helpful? Give feedback.
All reactions