Skip to content

Conversation

@litinskii
Copy link

@litinskii litinskii commented Oct 21, 2025

Fix ReanimatedSwipeable ref type to support ref callbacks

Description

This PR fixes the ref prop type in ReanimatedSwipeableProps to support both ref objects and ref callbacks, improving TypeScript compatibility and developer experience.

Changes

  • Changed ref?: React.RefObject<SwipeableMethods | null> to ref?: React.Ref<SwipeableMethods | null> in ReanimatedSwipeableProps interface

Motivation

The current implementation only supports React.RefObject which limits developers to using useRef() hook. By changing to React.Ref, the component now supports:

  1. Ref objects (useRef())
  2. Ref callbacks (function refs)

This change aligns with React's best practices and provides more flexibility for developers when working with refs.

Example Usage

Before (only ref objects)

const swipeableRef = useRef<SwipeableMethods>(null);

<ReanimatedSwipeable ref={swipeableRef}>
  {/* content */}
</ReanimatedSwipeable>

After (supports both ref objects and callbacks)

// Ref object
const swipeableRef = useRef<SwipeableMethods>(null);

// Ref callback
const handleRef = (ref: SwipeableMethods | null) => {
  // Custom logic
};

<ReanimatedSwipeable ref={swipeableRef}>
  {/* content */}
</ReanimatedSwipeable>

<ReanimatedSwipeable ref={handleRef}>
  {/* content */}
</ReanimatedSwipeable>

Type Safety

This change maintains full TypeScript type safety while expanding the supported ref patterns. The React.Ref<T> type is a union type that includes:

  • React.RefObject<T>
  • React.RefCallback<T>

Breaking Changes

None. This is a backward-compatible change that only expands the supported ref types.

Testing

  • Existing tests pass
  • TypeScript compilation succeeds
  • Both ref object and ref callback patterns work correctly

Related Issues

Fixes the limitation where developers could only use useRef() with ReanimatedSwipeable components.

Copy link
Member

@latekvo latekvo left a comment

Choose a reason for hiding this comment

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

Thank you for the contribution!

Checked, this doesn't seem to cause any type issues, useImperativeHandle(ref, ...) which is the only usage of ref supports React.RefCallback.

The React.Ref type is a union type that includes:
string | number | null (legacy refs)

I don't think that's true, but that doesn't really matter 😅

@olitynskyi-mtb
Copy link

I don't think that's true, but that doesn't really matter 😅

Снимок экрана 2025-10-23 в 07 40 22

Yes, you’re right — the legacy ref could only be a string, and it doesn’t really make sense anymore since it’s been deprecated for a long time.

Remove this line.

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