How can I create the curly arrow/tail of a chat bubble in React Native

I am currently making a chat bubble in react-native. Since I am new to react-native I first tried to make the chat bubble on a browser and then tried to replicate the same in react-native. I am struggling to replicate the arrow in react-native. Any ideas/suggestions?

Normal HTML/CSS:

<div><p class="to-me">Hey!</p></div>div {  padding:20px;  justify-self: center;  align-self: center;  text-align: left;  display: flex;  flex-direction: column;  width: 450px;}div p {  font-size: 16px;  line-height: 1.4;  margin: 1px 0;  padding: 8px 17px 6px 13px;  max-width: 380px;  position: relative;  border-radius: 18px;}div p:after {  position: absolute;  content: "";  top: 0;  bottom: 0;  right: 0;  left: 0;  z-index: -1;}div p.to-me {  color: black;  align-self: flex-start;  background-color: #E5E5EA;}div p.to-me:after {  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15.515px' height='17.5px' viewBox='32.484 17.5 15.515 17.5' enable-background='new 32.484 17.5 15.515 17.5'><path fill='#E5E5EA' d='M38.484,17.5c0,8.75,1,13.5-6,17.5C51.484,35,52.484,17.5,38.484,17.5z'/></svg>") left bottom no-repeat;  left: -6px;}

The result:

Image may be NSFW.
Clik here to view.

React-Native Version:

<View style={[styles.balloon, {backgroundColor: '#1084ff'}]}><Text style={{paddingTop: 5, color: 'white'}}>Hey!</Text><View      style={[        styles.arrowContainer,        styles.arrowLeftContainer,      ]}><View style={styles.arrowLeft} /></View></View></View>item: {   marginVertical: 14,   flexDirection: 'row'},itemIn: {    marginLeft: 10},itemOut: {   alignSelf: 'flex-end',   marginRight: 10},balloon: {   maxWidth: scale(250),   paddingHorizontal: 15,   paddingTop: 10,   paddingBottom: 15,   borderRadius: 20,},arrowContainer: {    position: 'absolute',    top: 0,    left: 0,    right: 0,    bottom: 0,    zIndex: -1    // backgroundColor: 'red'},arrowLeftContainer: {    justifyContent: 'center',    alignItems: 'flex-start',    // backgroundColor: 'green'},arrowLeft: {    left: -20,}

The result:Image may be NSFW.
Clik here to view.

I have almost replicated the bubble. Just struggling on the arrow part. Any ideas/suggestions?