React Native Ribbon

ribbon.js

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import Svg, {
  SvgProps,
  Path,
  Polygon,
  G,
  Rect,
  Text,
  Line,
} from 'react-native-svg';

function SvgComponent(props: SvgProps) {
  const { color } = props;
  return (
    <Svg height="70" width="70">
      <Polygon points="0 0, 0 10, 10 10" fill={color} strokeWidth="0" />
      <Polygon points="0 0, 70 70, 70 40, 30 0" fill={color} strokeWidth="0" />
      <Polygon points="60 60, 60 70, 70 70" fill={color} strokeWidth="0" />
      <G rotation="45" origin="130, -20">
        <Text x="100" y="80" stroke="#600" fill="#600" textAnchor="middle">
          Text
        </Text>
      </G>
    </Svg>
  );
}
export default function App() {
  return (
    <View style={styles.container}>
      <View style={{ backgroundColor: '#ADD8E6', width: 350, height: 200 }}>
        <View style={{ position: 'absolute', top: -10, right: -10 }}>
          <SvgComponent color={'red'} />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});