Skip to content

Conversation

m-bert
Copy link
Contributor

@m-bert m-bert commented Sep 15, 2025

Description

This PR introduces typed hooks for new API.

Test plan

Tested on the following example:
import * as React from 'react';
import { Animated, Button } from 'react-native';
import {
  GestureHandlerRootView,
  NativeDetector,
  usePan,
} from 'react-native-gesture-handler';

export default function App() {
  const [visible, setVisible] = React.useState(true);

  const gesture = usePan({
    onUpdate: (e) => {
      'worklet';
      console.log(e.handlerData);
    },
  });

  return (
    <GestureHandlerRootView
      style={{ flex: 1, backgroundColor: 'white', paddingTop: 8 }}>
      <Button
        title="Toggle visibility"
        onPress={() => {
          setVisible(!visible);
        }}
      />

      {visible && (
        <NativeDetector gesture={gesture}>
          <Animated.View
            style={[
              {
                width: 150,
                height: 150,
                backgroundColor: 'blue',
                opacity: 0.5,
                borderWidth: 10,
                borderColor: 'green',
                marginTop: 20,
                marginLeft: 40,
              },
            ]}
          />
        </NativeDetector>
      )}
    </GestureHandlerRootView>
  );
}

Also on other handlers.

Base automatically changed from @mbert/properly-type-config to next September 16, 2025 09:44
export type { ManualGestureConfig } from './useManual';
export { useManual } from './useManual';

export type { NativeViewGestureConfig } from './useNative';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can change to NativeGestureConfig (or something else) if you prefer.

@m-bert m-bert marked this pull request as ready for review September 16, 2025 12:50
@m-bert m-bert marked this pull request as draft September 16, 2025 12:51
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces typed gesture hooks for a new v3 API in react-native-gesture-handler. The changes add strongly-typed hooks for various gesture types (tap, pan, pinch, rotation, etc.) with proper TypeScript support.

  • Adds typed hook functions for all major gesture types (tap, pan, pinch, rotation, fling, hover, etc.)
  • Implements proper TypeScript generics and type safety throughout the hook system
  • Adds utility functions for configuration handling and property mapping

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
packages/react-native-gesture-handler/src/v3/types.ts Updates type definitions with generics and new config types
packages/react-native-gesture-handler/src/v3/hooks/utils/relationUtils.ts Adds generic types to isComposedGesture function
packages/react-native-gesture-handler/src/v3/hooks/utils.ts Adds utility functions for config cloning and property remapping
packages/react-native-gesture-handler/src/v3/hooks/gestures/*.ts Implements typed hooks for all gesture types (tap, pan, pinch, etc.)
packages/react-native-gesture-handler/src/v3/NativeDetector/*.ts Updates NativeDetector components with proper generic typing
packages/react-native-gesture-handler/src/index.ts Exports the new gesture hooks

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@m-bert m-bert marked this pull request as ready for review September 16, 2025 13:55
@m-bert m-bert merged commit bf2b8dc into next Sep 19, 2025
2 checks passed
@m-bert m-bert deleted the @mbert/gesture-hooks branch September 19, 2025 07:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants