#reactnative
question: is this an acceptable way to use RNGH? I don't want the identity of `nativeGesture` to change, so as `drawerGesture` changes I just keep adding them endlessly in an effect
seems cursed but fixes a gnarly perf problem!
![function DrawerGestureRequireFail({children}: {children: React.ReactNode}) {
const drawerGesture = useContext(DrawerGestureContext)
const nativeGesture = useMemo(() => Gesture.Native(), [])
// the drawer gesture identity changes whenever the drawer opens/closes,
// but we don't want the GestureDetector to rerender when that happens
// therefore we just keep adding the gestures every time it changes to the same
// native gesture -sfn
useEffect(() => {
if (drawerGesture) {
nativeGesture.requireExternalGestureToFail(drawerGesture)
}
// TODO: figure out how to clean this up
}, [drawerGesture, nativeGesture])
return <GestureDetector gesture={nativeGesture}>{children}</GestureDetector>
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:p2cp5gopk7mgjegy6wadk3ep/bafkreiaziaxbybpj3gx62iea7pynsa5rubsykhetq4nawbmbxbxrjpb2tu "function DrawerGestureRequireFail({children}: {children: React.ReactNode}) {
const drawerGesture = useContext(DrawerGestureContext)
const nativeGesture = useMemo(() => Gesture.Native(), [])
// the drawer gesture identity changes whenever the drawer opens/closes,
// but we don't want the GestureDetector to rerender when that happens
// therefore we just keep adding the gestures every time it changes to the same
// native gesture -sfn
useEffect(() => {
if (drawerGesture) {
nativeGesture.requireExternalGestureToFail(drawerGesture)
}
// TODO: figure out how to clean this up
}, [drawerGesture, nativeGesture])
return <GestureDetector gesture={nativeGesture}>{children}</GestureDetector>
}")
2 22 2 22
If the drawer changes frequently this could be a problem. The native gesture will be accumulating all the previous drawer gesture references which may become too big. It actually only keeps the id so each one wont contribute a lot but if it grows indefinitely it could be a problem
1 1Another way to do it is to keep the drawer gesture references which may stable too with useMemo and only co figure it once. You can reassign the gesture instance to new components and I think you should be able to event have it used in two different components at the same time
1 1Samuel
@samuel.fm
unfortunately the drawer gesture is not stable, it changes every time the drawer opens and closes
luckily I think that’s fine, the issue I was looking for (the drawer jittering) was actual an unrelated animation problem. The perf problem here is actually fine to keep around
1Krzysztof MagieraCan’t you make the reference stable with useMemo though and just reconfigure it when needed?
1 1Samueloh interesting. if you call onEnd again, does it replace the old one?
1Krzysztof MagieraAs for that one I’m not so sure, it may just add another handler when you call it for the second time. Would need to check
1 1Samuelah ok never mind then. the issue is, the drawer gesture needs the `open` state in the onEnd handler, and thus `open` is a dependency of the gesture's useMemo. every time the drawer opens and closes, the gesture needs to be recreated in order to pass in the `open` state
1Samuelah ok I was being dumb - I just needed to memoize the component that the GestureDectector was wrapping and it’s all good