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

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,
  },
});**

question from:https://stackoverflow.com/questions/65887142/my-react-native-modal-isnt-working-and-i-cant-find-why

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.