Background border view with up-arrow triangle | React Native - react-native

Question

I need to create the background view like this -
The background view with border must have up-arrow triangle.
This is my current code snippet -
<View style={{ width: '100%', paddingLeft: basePadding, paddingRight: basePadding }}>
<View style={{width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', flex: 1}}>
<View style={{
marginTop: 10,
width: horizScale(30),
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: Colors.fire,
height: 1
}}/>
<View style={{
flex: 1,
marginTop: 10,
marginLeft: horizScale(20),
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: Colors.fire,
height: 1
}}/>
</View>
<View style={{width: '100%', borderLeftWidth: StyleSheet.hairlineWidth, borderRightWidth: StyleSheet.hairlineWidth, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: Colors.fire, backgroundColor: '#FEF6F7', padding: horizScale(20)}}>
<Text style={{color: '#403F41'}}>
{' Test Test Test Test test'}
</Text>
<View style={{ flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start',
marginTop: horizScale(10),
width: '100%'}}>
<TouchableOpacity onPress={() => {
}}
style={{
backgroundColor: Colors.fire,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
height: horizScale(40),
borderRadius: 3,
marginRight: horizScale(10)
}}>
<HeavyText style={{ fontSize: horizScale(14), color: '#FFF' }}>{'CANCEL'}</HeavyText>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
}}
style={{
backgroundColor: primaryColor,
flex: 1,
alignItems: 'center',
marginLeft: horizScale(10),
justifyContent: 'center',
height: horizScale(40),
borderRadius: 3
}}>
<HeavyText style={{ fontSize: horizScale(14), color: '#FFF' }}>{'RE-BOOK'}</HeavyText>
</TouchableOpacity>
</View>
</View>
</View>

Answer 1

Add 2 triangle one for background color and one for border color
Complete code
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
export default class Dashboard extends Component {
render() {
return (
<View style={styles.box}>
<View style={styles.triangle} />
<View style={styles.triangle2} />
</View>
);
}
}
const styles = StyleSheet.create({
box: {
width: 300,
height: 100,
backgroundColor: "#fef6f7",
position: "relative",
margin: 50,
borderColor: "red",
borderWidth: 1
},
triangle: {
width: 10,
height: 10,
position: "absolute",
top: -10,
left: 20,
borderLeftWidth: 10,
borderLeftColor: "transparent",
borderRightWidth: 10,
borderRightColor: "transparent",
borderBottomWidth: 10,
borderBottomColor: "red"
},
triangle2: {
width: 10,
height: 10,
position: "absolute",
top: -10,
left: 21,
borderLeftWidth: 9,
borderLeftColor: "transparent",
borderRightWidth: 9,
borderRightColor: "transparent",
borderBottomWidth: 9,
borderBottomColor: "#fef6f7"
}
});

Answer 2

JSX:
<View style={styles.box}>
<View style={styles.triangle}>
</View>
Styling:
box:{
width:100,
height:100,
backgroundColor:"lightblue",
position:"relative"
},
triangle:{
width:10,
height:10,
position:"absolute",
top:-10,
left:20,
borderLeftWidth:10,
borderLeftColor:"transparent",
borderRightWidth:10,
borderRightColor:"transparent",
borderBottomWidth:10,
borderBottomColor:"red"
}
Here is the result:
You can change size of the triangle by playing with width and height. Also, if you want to change location, try playing with top and left properties of triangle.

Answer 3

Here are examples for top, right, bottom and left arrows in css. To convert to react native css, just change the properties to camel case. If you are using styled-components, you can use it as is.
Top Arrow:
.topArrow {
border-top-width: 0px;
border-top-color: transparent;
border-right-width: 80px;
border-right-color: transparent;
border-bottom-width: 160px;
border-bottom-color: green;
border-left-width: 80px;
border-left-color: transparent;
border-style: solid;
height: 0px;
width: 0px;
}
<div class="topArrow"></div>
Right Arrow:
.rightArrow {
border-top-width: 80px;
border-top-color: transparent;
border-right-width: 0px;
border-right-color: transparent;
border-bottom-width: 80px;
border-bottom-color: transparent;
border-left-width: 160px;
border-left-color: green;
border-style: solid;
height: 0px;
width: 0px;
}
<div class="rightArrow"></div>
Bottom Arrow:
.bottomArrow {
border-top-width: 160px;
border-top-color: green;
border-right-width: 80px;
border-right-color: transparent;
border-bottom-width: 0;
border-bottom-color: transparent;
border-left-width: 80px;
border-left-color: transparent;
border-style: solid;
height: 0px;
width: 0px;
}
<div class="bottomArrow"></div>
Left Arrow:
.leftArrow {
border-top-width: 80px;
border-top-color: transparent;
border-right-width: 160px;
border-right-color: green;
border-bottom-width: 80px;
border-bottom-color: transparent;
border-left-width: 0px;
border-left-color: transparent;
border-style: solid;
height: 0px;
width: 0px;
}
<div class="leftArrow"></div>