Update types to respect Strict TS API#4319
Open
m-bert wants to merge 2 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Updates RNGH’s TypeScript types to align with React Native 0.87’s “Strict TS API” (enabled by default), reducing/avoiding TS errors while keeping runtime behavior unchanged.
Changes:
- Adjusted event/detector component typings (e.g., Animated mapping shape, detector component unions, and animated wrapper typings).
- Updated various
ref-related types to useReact.ComponentRef<typeof ...>where RN’s strict types require it. - Migrated codegen spec typings/imports to public
react-nativeexports (e.g.,CodegenTypes,HostComponent,codegenNativeComponent) and tightened several component prop typings.
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-native-gesture-handler/src/v3/types/EventTypes.ts | Updates Animated event mapping typing to avoid RN strict typing breakages. |
| packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx | Narrows detector component typing to a shared native-component prop surface. |
| packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx | Same detector component typing adjustment for strict TS compatibility. |
| packages/react-native-gesture-handler/src/v3/detectors/HostGestureDetector.web.tsx | Fixes ref typing for View under strict TS (ComponentRef<typeof View>). |
| packages/react-native-gesture-handler/src/v3/detectors/common.ts | Adds an explicit ComponentType annotation for the animated detector wrapper. |
| packages/react-native-gesture-handler/src/v3/components/Pressable.tsx | Plumbs through ref typing to the underlying native button component. |
| packages/react-native-gesture-handler/src/v3/components/GestureComponents.tsx | Tightens wrapper component typings (notably TextInput) for strict TS. |
| packages/react-native-gesture-handler/src/v3/components/GestureButtonsProps.ts | Adjusts wrapper prop composition/omits to avoid strict TS conflicts. |
| packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx | Fixes strict style typing (e.g., opacity + ViewStyle casts) and wrapper component typing. |
| packages/react-native-gesture-handler/src/specs/RNGestureHandlerRootViewNativeComponent.ts | Updates codegen imports/types to public strict TS API (CodegenTypes, HostComponent). |
| packages/react-native-gesture-handler/src/specs/RNGestureHandlerDetectorNativeComponent.ts | Same codegen strict TS API updates; uses CodegenTypes.* and HostComponent cast. |
| packages/react-native-gesture-handler/src/specs/RNGestureHandlerButtonNativeComponent.ts | Same codegen strict TS API updates for the button component spec. |
| packages/react-native-gesture-handler/src/specs/NativeRNGestureHandlerModule.ts | Updates TurboModule spec numeric types to CodegenTypes.*. |
| packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper.ts | Broadens createAnimatedComponent arg type to ComponentType for strict TS. |
| packages/react-native-gesture-handler/src/components/touchables/TouchableNativeFeedback.android.tsx | Tightens background factory return typing and casts ripple color to expected prop type. |
| packages/react-native-gesture-handler/src/components/touchables/TouchableHighlight.tsx | Reworks style composition to satisfy strict TS style typing. |
| packages/react-native-gesture-handler/src/components/Text.tsx | Aligns ref typing with strict TS (ComponentRef<typeof RNText>). |
| packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx | Avoids passing backgroundColor: undefined by conditionally spreading the field. |
| packages/react-native-gesture-handler/src/components/Pressable/Pressable.tsx | Plumbs through ref typing to the underlying native button (legacy Pressable). |
| packages/react-native-gesture-handler/src/components/GestureComponents.tsx | Tightens wrapper typing for legacy drawer layout wrapper under strict TS. |
| packages/react-native-gesture-handler/src/components/GestureButtons.tsx | Adjusts strict typings for button wrappers (style typing + ref plumbing). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
j-piasecki
reviewed
Jul 17, 2026
Comment on lines
+77
to
+78
| export type LegacyScrollView = typeof GHScrollView & | ||
| React.ComponentRef<typeof RNScrollView>; |
Member
There was a problem hiding this comment.
Does this give the same result?
Collaborator
Author
There was a problem hiding this comment.
Yes and no.On the Strict TS API they differ: RNScrollView is a function-component type with no instance methods, so & RNScrollView silently stops contributing the very instance methods (scrollTo, scrollToEnd, …) this intersection exists to expose
Comment on lines
+90
to
+95
| const NativeDetectorComponent = ( | ||
| dispatchesAnimatedEvents | ||
| ? AnimatedNativeDetector | ||
| : shouldUseReanimatedDetector | ||
| ? ReanimatedNativeDetector | ||
| : HostGestureDetector |
Member
There was a problem hiding this comment.
TS is unable to infer a type from that?
Collaborator
Author
There was a problem hiding this comment.
From Claude:
TS infers the union fine — the problem is rendering it. The union includes HostGestureDetector, a HostComponent with multiple (overloaded) call signatures, so <NativeDetectorComponent … ref={…}/> fails with TS2769: No overload matches this call — an element-level error that per-prop @ts-ignore can't cover. Casting to a single-signature React.FunctionComponent<…> collapses the overloads so it type-checks per-prop. React.ComponentType/React.ElementType don't help — I tried both and they reintroduce the TS2769.
Basically:
Comment on lines
+29
to
+35
| const NativeDetectorComponent = ( | ||
| gesture.config.dispatchesAnimatedEvents | ||
| ? AnimatedNativeDetector | ||
| : gesture.config.shouldUseReanimatedDetector | ||
| ? ReanimatedNativeDetector | ||
| : HostGestureDetector | ||
| ) as React.FunctionComponent<RNGestureHandlerDetectorNativeComponentProps>; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Since React Native 0.87, Strict TS API is enabled by default . This PR brings necessary changes to resolve ts-errors on 0.87.
This PR also removes
cursor: undefined;fromiOS, but now it is a valid prop - this workaround was necessary on old archTest plan
yarn ts-check