How can we design Arrow card in react-native - css

Question

I am developing one sample application, in this application need to require Arrow card it is used to offer's showing cards.
I tried react-native shapes based , but i didn't get the out put.
Suppose if offered text increased automatically the arrow design shape also incremented
Here this is my Code:
<View style={styles.container}>
<View style={{ flex: 0.1, backgroundColor: "blue" }} />
<View
style={{
flex: 0.9,
backgroundColor: "green",
justifyContent: "center",
alignItems: "center"
}}
>
<View style={styles.baseTop} />
<View style={styles.baseBottom} />
</View>
</View>
baseTop: {
borderBottomWidth: 35,
borderBottomColor: "red",
borderLeftWidth: 50,
borderLeftColor: "transparent",
borderRightWidth: 50,
borderRightColor: "transparent",
height: 0,
width: 0,
left: 0,
top: -35,
position: "absolute"
},
baseBottom: {
backgroundColor: "red",
height: 55,
width: 100
}
This I need like this type of image here this is referenced Image:

Answer 1

That is how I implemented nearly same like as your image.
import React, { Component } from 'react';
import { Text, View,StyleSheet } from "react-native";
export default class App extends Component {
render() {
return (
<View style={{flex:1}}>
<View
style={styles.wrapper}>
<View style={styles.rectangle}><Text>6</Text> <Text>tens</Text> </View>
<View style={styles.rectangle}><Text>6</Text> <Text>ones</Text> </View>>
<View style={styles.triangle}></View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
wrapper: {
flexDirection: "row",
justifyContent: "flex-start",
flex: 0.2,
alignItems: "center",
paddingLeft: 29,
paddingTop: 0,
marginTop: 0
},
rectangle: {
width: 50,
backgroundColor: "yellow",
margin: 0,
justifyContent: "center",
alignItems: "center",
height: 52,
borderColor:"black"
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 27,
borderRightWidth: 27,
borderBottomWidth: 43,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor:"yellow",
transform: [
{ rotate: '90deg' }
],
margin: 0,
marginLeft: -6,
borderWidth: 0,
borderColor:"black"
}
});
Expo link https://snack.expo.io/rycpKiAe7

Answer 2

You could make a flex square, rotate it using Transform, and absolute position it to the proper place.
Or you can use react-native-svg and create an SVG, then position it accordingly.