Animated.View with shadow props

[zibs]

I'm trying to do a simple Animated.View fade in with some shadow props:

<Animatable.View
            animation="fadeInUpBig"
            duration={500}
            useNativeDriver
            onAnimationEnd={this.fadeOut}
            ref={bubble => {
              this.bubble = bubble;
            }}
            style={[
              {
                borderRadius: 100,
                height: 48,
                width: 224,
                flex: 1,
                borderWidth: 1,
                backgroundColor: 'white',
                borderColor: bubbleColor,
                ...Platform.select({
                  ios: {
                    shadowColor: 'rgba(0,0,0, .25)',
                    shadowOffset: { height: 4, width: 2 },
                    shadowOpacity: 1,
                    shadowRadius: 2
                  },
                  android: {
                    elevation: 2
                  }
                })
              }
            ]}>

On Android this works fine, and the shadow is applied properly, but it doesn't seem to be working on iOS. On iOS it seems like the shadowOffset is not being applied - although the shadowColor seems to be applying.

Any thoughts?

[itsbjoern]

I just came across this exact same problem and haven't really seen anyone suggest a fix or workaround. What you can do to solve it is to wrap everything inside of your Animatable into another View and apply the shadow to that one.

<Animatable.View> 
   <View style={{ shadowOffset: {width: 4, height: 4} }}>
       <YourOtherView />
   </View>
</Animatable.View> 

It works like a charm for me, I hope that solution helps anyone else who also stumbles across this.

[micimize]

I needed to animate shadowOffset, so I added/published a fix for this to @micimize/react-native-animatable for anyone in urgent need of this functionality.

The implementation is a bit inelegant, and there are some other changes as well that I threw in for my own convenience (mainly distributing a compiled build for react-native-web) so I want to clean it up before submitting an actual PR.

[zoobibackups]

shadowOffset: {width: 4, height: 4}

+1

[apapalillo]

Is this still an issue today?