React-Native modal doesnt show on IOS and app freezes

When I press a TextInput that is wrapped around a TouchableOpacity tag, I can see it blinking (the touchableopacity effect), but the modal that is supposed to become visible does not appear on IOS, and the app freezes (as if there is an unclickable modal covering the screen, just not visible).

The modal opens fine on android. Other modals open fine on IOS (also when pressing on a TextInput), but not this ModalTimePicker.js file:

import React from "react";
import { styles } from "./GlobalStyles.js";
import {
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  Dimensions,
} from "react-native";

const OPTIONS = [
  ["07:00", "07:15", "07:30", "07:45"],
  ["08:00", "08:15", "08:30", "08:45"],
  ["09:00", "09:15", "09:30", "09:45"],
  ["10:00", "10:15", "10:30", "10:45"],
  ["11:00", "11:15", "11:30", "11:45"],
  ["12:00", "12:15", "12:30", "12:45"],
  ["13:00", "13:15", "13:30", "13:45"],
  ["14:00", "14:15", "14:30", "14:45"],
  ["15:00", "15:15", "15:30", "15:45"],
  ["16:00", "16:15", "16:30", "16:45"],
  ["17:00", "17:15", "17:30", "17:45"],
  ["18:00", "18:15", "18:30", "18:45"],
  ["19:00", "19:15", "19:30", "19:45"],
  ["20:00", "20:15", "20:30", "20:45"],
  ["21:00", "21:15", "21:30", "21:45"],
  ["22:00", "22:15", "22:30", "22:45"],
  ["23:00", "23:15", "23:30", "23:45"],
  ["00:00", "00:15", "00:30", "00:45"],
  ["01:00", "01:15", "01:30", "01:45"],
  ["02:00", "02:15", "02:30", "02:45"],
  ["03:00", "03:15", "03:30", "03:45"],
  ["04:00", "04:15", "04:30", "04:45"],
  ["05:00", "05:15", "05:30", "05:45"],
  ["06:00", "06:15", "06:30", "06:45"],
];
const HEIGHT = Dimensions.get("window").height;

const ModalTimePicker = (props) => {
  
  const onPressItem = (option) => {
    props.changeModalVisibility(false);
    props.setData(option);
  };

  const option = OPTIONS.map((item, index) => {
    return (
      <Text key={index} style={styles.optionOutsideArray}>
        {item.map((insideItem, insideIndex) => {
   
          return (
            <TouchableOpacity
              key={insideIndex}
              onPress={() => onPressItem(insideItem)}
            >
              <Text style={styles.timePickerTextInside}>{insideItem}</Text>
            </TouchableOpacity>
          );
        })}
      </Text>
    );
  });

  return (
    <View
      style={[
        styles.modal,
        {
          alignItems: "center",
          height: HEIGHT,
        },
      ]}
    >
      <ScrollView>
        <TouchableOpacity
          onPress={() => props.changeModalVisibility(false)}
        >
          {option}
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
};

export { ModalTimePicker };

The TextInputs I click on to show the modal are these:

 <SafeAreaView style={styles.container}>
      <KeyboardAwareScrollView>
        <View style={{ minHeight: Dimensions.get("screen").height * 0.8 }}>
          {/* <KeyboardAwareScrollView> */}

          <TouchableOpacity
          // onPress={() => (
            
          // )}
          >
            <Text style={styles.headlineText}>Register your hours!</Text>
          </TouchableOpacity>

          <StatusBar style="auto" />
          {/* --------------------------- ModalTimePicker.js: Start time ------------------------------ */}
          {/* <Text>Enter start time</Text> */}
          <TouchableOpacity
            onPress={() => {
              onDismissSnackBar();

              changeModalVisibility(true, "startTime");
            }}
          >
            <View pointerEvents="none">
              <TextInput placeholder="Select start time" style={styles.input}>
                {chooseStartTime}
              </TextInput>
            </View>
          </TouchableOpacity>

          <Modal
            transparent={true}
            animationType="fade"
            visible={isModalVisible}
            onRequestClose={() => changeModalVisibility(false)}
          ></Modal>
          {/* --------------------------- ModalTimePicker.js: End time ------------------------------ */}

          {/* <Text>Enter end time</Text> */}
          <TouchableOpacity
            onPress={() => {
              onDismissSnackBar();

              changeModalVisibility(true, "endTime");
            }}
          >
            <View pointerEvents="none">
              <TextInput placeholder="Select end time" style={styles.input}>
                {chooseEndTime}
              </TextInput>
            </View>
          </TouchableOpacity>

          <Modal
            transparent={true}
            animationType="fade"
            visible={isModalVisible}
            onRequestClose={() => changeModalVisibility(false)}
          >
            <ModalTimePicker
              changeModalVisibility={changeModalVisibility}
              setData={setTimeData}
            ></ModalTimePicker>
          </Modal>

Im suspecting it could be something to do with either the ScrollView or the fact that Im using the same modal for both startTime and endTime.

because iOS not show 2 modal same time, You can fix it 2 way

• only show 1 modal

• wrap Modal in Modal

   <Modal ...>
      ...
      <Modal ...>
        ...
      </Modal>
   </Modal>