Why is the modal view not appearing for mobile browser? - reactjs

Question

am using React native web and I have a Modal view as follows:
(am quoting only the return part as mostly it is a design related issue)
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<View
style={{
backgroundColor: 'white',
height: '400px',
width: '450px',
}}>
<Text
style={{
fontFamily: 'Roboto',
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
padding: 20,
}}>
{name}
</Text>
<View
style={{
borderBottomColor: '#18D0E4',
borderBottomWidth: 1,
}}
/>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: '5%',
padding: 20,
margin: '5%',
}}>
{reminder == 6 && toggle == 6 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Image
source={Images.circle}
style={{
height: 15,
width: 15,
marginTop: '2%',
paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
marginLeft: 5,
}}>
Set Different reminder
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => reminderSet()}>
<Image
source={Images.circle_o}
style={{
height: 15,
width: 15,
marginTop: '2%',
paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
marginLeft: 5,
color: '#000',
}}>
Set Different reminder
</Text>
</TouchableOpacity>
)}
{vaccinatedOn == 1 && toggle == 1 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Image
source={Images.circle}
style={{
height: 15,
width: 15,
marginTop: '2%',
// paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
marginLeft: 5,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => vaccinationSet()}>
<Image
source={Images.circle_o}
style={{
height: 15,
width: 15,
marginTop: '2%',
// paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
marginLeft: 5,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
)}
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<DatePicker selected={date} onChange={(date) => setDate(date)} />
</View>
</View>
</View>
<View
style={{
flexDirection: 'row',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
width: '82%',
paddingTop: 20,
}}>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderRightColor: '#C0C0C0',
borderRightWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
onPress={() => navigation.goBack()}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#000',
}}>
Cancel
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderLeftColor: '#C0C0C0',
borderLeftWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
onPress={() => SaveData(id)}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#000',
}}>
OK
</Text>
</TouchableOpacity>
</View>
</View>
</View>
the web view is appearing as follows:
However, as soon as I switch to mobile view, the modal disappears like follows:
Kindly let me know, where I have gone wrong, any lead would be appreciated, thank you in advance.
Let me know if anything else is required.

Answer 1

<View style={{ height: "100vh", width: "100vw" }}> should be added at Root to make it responsive over all platforms