Skip to content

Conversation

@zeyap
Copy link
Contributor

@zeyap zeyap commented Nov 7, 2025

Summary:

Changelog:

[Android] [Added] Add support for PlatformColor type of toValue and interpolation outputRange

Making this change in order to support animation from and to PlatformColor type, in use cases like below
Example 1:

const animatedColor = useRef(
  new Animated.Color(PlatformColor('android:color/white')),
);
...
Animated.timing(animatedColor.current, {
  toValue: PlatformColor('android:color/darker_gray'),
  duration: 500,
  useNativeDriver: true,
}).start();

Example 2:

const animatedValue = useRef(new Animated.Value(0));
...
backgroundColor: animatedValue.current.interpolate({
    inputRange: [0, 1],
    outputRange: [
      PlatformColor('android:color/white'),
      PlatformColor('android:color/darker_gray'),
    ],
}),

A nuance here: in the framework js code, usually AnimatedColor class will resolve color for each channel (RGBA) and create multiple AnimatedValue instances. However for platform color, instead of directly resolving the PlatformColor by calling native module, we could pass down the color string + channel name to native, and defer to AnimatedNode/Driver on the native side to resolve the actual color value when it's necessary.
But this strategy means PlatformColor toValue/outputRange won't work if useNativeDriver is turned off.

Note that fromValue is already supported (in ColorAnimatedNode.kt)

Differential Revision: D86351284

zeyap added 2 commits November 7, 2025 08:51
…desManager (facebook#54448)

Summary:

## Changelog:

[Internal] [Changed] pass down frameRateListenerCallback from Provider to nativeAnimatedNodesManager

Mistakenly missed this in an earlier commit

Reviewed By: christophpurrer

Differential Revision: D86433598
…tRange

Summary:
## Changelog:

[Android] [Added] Add support for PlatformColor type of toValue and interpolation outputRange

Making this change in order to support animation from and to PlatformColor type, in use cases like below
Example 1:
```
const animatedColor = useRef(
  new Animated.Color(PlatformColor('android:color/white')),
);
...
Animated.timing(animatedColor.current, {
  toValue: PlatformColor('android:color/darker_gray'),
  duration: 500,
  useNativeDriver: true,
}).start();
```

Example 2:
```
const animatedValue = useRef(new Animated.Value(0));
...
backgroundColor: animatedValue.current.interpolate({
    inputRange: [0, 1],
    outputRange: [
      PlatformColor('android:color/white'),
      PlatformColor('android:color/darker_gray'),
    ],
}),
```

A nuance here: in the framework js code, usually `AnimatedColor` class will resolve color for each channel (RGBA) and create multiple `AnimatedValue` instances. However for platform color, instead of directly resolving the PlatformColor by calling native module, we could pass down the color string + channel name to native, and defer to AnimatedNode/Driver on the native side to resolve the actual color value when it's necessary.
But this strategy means PlatformColor toValue/outputRange won't work if `useNativeDriver` is turned off.

Note that `fromValue` is already supported (in ColorAnimatedNode.kt)

Differential Revision: D86351284
@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 7, 2025
@meta-codesync
Copy link

meta-codesync bot commented Nov 7, 2025

@zeyap has exported this pull request. If you are a Meta employee, you can view the originating Diff in D86351284.

zeyap added a commit to zeyap/react-native that referenced this pull request Nov 7, 2025
…tRange (facebook#54450)

Summary:

## Changelog:

[Android] [Added] Add support for PlatformColor type of toValue and interpolation outputRange

Making this change in order to support animation from and to PlatformColor type, in use cases like below
Example 1:
```
const animatedColor = useRef(
  new Animated.Color(PlatformColor('android:color/white')),
);
...
Animated.timing(animatedColor.current, {
  toValue: PlatformColor('android:color/darker_gray'),
  duration: 500,
  useNativeDriver: true,
}).start();
```

Example 2:
```
const animatedValue = useRef(new Animated.Value(0));
...
backgroundColor: animatedValue.current.interpolate({
    inputRange: [0, 1],
    outputRange: [
      PlatformColor('android:color/white'),
      PlatformColor('android:color/darker_gray'),
    ],
}),
```

A nuance here: in the framework js code, usually `AnimatedColor` class will resolve color for each channel (RGBA) and create multiple `AnimatedValue` instances. However for platform color, instead of directly resolving the PlatformColor by calling native module, we could pass down the color string + channel name to native, and defer to AnimatedNode/Driver on the native side to resolve the actual color value when it's necessary.
But this strategy means PlatformColor toValue/outputRange won't work if `useNativeDriver` is turned off.

Note that `fromValue` is already supported (in ColorAnimatedNode.kt)

Differential Revision: D86351284
zeyap added a commit to zeyap/react-native that referenced this pull request Nov 7, 2025
…tRange (facebook#54450)

Summary:

## Changelog:

[Android] [Added] Add support for PlatformColor type of toValue and interpolation outputRange

Making this change in order to support animation from and to PlatformColor type, in use cases like below
Example 1:
```
const animatedColor = useRef(
  new Animated.Color(PlatformColor('android:color/white')),
);
...
Animated.timing(animatedColor.current, {
  toValue: PlatformColor('android:color/darker_gray'),
  duration: 500,
  useNativeDriver: true,
}).start();
```

Example 2:
```
const animatedValue = useRef(new Animated.Value(0));
...
backgroundColor: animatedValue.current.interpolate({
    inputRange: [0, 1],
    outputRange: [
      PlatformColor('android:color/white'),
      PlatformColor('android:color/darker_gray'),
    ],
}),
```

A nuance here: in the framework js code, usually `AnimatedColor` class will resolve color for each channel (RGBA) and create multiple `AnimatedValue` instances. However for platform color, instead of directly resolving the PlatformColor by calling native module, we could pass down the color string + channel name to native, and defer to AnimatedNode/Driver on the native side to resolve the actual color value when it's necessary.
But this strategy means PlatformColor toValue/outputRange won't work if `useNativeDriver` is turned off.

Note that `fromValue` is already supported (in ColorAnimatedNode.kt)

Differential Revision: D86351284
zeyap added a commit to zeyap/react-native that referenced this pull request Nov 7, 2025
…tRange (facebook#54450)

Summary:

## Changelog:

[Android] [Added] Add support for PlatformColor type of toValue and interpolation outputRange

Making this change in order to support animation from and to PlatformColor type, in use cases like below
Example 1:
```
const animatedColor = useRef(
  new Animated.Color(PlatformColor('android:color/white')),
);
...
Animated.timing(animatedColor.current, {
  toValue: PlatformColor('android:color/darker_gray'),
  duration: 500,
  useNativeDriver: true,
}).start();
```

Example 2:
```
const animatedValue = useRef(new Animated.Value(0));
...
backgroundColor: animatedValue.current.interpolate({
    inputRange: [0, 1],
    outputRange: [
      PlatformColor('android:color/white'),
      PlatformColor('android:color/darker_gray'),
    ],
}),
```

A nuance here: in the framework js code, usually `AnimatedColor` class will resolve color for each channel (RGBA) and create multiple `AnimatedValue` instances. However for platform color, instead of directly resolving the PlatformColor by calling native module, we could pass down the color string + channel name to native, and defer to AnimatedNode/Driver on the native side to resolve the actual color value when it's necessary.
But this strategy means PlatformColor toValue/outputRange won't work if `useNativeDriver` is turned off.

Note that `fromValue` is already supported (in ColorAnimatedNode.kt)

Differential Revision: D86351284
zeyap added a commit to zeyap/react-native that referenced this pull request Nov 7, 2025
… outputRange (facebook#54450)

Summary:

## Changelog:

[Android] [Added] Add c++ animated support for PlatformColor type of toValue and interpolation outputRange

Differential Revision: D86350392
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants