ribbon banner for react native

1import React, {useEffect, useState, useRef} from 'react';
2import {
3  Text,
4  View,
5  Dimensions,
6  Image,
7  Animated,
8  StyleSheet,
9} from 'react-native';
10
11export default function BadgeRibbon(props) {
12  return (
13    <View>
14      <View
15        style={{
16          width: 120,
17          padding: 10,
18          paddingLeft: 20,
19          justifyContent: 'center',
20          alignItems: 'center',
21          backgroundColor: '#1CCD75',
22          height: 40,
23          borderTopRightRadius: 3,
24          borderBottomRightRadius: 3,
25        }}>
26        <Text style={{color: '#FFF', fontWeight: 'bold'}}>{props.text}</Text>
27      </View>
28      <View
29        style={{
30          width: 0,
31          height: 0,
32          backgroundColor: 'transparent',
33          borderStyle: 'solid',
34          borderRightWidth: 20,
35          borderTopWidth: 20,
36          borderRightColor: 'transparent',
37          borderTopColor: '#232F3B',
38          transform: [{rotate: '90deg'}],
39        }}
40      />
41    </View>
42  );
43}
44

1   <View>
2      <View
3        style={{
4          width: 120,
5          padding: 10,
6          paddingLeft: 20,
7          justifyContent: 'center',
8          alignItems: 'center',
9          backgroundColor: 'red',
10          height: 40,
11          borderTopRightRadius: 3,
12          borderBottomRightRadius: 3,
13        }}>
14        <Text style={{color: '#FFF', fontWeight: 'bold'}}>Overview</Text>
15      </View>
16      <View
17        style={{
18          width: 0,
19          height: 0,
20          backgroundColor: 'transparent',
21          borderStyle: 'solid',
22          borderRightWidth: 20,
23          borderTopWidth: 20,
24          borderRightColor: 'transparent',
25          borderTopColor: 'red',
26          transform: [{rotate: '90deg'}],
27        }}
28      />
29    </View>