Problem with placing a pressable text in react native - react-native

Question

I am working on a react native application and I was dealing with Modal and Pressable components, in fact the problem I got is not an error or a bug but I was trying to place a pressable text at the very right down side of the screen but I am struggling with styling a little bit so if anyone can give me a hand in this I would be so grateful.
this the code I wrote for the pop up form component:
import React from 'react';
import {View, Text, Modal, StyleSheet, Pressable, Alert} from 'react-native';
const PopUpModal = ({visible, onPress})=>{
return(
<View style={styles.container}>
<Modal
animationType="slide"
transparent={true}
visible={visible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.container}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hello World!</Text>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={onPress}
>
<Text style={styles.textStyle}>Cancel</Text>
</Pressable>
</View>
</View>
</Modal>
</View>
)
}
const styles = StyleSheet.create({
container:{
width: "100%",
height : "100%"
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 5,
padding: 35,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button: {
display: "flex",
borderRadius: 2,
padding: 10,
flexDirection:"row-reverse",
width: 65,
backgroundColor: "#051316",
},
buttonClose: {
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center",
alignItems: "flex-end"
},
modalText: {
marginBottom: 15,
flexDirection: "row-reverse"
}
})
export default PopUpModal
and this is what it looks like as an output of the above code example
output pic

Answer 1

Put your Pressable inside a View with the style property flexDirection:"row-reverse"
<View style={{flexDirection:"row-reverse"}}>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={onPress}
>
<Text style={styles.textStyle}>Cancel</Text>
</Pressable>
</View>