Skip to content

Conversation

MatiPl01
Copy link
Member

@MatiPl01 MatiPl01 commented Aug 12, 2025

Summary

This PR removes adapters prop from v4 docs and adds migration guide from 3.x

Example image

Migration guide

Screenshot 2025-08-12 at 09 17 12

@MatiPl01 MatiPl01 self-assigned this Aug 12, 2025
@MatiPl01 MatiPl01 force-pushed the @matipl01/prop-adapters-removal-from-docs branch from 5628638 to a771871 Compare August 12, 2025 07:20
@MatiPl01 MatiPl01 marked this pull request as ready for review August 12, 2025 07:20
@MatiPl01 MatiPl01 requested a review from tomekzaw August 12, 2025 07:20
Comment on lines +91 to +132
#### 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)',
}));
```
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


### Removed `adapters` parameter from `useAnimatedProps`

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants