Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 1 addition & 22 deletions packages/docs-reanimated/docs/core/useAnimatedProps.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ function App() {
```typescript
function useAnimatedProps<T extends {}>(
updater: () => Partial<T>,
dependencies?: DependencyList | null,
adapters?: PropsAdapterFunction | PropsAdapterFunction[] | null
dependencies?: DependencyList | null
): Partial<T>;
```

Expand All @@ -52,25 +51,6 @@ An optional array of dependencies.

Only relevant when using Reanimated [without the Babel plugin on the Web](https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support#web-without-the-babel-plugin).

#### `adapters` <Optional/>

An optional function or an array of functions.

Sometimes when working with third-party libraries properties might be named differently on the API surface from what they really represent on the native side. Adapters make it possible to handle these cases by defining a way to convert these props.

Reanimated comes with two built-in adapters:

- [`SVGAdapter`](https://github.com/software-mansion/react-native-reanimated/blob/Reanimated2/src/reanimated2/PropAdapters.ts#L19) for handling `transform` property in `react-native-svg`
- [`TextInputAdapter`](https://github.com/software-mansion/react-native-reanimated/blob/Reanimated2/src/reanimated2/PropAdapters.ts#L57).

You can create your own adapters using `createAnimatedPropAdapter` function.

Here's an example of adapting `fill` and `stroke` properties from `react-native-svg` to be able to animate them with Reanimated.

import AnimatedPropAdapterSrc from '!!raw-loader!@site/src/examples/AnimatedPropAdapter';

<CollapsibleCode showLines={[13, 25]} src={AnimatedPropAdapterSrc} />

### Color-related properties

Color-related properties that come from custom components won't work in most cases as these props are in a format incomprehensible for native side.
Expand Down Expand Up @@ -121,7 +101,6 @@ import AnimatingPropsSrc from '!!raw-loader!@site/src/examples/AnimatingProps';
## Remarks

- You can share animated props between components to avoid code duplication.
- We recommend to create adapters outside of the component's body to avoid unnecessary recalculations.

## Platform compatibility

Expand Down
47 changes: 47 additions & 0 deletions packages/docs-reanimated/docs/guides/migration-from-3.x.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,53 @@ In Reanimated 4, we renamed `useScrollViewOffset` to `useScrollOffset`. For the

`useAnimatedGestureHandler` was marked as deprecated in Reanimated 3 and has been removed in Reanimated 4. You need to refactor all its usages to the new `Gesture` API introduced in Gesture Handler 2 according to the steps described in [React Native Gesture Handler documentation](https://docs.swmansion.com/react-native-gesture-handler/docs/guides/upgrading-to-2).

### Removed `createAnimatedPropAdapter`

In Reanimated 4, the `adapters` parameter has been removed from `useAnimatedProps`. All properties that previously required adapters now should work directly.
Copy link
Member

@tomekzaw tomekzaw Aug 12, 2025

Choose a reason for hiding this comment

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

TODO: ask @jakex7 what is the first version of RNSVG that doesn't need prop adapters

Suggested change
In Reanimated 4, the `adapters` parameter has been removed from `useAnimatedProps`. All properties that previously required adapters now should work directly.
In Reanimated 4, `createAnimatedPropAdapter` function along with `adapters` parameter in `useAnimatedProps` hook have been removed. If some property needs preprocessing, it must be done inside `useAnimatedProps` worklet.
The most common use case for custom prop adapters was animating `fill` and `stroke` properties of `react-native-svg` components. Note that starting from `[email protected]` these props no longer need preprocessing and can be animated directly just like other color props like `backgroundColor` or `borderColor`.

Copy link
Member

Choose a reason for hiding this comment

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

I believe that starting with [email protected] + [email protected], we no longer need the adapter to animate fill/stroke properties.


#### Before

Using custom adapter for fill and stroke properties:

```jsx
import {
createAnimatedPropAdapter,
processColor,
} from 'react-native-reanimated';

const adapter = createAnimatedPropAdapter(
(props) => {
if (Object.keys(props).includes('fill')) {
props.fill = { type: 0, payload: processColor(props.fill) };
}
if (Object.keys(props).includes('stroke')) {
props.stroke = { type: 0, payload: processColor(props.stroke) };
}
},
['fill', 'stroke']
);

const animatedProps = useAnimatedProps(
() => ({
fill: 'yellow',
stroke: 'rgb(255,0,0)',
}),
[],
adapter
);
```

#### After

Properties work directly without adapter:

```jsx
const animatedProps = useAnimatedProps(() => ({
fill: 'yellow',
stroke: 'rgb(255,0,0)',
}));
```
Comment on lines +91 to +132
Copy link
Member

Choose a reason for hiding this comment

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

How about showing a diff instead?

Suggested change
#### Before
Using custom adapter for fill and stroke properties:
```jsx
import {
createAnimatedPropAdapter,
processColor,
} from 'react-native-reanimated';
const adapter = createAnimatedPropAdapter(
(props) => {
if (Object.keys(props).includes('fill')) {
props.fill = { type: 0, payload: processColor(props.fill) };
}
if (Object.keys(props).includes('stroke')) {
props.stroke = { type: 0, payload: processColor(props.stroke) };
}
},
['fill', 'stroke']
);
const animatedProps = useAnimatedProps(
() => ({
fill: 'yellow',
stroke: 'rgb(255,0,0)',
}),
[],
adapter
);
```
#### After
Properties work directly without adapter:
```jsx
const animatedProps = useAnimatedProps(() => ({
fill: 'yellow',
stroke: 'rgb(255,0,0)',
}));
```
#### Before
Using custom adapter for fill and stroke properties:
```diff
-import {
- createAnimatedPropAdapter,
- processColor,
-} from 'react-native-reanimated';
-
-const adapter = createAnimatedPropAdapter(
- (props) => {
- if (Object.keys(props).includes('fill')) {
- props.fill = { type: 0, payload: processColor(props.fill) };
- }
- if (Object.keys(props).includes('stroke')) {
- props.stroke = { type: 0, payload: processColor(props.stroke) };
- }
- },
- ['fill', 'stroke']
-);
const animatedProps = useAnimatedProps(
() => ({
fill: 'yellow',
stroke: 'rgb(255,0,0)',
}),
- [],
- adapter
);

Copy link
Member Author

@MatiPl01 MatiPl01 Aug 12, 2025

Choose a reason for hiding this comment

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

Do we even support diff syntax highlighting and formatting? The following screenshot shows a diff from this page and it is hardly readable:

Screenshot 2025-08-12 at 10 03 18

Copy link
Member Author

Choose a reason for hiding this comment

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

cc @kacperkapusciak Should we be able to render diffs in docs?

Copy link
Member

Choose a reason for hiding this comment

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

i remember diffs worked badly without any syntax highlighting

Copy link
Member

Choose a reason for hiding this comment

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

Oh that's right


## Integration with other libraries

All integrations with other third-party libraries such as [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) or [React Native Skia](https://shopify.github.io/react-native-skia/) work the same as on 3.x. However, Reanimated 4 no longer provides support for [React Native V8](https://github.com/Kudo/react-native-v8/issues).
Expand Down