microsoft / microsoft/react-native-windows

Animated.diffClamp does not account for diff in NativeAnimated

Open
#9,252 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Animation bug 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

In the NativeAnimatedModule, Animated.diffClamp is implemented as a simple clamp on the value. This is not the intent of the Animated.diffClamp node. Animated.diffClamp should add the difference between the previous value and the current value to the current value and clamp that. NativeAnimated only clamps the current value.

Steps To Reproduce
  1. Add a simple example to RNTester for Animated.diffClamp, e.g.:
  {
    title: 'Opacity with diffClamp',
    render: function (): React.Node {
      return (
        <Tester type="timing" config={{duration: 4000}}>
          {(anim) => (
            <Animated.View
              style={[
                styles.block,
                {
                  opacity: Animated.diffClamp(
                    anim.interpolate({
                      inputRange: [0, 0.5, 1],
                      outputRange: [0, 1, 0],
                    }),
                    0,
                    0.5,
                  ),
                },
              ]}
            />
          )}
        </Tester>
      );
    },
  },
  1. Run the example
  2. The diffClamp should add the diff to the current value, so you should see this animation run slightly faster than the configured 4 seconds (given the diff is added or subtracted from the value).
  3. Since NativeAnimated only clamps the value, the animation starts animating opacity from 0.5 back to 0 at around the 75% mark, whereas the JS driver starts reducing the opacity much sooner.
Expected Results

The NativeAnimated behavior should match the JS driver behavior.

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/145266370-ae33ecf6-0a67-4905-b837-9891d16a9974.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 in the NativeAnimatedModule implementation and use the RNTester Animated.diffClamp example from the reproduction steps. Compare the native result with the JS driver behavior, including the changing input value and clamp bounds. Done means NativeAnimated.diffClamp matches the JS driver's animation behavior, with the RNTester example demonstrating the fix.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.