React native modal does not behave as expected - react-native

Question

I am new to React native. I am using one package called #react-native-community/datetimepicker. I have one button and inside the button I have create one Modal. when user will click the button it will open the modal. My logic works fine but the problem is my modal behave weird. when I open and close the modal one big black-screen pop up all the time. I really don't know how to fix. I followed this Youtube-tutorial for the modal. I share my code in expo-snacks.
This is my all code
import React, { useState } from 'react';
import { Modal, Platform, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import dayjs from 'dayjs';
import DateTimePicker from "#react-native-community/datetimepicker";
export default function App() {
const [date, setDate] = useState(new Date());
const [show, setshow] = useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setshow(Platform.OS === `ios`);
setDate(currentDate);
};
const onCancelPress = () => {
};
const onDonePress = () => {
};
return (
<View style={{marginTop: 20}}>
<TouchableHighlight
activeOpacity={3}
onPress={() => setshow(true)}
>
<View style= {{
"flex": 1,
"marginBottom": 40
}}>
<View>
<Text style={{
"paddingleft": 15,
"paddingTop": 8,
"paddingBottom": 35,
"borderColor": `gray`,
"borderWidth": 1,
"borderRadius": 10,
"fontSize": 20 }}> {dayjs(date).format(`DD/MM/YYYY`)} </Text>
</View>
<Modal
transparent= {true}
animationType="slide"
visible={show}
supportedOrientations={[`portrait`]}
onRequestClose={() => setshow(false)} >
<View style={{ "flex": 1 }}>
<TouchableHighlight
style={{
"flex": 1,
"alignItems": `flex-end`,
"flexDirection": `row`
}}
activeOpacity={1}
visible={show}
onPress={() => setshow(false)}
>
<TouchableHighlight
underlayColor={`#FFFFFF`}
style={{
"flex": 1,
"borderTopColor": `#E9E9E9`,
"borderTopWidth": 1
}}
onPress={() => console.log(`datepicker picked`)}
>
<View
style={{
"backgroundColor": `#FFFFFF`,
"height": 256,
"overflow": `hidden`
}}
>
<View style={{ "marginTop": 20 }}>
<DateTimePicker
value={date}
mode="date"
is24Hour={true}
display="default"
onChange={onChange}
/>
</View>
</View>
</TouchableHighlight>
</TouchableHighlight>
</View>
</Modal>
</View>
</TouchableHighlight>
</View>
);
}

Answer 1

Use TouchableOpacity instead of TouchableHighlight to get rid of that flashing black box.
Working app: Expo Snack
import React, { useState } from 'react';
import {
Modal,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import dayjs from 'dayjs';
import DateTimePicker from '#react-native-community/datetimepicker';
export default function App() {
const [date, setDate] = useState(new Date());
const [show, setshow] = useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setshow(Platform.OS === `ios`);
setDate(currentDate);
};
const onCancelPress = () => {};
const onDonePress = () => {};
return (
<View style={{ marginTop: 30 }}>
<TouchableOpacity activeOpacity={3} onPress={() => setshow(true)}>
<View>
<View>
<Text
style={{
paddingleft: 15,
paddingTop: 8,
paddingBottom: 35,
borderColor: `gray`,
borderWidth: 1,
borderRadius: 10,
fontSize: 20,
}}>
{dayjs(date).format(`DD/MM/YYYY`)}{' '}
</Text>
</View>
<Modal
transparent={false}
animationType="slide"
visible={false}
onRequestClose={() => setshow(false)}>
<View
style={{
flex: 1,
}}>
<TouchableOpacity
style={{
flex: 1,
alignItems: `flex-end`,
flexDirection: `row`,
}}
activeOpacity={0.5}
onPress={() => setshow(false)}>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: `#E9E9E9`,
borderTopWidth: 1,
}}
onPress={() => console.log(`datepicker picked`)}>
<View
style={{
backgroundColor: `#FFFFFF`,
height: 256,
overflow: `hidden`,
}}>
<View style={{ marginTop: 20 }}>
<DateTimePicker
value={date}
mode="date"
is24Hour={true}
display="default"
onChange={onChange}
/>
<Text>hi</Text>
</View>
</View>
</TouchableOpacity>
</TouchableOpacity>
</View>
</Modal>
<View style={{ marginTop: 20 }}>
<DateTimePicker
testID="dateTimePicker"
value={date}
is24Hour={true}
display="default"
onChange={onChange}
/>
</View>
</View>
</TouchableOpacity>
</View>
);
}