Background border view with up-arrow triangle | 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.