-
Notifications
You must be signed in to change notification settings - Fork 24.9k
Add support for PlatformColor type of toValue and interpolation outputRange #54450
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
zeyap
wants to merge
2
commits into
facebook:main
Choose a base branch
from
zeyap:export-D86351284
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+137
−32
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…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
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
Example 2:
A nuance here: in the framework js code, usually
AnimatedColorclass will resolve color for each channel (RGBA) and create multipleAnimatedValueinstances. 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
useNativeDriveris turned off.Note that
fromValueis already supported (in ColorAnimatedNode.kt)Differential Revision: D86351284