My React Native modal isn't working and I can't find why - react-native

Question

I'm not great with react native, and I'm having trouble getting a modal to pop up. It's meant to be like a warning, and then you click the button "I understand" to continue. Thanks, in the future :D
I've been following a tutorial on how to make a React Native app when I get stuck on something, but this part I wasn't able to find an answer. I'm relatively new to react native, and this is my first attempt on creating an app. It would be great to get help :)
Here's what I have so far (app.js is the only file I have yet):
import React, { useState } from 'react';
import { Button, Modal, SafeAreaView, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
export default function App() {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.topButton}>
<Text style={styles.text}>
Favorites
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => setModalVisible(true)} style={styles.button}>
<Text style={styles.text}>
Memes
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.text}>
Jokes
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.text}>
Yo Mama Jokes
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.text}>
Cute Pictures
</Text>
</TouchableOpacity>
<Modal
visible={modalVisible}
animationType="fade">
style={styles.modal}
<Button title="I understand" visible={modalVisible} onPress={() => setModalVisible(false)}/>
</Modal>
<StatusBar style="auto" />
</SafeAreaView>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 10,
backgroundColor: '#0f0117',
},
topButton: {
backgroundColor: "dodgerblue",
borderRadius: 15,
alignContent: 'center',
alignItems: 'center',
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
marginTop: 10,
marginBottom: 50,
marginLeft: 10,
marginRight: 10,
},
button: {
backgroundColor: "dodgerblue",
borderRadius: 15,
alignContent: 'center',
alignItems: 'center',
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10,
},
text: {
color: '#ffffff',
fontSize: 30,
},
modal: {
backgroundColor: "#0f0117",
marginTop: 15,
marginBottom: 15,
marginLeft: 15,
marginRight: 15,
},
});**

Answer 1

Replace your modal code with this one
<Modal
visible={modalVisible}
animationType="fade"
style={styles.modal}>
<Button title="I understand" visible={modalVisible} onPress={() => setModalVisible(false)}/>
</Modal>
Also you forgot to import StatusBar from react-native.

Answer 2

It may have something to do with your styling. For styles.modal, try
modal: {
backgroundColor: "#0f0117",
marginTop: 15,
marginBottom: 15,
marginLeft: 15,
marginRight: 15,
position: "absolute"
top: "20%" # You can try different values here along with bottom, left, and right properties
},