Animated.Value.interpolate results in NaN when output is in radians

[j-piasecki]

Description

When Animated.Value.interpolate is used with radians as the output units, like so:

interpolate({
  inputRange: [0, 2],
  outputRange: ['0rad', '6.28rad'],
});

it returns NaN instead of the correct values.

It happens on both, the old and the new architecture.

React Native Version

0.72.0-rc.0

Output of npx react-native info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 331.55 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
    Watchman: 2023.01.16.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/jakubpiasecki/.rvm/gems/ruby-2.7.6/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 24, 26, 28, 29, 30, 31, 32, 33
      Build Tools: 26.0.3, 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
      System Images: android-28 | Google ARM64-V8a Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a, android-33 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9514443
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.14 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.0 => 0.71.0
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Use the code below. It uses degrees to show how it should look, replace outputRange: ['0deg', '360deg'] with the version commented out to see it broken.

Snack, code example, screenshot, or link to a repository

import React, { Component } from 'react';
import { Animated } from 'react-native';

export default class Example extends Component {
  private rotation: Animated.Value;
  private rotationDegrees: Animated.AnimatedInterpolation<number>;

  constructor(props: Record<string, unknown>) {
    super(props);
    this.rotation = new Animated.Value(0);

    this.rotationDegrees = this.rotation.interpolate({
      inputRange: [0, 2],
      outputRange: ['0deg', '360deg'],
      // outputRange: ['0rad', '6.28rad'],
    });

    Animated.timing(this.rotation, {
      toValue: 2,
      duration: 2000,
      useNativeDriver: true,
    }).start();

    this.rotationDegrees.addListener(console.log);
  }

  render() {
    return (
      <Animated.View
        style={{
          transform: [{ rotate: this.rotationDegrees }],
          width: 200,
          height: 200,
          backgroundColor: 'red',
        }}
      />
    );
  }
}

[javache]

Is this happening on both iOS and Android? Can you provide a failing test in https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/__tests__/Interpolation-test.js that exposes this?

We have a test similar to this use-case which passes:

    const interpolation = createInterpolation({
      inputRange: [0, 1],
      outputRange: ['-100.5deg', '100deg'],
    });

Or is this happening at a later layer where we convert degrees into radians?

[j-piasecki]

It's happening on both Android and iOS.
I tried to add the test, but the exact same config from the code above works in the tests.

I'm not sure at what point exactly it breaks, but it works when useNativeDriver is set to false, so it probably explains why the test would pass (also, native driver with degrees also works, it breaks when using radians).

[blakef]

Looks like it just missed inclusion in 0.72.0-RC0.

[redpanda-bit]

Hey @j-piasecki it's working fine for me on both ios and android.

correction: I was able to reproduce on 0.72.0-rc.0. Why was the PR closed without merge?

cc: @javache

[javache]

By default we only merge to master, if you think a fix should be merged in the RC, please comment in the release thread: reactwg/react-native-releases#54