Skip to content

Commit c4f8551

Browse files
adblfacebook-github-bot
authored andcommitted
Allow shadowOpacity and shadowRadius in NativeAnimated
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> I want to animate `shadowOpacity` style property with Native Animated (`useNativeDriver: true`). This is useful for example in an ios-like navigation transition where the shadow fades in with the view that is sliding in from the side. Code comment for `STYLES_WHITELIST` says: _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)._ so I just added `shadowOpacity` (and `shadowRadius` too because why not?). Before this change, setting `shadowOpacity` (or `shadowRadius`) to an `AnimatedValue` (with `useNativeDriver: true`) would throw the error: `Style property 'shadowOpacity' is not supported by the native animated module`. After adding `shadowOpacity` (and `shadowRadius`), there is no error. The animation looks correct so it seems to be working. I also tried setting a ridiculously large `shadowRadius` and could see that working too. Please advice on any further testing I should do. [IOS] [ENHANCEMENT] [NativeAnimated] - Allow `shadowRadius` and `shadowOpacity` as NativeAnimated style properties. Closes #16603 Differential Revision: D6195364 Pulled By: hramos fbshipit-source-id: a55630df43df3c8f9db9921dab0bfbf925b6a09f
1 parent 2546c95 commit c4f8551

File tree

1 file changed

+3
-0
lines changed

1 file changed

+3
-0
lines changed

Libraries/Animated/src/NativeAnimatedHelper.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,9 @@ const API = {
147147
const STYLES_WHITELIST = {
148148
opacity: true,
149149
transform: true,
150+
/* ios styles */
151+
shadowOpacity: true,
152+
shadowRadius: true,
150153
/* legacy android transform properties */
151154
scaleX: true,
152155
scaleY: true,

0 commit comments

Comments
 (0)