Skip to content

Commit

Permalink
Don’t pass gesture handler wrapper props to child (#3343)
Browse files Browse the repository at this point in the history
## Description

When using useEvent from Reanimated together with PureNativeButton, I noticed that I would receive duplicate events. Upon further investigation I found that this was because createHandler renames the handlers and when reanimated attaches the worklet it does so twice because the same handler is available under different props.

This PR fixes this problem by simply not passing wrapper specific props to the child.

## Test plan

<!--
Describe how did you test this change here.
-->
  • Loading branch information
oblador authored Jan 20, 2025
1 parent 5f3211d commit f803ac1
Showing 1 changed file with 10 additions and 4 deletions.
14 changes: 10 additions & 4 deletions src/handlers/createNativeWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,23 @@ export default function createNativeWrapper<P>(
P & NativeViewGestureHandlerProps
>((props, ref) => {
// Filter out props that should be passed to gesture handler wrapper
const gestureHandlerProps = Object.keys(props).reduce(
const { gestureHandlerProps, childProps } = Object.keys(props).reduce(
(res, key) => {
// TS being overly protective with it's types, see https://github.com/microsoft/TypeScript/issues/26255#issuecomment-458013731 for more info
const allowedKeys: readonly string[] = NATIVE_WRAPPER_PROPS_FILTER;
if (allowedKeys.includes(key)) {
// @ts-ignore FIXME(TS)
res[key] = props[key];
res.gestureHandlerProps[key] = props[key];
} else {
// @ts-ignore FIXME(TS)
res.childProps[key] = props[key];
}
return res;
},
{ ...config } // Watch out not to modify config
{
gestureHandlerProps: { ...config }, // Watch out not to modify config
childProps: { enabled: props.enabled } as P,
}
);
const _ref = useRef<React.ComponentType<P>>();
const _gestureHandlerRef = useRef<React.ComponentType<P>>();
Expand All @@ -63,7 +69,7 @@ export default function createNativeWrapper<P>(
{...gestureHandlerProps}
// @ts-ignore TODO(TS)
ref={_gestureHandlerRef}>
<Component {...props} ref={_ref} />
<Component {...childProps} ref={_ref} />
</NativeViewGestureHandler>
);
});
Expand Down

0 comments on commit f803ac1

Please sign in to comment.