How can i code the below shape in React Native? - react-native

Question

Click to See the Image
Note: The curved space should be transparent.

Answer 1

use react-native-svg to get this shape
snack: https://snack.expo.io/#ashwith00/juicy-tortilla
here is the example:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Svg, Path } from 'react-native-svg';
const SIZE = 250;
const RADVALUE = SIZE - 40;
export default function App() {
return (
<View style={styles.container}>
<View style={styles.traingleCorner}>
<Svg
width={`${SIZE}`}
height={`${SIZE}`}
fill="red"
strokeWidth={1}
viewBox={`0 0 ${SIZE} ${SIZE}`}>
<Path
d={`M0 0L ${SIZE} 0L${SIZE} ${SIZE}Q${RADVALUE} ${
SIZE - RADVALUE
} 0 0 `}
/>
</Svg>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
traingleCorner: {
width: SIZE,
height: SIZE,
},
coloredPart: {
flex: 1,
backgroundColor: 'red',
},
uncoloredPart: {
...StyleSheet.absoluteFillObject,
borderBottomLeftRadius: SIZE,
backgroundColor: '#ecf0f1',
},
});