Commit 090e822
SwipeableProps from RefObject to Ref (#3759)
# 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)
```tsx
const swipeableRef = useRef<SwipeableMethods>(null);
<ReanimatedSwipeable ref={swipeableRef}>
{/* content */}
</ReanimatedSwipeable>
```
### After (supports both ref objects and callbacks)
```tsx
// 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
- [x] Existing tests pass
- [x] TypeScript compilation succeeds
- [x] Both ref object and ref callback patterns work correctly
## Related Issues
Fixes the limitation where developers could only use `useRef()` with
ReanimatedSwipeable components.
---------
Co-authored-by: Michał <michal.bert@swmansion.com>
Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>1 parent fd49a39 commit 090e822
1 file changed
Lines changed: 1 addition & 1 deletion
File tree
- packages/react-native-gesture-handler/src/components/ReanimatedSwipeable
Lines changed: 1 addition & 1 deletion
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
13 | 13 | | |
14 | 14 | | |
15 | 15 | | |
16 | | - | |
| 16 | + | |
17 | 17 | | |
18 | 18 | | |
19 | 19 | | |
| |||
0 commit comments