badge.js

function Badge({ title }) {
  const [discount, off] = title.split(' ')
  return (
    <View style={{ margin: 10 }}>
      <View style={badgeStyle.box3} />
      <View style={badgeStyle.box2} />
      <View style={badgeStyle.box1} />
      <View style={badgeStyle.main}>
        <Text style={{ color: "white", fontWeight: 'bold' }}>{discount}</Text>
        <Text style={{ color: "white", fontWeight: 'bold' }}>{off}</Text>
      </View>
    </View>
  );
}

const badgeStyle = StyleSheet.create({
  box3: {
    height: 40,
    width: 40,
    position: "absolute",
    backgroundColor: "red",
    borderRadius: 4,
    transform: [
      {
        rotate: "67.5deg",
      },
    ],
  },
  box2: {
    height: 40,
    width: 40,
    borderRadius: 4,
    backgroundColor: "red",
    position: "absolute",
    transform: [
      {
        rotate: "22.5deg",
      },
    ],
  },
  box1: {
    height: 40,
    width: 40,
    borderRadius: 4,
    backgroundColor: "red",
    position: "absolute",
    transform: [
      {
        rotate: "45deg",
      },
    ],
  },
  main: {
    height: 40,
    width: 40,
    borderRadius: 4,
    backgroundColor: "red",
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden'
  },
});

<Badge title="50% off"/>