How to make a view with curved triangle arrow in react native

I want to make a view something like this

But I am not able to achieve this

What I achieve is

![enter image description here] (https://i.sstatic.net/Ivzxy1Wk.png)

The code which I have made till now is

const Coachmark = () => {
  return (
    <View style={styles.container}>
      <View style={[styles.coachmark, styles.coachmarkTop]}>
        <Text style={styles.text}>Got a code,Enter it here now</Text>
      </View>

      <View
        style={
          styles.topTriangleMarker
        }></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
  },
  coachmark: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    elevation: 5,
    shadowColor: '#232323',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.8,
    shadowRadius: 8,
  },
  text: {
    color: 'black',
    fontSize: 16,
  },
  topTriangleMarker: {
    position: 'absolute',
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderLeftWidth: 30,
    borderRightWidth: 30,
    borderBottomWidth: 30,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'white',
    top: -20,
    right: 60,
    transform: [{ rotate: '360deg' }],
    elevation: 5,
  },

});

Can anyone help make the view with an arrow with shadow and the arrow should be curved.