SwipeableProps from RefObject to Ref

[litinskii]

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.

[latekvo]

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]

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

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.

[Copilot]

Pull request overview

This PR updates the ref prop type for the Reanimated Swipeable component props to support both ref objects and callback refs, improving TypeScript ergonomics when consuming ReanimatedSwipeable.

Changes:

• Broadened the ref prop type from React.RefObject<...> to React.Ref<...> in SwipeableProps.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.