-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
docs: Remove prop adapters from v4 docs, add migration guide #8059
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: @matipl01/prop-adapters-removal
Are you sure you want to change the base?
docs: Remove prop adapters from v4 docs, add migration guide #8059
Conversation
5628638
to
a771871
Compare
#### 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)', | ||
})); | ||
``` |
There was a problem hiding this comment.
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?
#### 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 | |
); |
There was a problem hiding this comment.
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:

There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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
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`. |
There was a problem hiding this comment.
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.
Co-authored-by: Tomasz Zawadzki <[email protected]>
Summary
This PR removes
adapters
prop from v4 docs and adds migration guide from3.x
Example image
Migration guide