Animated.View with shadow props

Author: zibsCreated Jul 5, 2017Updated Mar 1, 2024

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

javascript

<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?

Source: oblador/react-native-animatable

View original on GitHub View discussion on GitHub