React Native Modal crashes app on load - react-native

Question

I'm trying to create a small request box that pops up from the bottom of the screen to let a user confirm a reservation. A mockup of what that could look like is below. After some research, a modal seemed like the way to go.
The Problem
Starting the app with a <Modal /> freezes the app on the home screen. Loading the modal when needed (in the code below) crashes the app with no error.
Code
Component rendering the <Model /> (called as <RequestTeacherPopup />)
// #flow
import React from 'react'
import { ScrollView, View } from 'react-native'
...
export default class RequestScreen extends React.Component<Props, {nextSeminar: DateTime, teachers: []}> {
constructor (props: Props) {
super(props)
...
this.state = {
nextSeminar: nextSeminar,
teachers: null,
requestVisibility: false,
requestedTeacher: null
}
}
...
render () {
var teacherList = []
if (this.state.teachers) {
for (let teacherItem of this.state.teachers) {
if (teacherItem.key !== this.props.profile.defaultSeminar) {
let teacher: Teacher = teacherItem.value
let teacherPic: {uri: string} = ('picture' in teacher) ? { uri: teacher.picture } : null
teacherList.push(
<ListItem
roundAvatar
avatar={teacherPic}
onPressRightIcon={
function () {
this.setState({
requestVisibility: true,
requestedTeacher: teacher
})
}.bind(this)
}
key={teacherItem.key}
title={`${teacher.firstName} ${teacher.lastName}`}
subtitle={`${teacher.taughtCourses} | Room ${teacher.room}`} />
)
}
}
}
return (
<View style={styles.mainContainer}>
<ScrollView>
<List>
{teacherList}
</List>
{
(this.state.requestVisibility)
? (<RequestTeacherPopup
requestedTeacher={this.state.requestedTeacher}
onFinish={() => this.setState({ requestVisibility: false })} />)
: null
}
</ScrollView>
</View>
)
}
}
RequestTeacherPopup Component
// #flow
import React, { Component } from 'react'
import { View, Image, Text } from 'react-native'
import { Divider, Overlay } from 'react-native-elements'
import Modal from 'react-native-modal'
...
class RequestTeacherPopup extends Component<{isVisible: boolean, requestedTeacher: Teacher, onFinish: () => void}> {
state = {
markedDates: this.getDaysInMonth(DateTime.local().month, DateTime.local().year, DISABLED_DAYS),
calVisiblity: false,
requestedDate: null,
requestedDay: null
}
...
render () {
return (
<Modal
style={Styles.bottomModal}
isVisible
onSwipe={this.handleRequest}
swipeDirection='up' >
...
</Modal>
)
}
}
The problem still occurs when the <Modal /> is not passed any children, and I have tried both the built in modal and the react-native-modal package from npm.
Thanks for any help!

Answer 1

Hello while showing or closing any modal,
you have use setTimeout(()=>{},miliseconds)
modal is an external window of the screen that covers the whole screen.