microsoft / microsoft/react-native-windows
Unable to animate arbitrary style props with NativeAnimated
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Problem Description
The core RN Animated API affords users the ability to animate arbitrary props. For example, you can animate a square to a circle by animating the borderRadius prop.
This functionality is not supported by the current implementation of NativeAnimated in react-native-windows.
Steps To Reproduce
- Add an example to RNTester > Native Animated Example that animates an arbitrary prop, e.g.,
borderRadius:
{
title: 'Animate arbitrary prop',
render: function (): React.Node {
return (
<Tester type="timing" config={{duration: 4000}}>
{(anim) => (
<Animated.View
style={[
styles.block,
{
borderRadius: anim.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 25, 0],
}),
},
]}
/>
)}
</Tester>
);
},
}
- Run example.
- Native animation does nothing, JS driven animation works correctly.
Expected Results
The native-driven example should match the behavior of the JS-driven example.
CLI version
npx react-native --version
Environment
npx react-native info
Target Platform Version
No response
Target Device(s)
No response
Visual Studio Version
No response
Build Configuration
No response
Snack, code example, screenshot, or link to a repository
https://user-images.githubusercontent.com/1106239/145269133-21aa3647-67f3-4b06-b0f8-499bc12a2076.mp4
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the repro in RNTester > Native Animated Example and compare the native-driven and JS-driven results for the borderRadius example. Trace the NativeAnimated implementation in react-native-windows to determine why arbitrary style props are ignored; done means the native-driven example matches the JS-driven animation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100