Skip to content

Commit 201f355

Browse files
genkikondofacebook-github-bot
authored andcommitted
Allow color styles to be animated with native driver
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
1 parent f9fa385 commit 201f355

File tree

1 file changed

+23
-5
lines changed

1 file changed

+23
-5
lines changed

Libraries/Animated/NativeAnimatedHelper.js

+23-5
Original file line numberDiff line numberDiff line change
@@ -234,22 +234,36 @@ const API = {
234234
/**
235235
* Styles allowed by the native animated implementation.
236236
*
237-
* In general native animated implementation should support any numeric property that doesn't need
238-
* to be updated through the shadow view hierarchy (all non-layout properties).
237+
* In general native animated implementation should support any numeric or color property that
238+
* doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
239239
*/
240+
const SUPPORTED_COLOR_STYLES = {
241+
backgroundColor: true,
242+
borderBottomColor: true,
243+
borderColor: true,
244+
borderEndColor: true,
245+
borderLeftColor: true,
246+
borderRightColor: true,
247+
borderStartColor: true,
248+
borderTopColor: true,
249+
color: true,
250+
tintColor: true,
251+
};
252+
240253
const SUPPORTED_STYLES = {
241-
opacity: true,
242-
transform: true,
243-
borderRadius: true,
254+
...SUPPORTED_COLOR_STYLES,
244255
borderBottomEndRadius: true,
245256
borderBottomLeftRadius: true,
246257
borderBottomRightRadius: true,
247258
borderBottomStartRadius: true,
259+
borderRadius: true,
248260
borderTopEndRadius: true,
249261
borderTopLeftRadius: true,
250262
borderTopRightRadius: true,
251263
borderTopStartRadius: true,
252264
elevation: true,
265+
opacity: true,
266+
transform: true,
253267
zIndex: true,
254268
/* ios styles */
255269
shadowOpacity: true,
@@ -397,6 +411,10 @@ function transformDataType(value: number | string): number | string {
397411

398412
module.exports = {
399413
API,
414+
SUPPORTED_STYLES,
415+
SUPPORTED_COLOR_STYLES,
416+
SUPPORTED_TRANSFORMS,
417+
SUPPORTED_INTERPOLATION_PARAMS,
400418
addWhitelistedStyleProp,
401419
addWhitelistedTransformProp,
402420
addWhitelistedInterpolationParam,

0 commit comments

Comments
 (0)