Animated components with 'fadeIn' animation making views behind them visible in android but working fine in iOS | React Native

Question

I am new to animations in react native. I implemented animations in different parts of my app in two ways, one was through the react-native-animatable library and the other was through React Native's own Animated

The problem I encountered is this, with fade in animations on iOS devices and simulators the animation works without any issues and even when fading in the views behind the animating view aren't visible, however on android devices and emulators, the animated views become somewhat translucent, making it so that if there are any views behind them, they become somewhat visible for the duration of the animation. After the animation is complete things become normal.

This happens for both the methods of animation that I used in my app.

An example of the code is shared below, I am using this component to render chat bubble like view for a specific purpose, however in android while this bubble is animating/fading in, the 'bubble' looks translucent and the part of the 'tail' view that is suposed to hide behind the 'bubble' view becomes visible for the duration of the animation, whereas in iOS even when fading in the part of the 'tail' that is supposed to be behind the 'bubble' doesn't become visible.

<Animatable.View
      animation={'fadeIn'}
      duration={1500}
      style={[
        styles.container,
        chatSide == 'right' && {justifyContent: 'flex-end'},
      ]}>
      <View
        style={[
          styles.bubble,
          {
            backgroundColor:
              chatSide == 'left'
                ? 'rgba(247,247,248,1)'
                : 'rgba(120, 198, 216, 1)',
          },
        ]}>
        <Text style={styles.text}>{replaceKeys(text)}</Text>
      </View>
      <View style={chatSide == 'left' ? styles.tailLeft : styles.tailRight} />
    </Animatable.View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  bubble: {
    backgroundColor: 'rgba(247,247,248,1)',
    borderRadius: moderateScale(30),
    padding: moderateScale(15),
    marginBottom: moderateScale(20),
  },
  text: {
    fontFamily: Fonts.regular,
    fontSize: moderateScale(16),
    color: 'rgba(0,0,0,1)',
  },
  tailRight: {
    width: 20, // Adjust the length of the tail
    height: 10, // Adjust the height of the tail
    borderTopWidth: moderateScale(10),
    borderTopColor: 'rgba(120, 198, 216, 1)',
    borderRightWidth: moderateScale(10),
    borderRightColor: 'transparent',
    transform: [{rotate: '50deg'}],
    position: 'absolute',
    bottom: 0,
    right: 0,
    marginBottom: moderateScale(20),
  },
  tailLeft: {[enter image description here](https://i.stack.imgur.com/W7jjD.png)
    width: 20, // Adjust the length of the tail
    height: 10, // Adjust the height of the tail
    borderBottomWidth: 10,
    borderBottomColor: 'rgba(247,247,248,1)',
    borderRightWidth: 10,
    borderRightColor: 'transparent',
    transform: [{rotate: '120deg'}],
    position: 'absolute',
    bottom: 1,
    left: 0, // Adjust the left position of the tail
    marginBottom: moderateScale(20),
  },
});

I have attached images to better show what's happening Android iOS