Skip to content

Commit

Permalink
Allow color styles to be animated with native driver
Browse files Browse the repository at this point in the history
Summary:
Now that animating color styles using native driver is supported on both Android and iOS, add color styles to the allowlist in NativeAnimatedHelper.

Changelog:
[General][Added] - Allow color styles to be animated using native driver

Reviewed By: mdvacca

Differential Revision: D34148038

fbshipit-source-id: c20dc149b805ec691a3936a77ab130fb4477a4c3
  • Loading branch information
genkikondo authored and facebook-github-bot committed Feb 11, 2022
1 parent f9fa385 commit 201f355
Showing 1 changed file with 23 additions and 5 deletions.
28 changes: 23 additions & 5 deletions Libraries/Animated/NativeAnimatedHelper.js
Original file line number Diff line number Diff line change
Expand Up @@ -234,22 +234,36 @@ const API = {
/**
* Styles allowed by the native animated implementation.
*
* In general native animated implementation should support any numeric property that doesn't need
* to be updated through the shadow view hierarchy (all non-layout properties).
* In general native animated implementation should support any numeric or color property that
* doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
*/
const SUPPORTED_COLOR_STYLES = {
backgroundColor: true,
borderBottomColor: true,
borderColor: true,
borderEndColor: true,
borderLeftColor: true,
borderRightColor: true,
borderStartColor: true,
borderTopColor: true,
color: true,
tintColor: true,
};

const SUPPORTED_STYLES = {
opacity: true,
transform: true,
borderRadius: true,
...SUPPORTED_COLOR_STYLES,
borderBottomEndRadius: true,
borderBottomLeftRadius: true,
borderBottomRightRadius: true,
borderBottomStartRadius: true,
borderRadius: true,
borderTopEndRadius: true,
borderTopLeftRadius: true,
borderTopRightRadius: true,
borderTopStartRadius: true,
elevation: true,
opacity: true,
transform: true,
zIndex: true,
/* ios styles */
shadowOpacity: true,
Expand Down Expand Up @@ -397,6 +411,10 @@ function transformDataType(value: number | string): number | string {

module.exports = {
API,
SUPPORTED_STYLES,
SUPPORTED_COLOR_STYLES,
SUPPORTED_TRANSFORMS,
SUPPORTED_INTERPOLATION_PARAMS,
addWhitelistedStyleProp,
addWhitelistedTransformProp,
addWhitelistedInterpolationParam,
Expand Down

0 comments on commit 201f355

Please sign in to comment.