React Native 聊天气泡为 svg，带阴影

Question

如何在没有伪类的情况下创建这个聊天气泡，将阴影作为 svg 用作地图标记？

我有下面的组件，但是阴影出现在箭头的顶部。我可以将聊天气泡和箭头上的阴影作为一个阴影吗？

const MapPin = ({ price, Icon }: Props) => {
  console.log(Icon);
  return (
    <View style={styles.bubbleContainer}>
      <View style={styles.bubbleContent}>
        <Icon />
        <Text style={styles.bubblePrice}>{price}</Text>
      </View>
      <View style={styles.bubbleArrow} />
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontFamily: fonts.LIGHT,
    fontSize: fonts.FONT_SIZE_MEDIUM,
  },
  bubbleArrow: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 10,
    borderRightWidth: 10,
    borderBottomWidth: 15,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: colors.WHITE,
    transform: [{ rotate: '180deg' }],
    ...Platform.select({
      android: {
        elevation: 3,
      },
      ios: {
        shadowColor: colors.BLACK,
        shadowOpacity: 0.1,
        shadowOffset: { width: -2, height: 0 },
        shadowRadius: 3,
        borderTopWidth: 0,
      },
    }),
  },
  bubbleContent: {
    width: 100,
    height: 85,
    padding: 10,
    justifyContent: 'center',
    backgroundColor: colors.WHITE,
    borderRadius: 5,
    alignItems: 'center',
  },
  bubblePrice: {
    color: colors.GREEN,
    padding: 10,
    fontSize: fonts.FONT_SIZE_MEDIUM,
    fontFamily: fonts.BOLD,
  },
  bubbleContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MapPin;