Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the v3 button/native-wrapper TypeScript surface so that “extra” button props come from NativeWrapper (removing legacy handler-style props like onBegan), and tightens wrapper generics to better type ref/wrapper behavior across wrapped RN components.
Changes:
- Make
NativeWrapperPropertiesgeneric over the wrapped ref type and move wrapper-only props (e.g.ref,onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER) into that type. - Update v3 wrapped components (
ScrollView,FlatList,Switch,TextInput,RefreshControl) to use the new generic wrapper typing. - Refactor v3
GestureButtonprop types to be based onGestureHandlerButton’s props +NativeWrapperProperties(and aim to switchhitSloptyping).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-native-gesture-handler/src/v3/types/NativeWrapperType.ts | Makes native-wrapper props generic and adds wrapper-only props to the exported type. |
| packages/react-native-gesture-handler/src/v3/hooks/utils/propsWhiteList.ts | Updates whitelist typing to account for the new NativeWrapperProperties<T> generic. |
| packages/react-native-gesture-handler/src/v3/createNativeWrapper.tsx | Updates createNativeWrapper generics/signature to use the new NativeWrapperProperties<R> form. |
| packages/react-native-gesture-handler/src/v3/components/GestureComponents.tsx | Updates wrapped RN component exports to pass correct ref/props generics. |
| packages/react-native-gesture-handler/src/v3/components/GestureButtonsProps.ts | Refactors v3 button prop types to derive from GestureHandlerButton + NativeWrapperProperties. |
| packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx | Moves button prop definitions here and updates the native component typing accordingly. |
Comments suppressed due to low confidence (1)
packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx:163
StyleSheet.flatten(style)can returnundefinedwhenstyleis not provided. DestructuringflattenedStylewill then throw at runtime (e.g., whenRawButton/BaseButtonare rendered without astyleprop). DefaultflattenedStyleto an empty object before destructuring (e.g.,StyleSheet.flatten(style) ?? {}).
export default function GestureHandlerButton({ style, ...rest }: ButtonProps) {
const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style]);
const {
// Layout properties
display,
width,
height,
minWidth,
maxWidth,
minHeight,
maxHeight,
flex,
flexGrow,
flexShrink,
flexBasis,
flexDirection,
flexWrap,
justifyContent,
alignItems,
alignContent,
alignSelf,
aspectRatio,
gap,
rowGap,
columnGap,
margin,
marginTop,
marginBottom,
marginLeft,
marginRight,
marginVertical,
marginHorizontal,
marginStart,
marginEnd,
padding,
paddingTop,
paddingBottom,
paddingLeft,
paddingRight,
paddingVertical,
paddingHorizontal,
paddingStart,
paddingEnd,
position,
top,
right,
bottom,
left,
start,
end,
overflow,
// Visual properties
...restStyle
} = flattenedStyle;
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/react-native-gesture-handler/src/v3/createNativeWrapper.tsx
Outdated
Show resolved
Hide resolved
packages/react-native-gesture-handler/src/v3/types/NativeWrapperType.ts
Outdated
Show resolved
Hide resolved
packages/react-native-gesture-handler/src/v3/components/GestureButtonsProps.ts
Show resolved
Hide resolved
packages/react-native-gesture-handler/src/v3/components/GestureButtonsProps.ts
Outdated
Show resolved
Hide resolved
packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
This change was mostly due to the fact that BorderlessButton was throwing TS errors with ref property, because when Animated component detects ref<unknown> it simply removes this prop.
Description
I've noticed that our buttons still had props like
onBeganavailable, even though it was a reference to the old API. This PR changes that, so that additional properties on buttons come only fromNativeWrapper.It also changes
hitSloptype to the one from React Native.Test plan
yarn ts-checkyarn lint-jsconsole.loginonPressadded)