microsoft / microsoft/react-native-windows

Unable to animate arbitrary style props with NativeAnimated

Open
#9,255 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Animation enhancement Partner: Facebook Workstream: Component Parity
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
  1. 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>
      );
    },
  }
  1. Run example.
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.