change to dynamic position CSS - css

Question

I have created a box modal but in that all the width, height, position is given by static numbers. I tried giving dynamic(like using percentage) values so that it can adjust in any screen type. But not able to that.
Doing this for mobile app.
Doing this for mobile app.
Can someone please help me in this. Thanks in advance
Code:
import React from "react";
import { Button, Image, StyleSheet, Text, View } from "react-native";
function App() {
return (
<View style={styles.app}>
<View style={styles.box}>
<View style={styles.lcircle}></View>
<View style={styles.rcircle}></View>
<View style={styles.selectSquare}>SELECT</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
app: {
marginHorizontal: "auto",
// maxWidth: 500,
paddingTop: 100
},
box: {
borderColor: "#B9EBC8",
height: 160,
width: 180,
borderWidth: 2
},
lcircle: {
height: 15,
width: 30,
borderWidth: 2,
// borderRadius: 30 30 0 0,
transform: [{ rotate: "90deg" }],
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
borderRightColor: "#B9EBC8",
borderTopColor: "#B9EBC8",
borderLeftColor: "#B9EBC8",
borderBottomColor: "#FFFFFF",
backgroundColor: "#FFFFFF",
position: "absolute",
top: "50%",
left: -10
},
rcircle: {
height: 15,
width: 30,
borderWidth: 2,
// borderRadius: 30 30 0 0,
transform: [{ rotate: "-90deg" }],
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
borderRightColor: "#B9EBC8",
borderTopColor: "#B9EBC8",
borderLeftColor: "#B9EBC8",
borderBottomColor: "#FFFFFF",
backgroundColor: "#FFFFFF",
position: "absolute",
top: "50%",
left: 155.5
},
selectSquare: {
height: 40,
width: 100,
borderWidth: 2,
borderColor: "#B9EBC8",
backgroundColor: "#FFFFFF",
position: "absolute",
left: 40,
top: 135,
display: "flex",
justifyContent: "center",
alignItems: "center",
color: "#008C00"
}
});
export default App;