React native her ekranda aynı görüntü elde etmek, nasıl responsive yaparım ?

merhaba, ben full stack web dev'dim fakat full stack'e çevirmek için react native öğrendim. sadece responsive konusunda problemlerim var.

mesela aşağıda responsive yapabilmek,her ekranda aynı şekikde gösterebilmek için ne yapabilirim ? çok teşekkürler şimdiden

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        flexDirection: "column",
        justifyContent: "space-evenly",
    },
    headerContainer:
    {
        alignItems: "center"
    },
    image: {
        margin: 50,
        height: 200,
        width: 200,
    },
    mainText: {
        color: "#FEFEFE",
        fontSize: 17,
        fontWeight: "bold"
    },
    buttonContainer: {
        alignItems: "center"
    },
    button: {
        borderRadius: 50,
        height: 60,
        width: 300,
        backgroundColor: "#6949FD"
    },
    buttonText: {
        color: "#FEFEFE",
        padding: 20,
        textAlign: "center",
        fontSize: 18,
        fontWeight: "bold"
    },
    icon: {
        marginRight: 10, // Add margin to separate the icon from the image
    },
    iconContainer: {
        marginRight: 330, // Add margin to separate the icon from the image
        flexDirection: "row"
    },
    iconText: {
        color: "#fefefe",
        marginTop: 5,
        fontSize: 15,
        fontWeight: "bold"
    }
})

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: '5%', 
    },
    image: {
        marginVertical: '5%',
        height: '20%',
        width: '40%', 
    },
    mainText: {
        color: '#FEFEFE',
        fontSize: 15,
        fontWeight: 'bold',
        textAlign: 'center',
        marginVertical: '3%', 
    },
    button: {
        borderRadius: 50,
        height: 50,
        width: '70%',
        backgroundColor: '#6949FD',
        alignItems: 'center',
        justifyContent: 'center',
        marginVertical: '5%',
    },
    buttonText: {
        color: '#FEFEFE',
        fontSize: 16,
        fontWeight: 'bold',
        textAlign: 'center',
        padding: '3%', 
    },
    iconContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginVertical: '3%',
    },
    iconText: {
        color: '#fefefe',
        fontSize: 14, 
        fontWeight: 'bold',
        marginLeft: '2%',
    },
});

Dismensions("window").width
tercih edilen bir yöntem değil mi hocam ?

Neden olmasın;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: windowWidth * 0.05,
    },
     // diÄŸer stil
    image: {
        marginVertical: windowWidth * 0.05,
        height: windowWidth * 0.2,
        width: windowWidth * 0.4,
    },
     // diÄŸer stil
    mainText: {
        // diÄŸer stil
        fontSize: windowWidth * 0.04,
        marginVertical: windowWidth * 0.03,
    },
     // diÄŸer stil
    button: {
        // diÄŸer stil
        height: windowWidth * 0.1,
        width: windowWidth * 0.7
        // diÄŸer stil
    },
     // diÄŸer stil
    iconContainer: {
        // diÄŸer stil
        marginVertical: windowWidth * 0.03
    },
});

burada height: windowWidth diyor, burada bunun windowHeight olması gerekmez mi ? ya da neden marginVertical winwodWidth ile hesaplanıyor, windowHeight ile hesaplanmıyor. Edit, düz chat GPT yaptırmışsınız, hiç aklıma gelmemişti bu saolun