import { StyleSheet, View, TouchableOpacity } from "react-native";
import React from "react";
import BottomSheet from "reanimated-bottom-sheet";
import DateTimePicker from "@react-native-community/datetimepicker";
import Animated from "react-native-reanimated";
export default function TimePicker({ dpRef, adp, idp, setIdp, setDate, time }) {
const renderContent = () => (
<View
style={{
backgroundColor: "white",
padding: 16,
height: 330,
justifyContent: "center",
}}
>
<DateTimePicker
testID="dateTimePicker"
value={time}
mode={"time"}
is24Hour={true}
display="spinner"
maximumDate={new Date(2023, 10, 20)}
onChange={setDate}
/>
</View>
);
return (
<>
{Platform.OS === "ios" && (
<>
<TouchableOpacity
onPress={() => closeBottomSheet()}
style={{
position: "absolute",
top: 0,
bottom: 0,
right: 0,
left: 0,
backgroundColor: "rgba(0,0,0,0.5)",
display: idp ? "flex" : "none",
}}
></TouchableOpacity>
<BottomSheet
ref={dpRef}
snapPoints={[330, -100]}
initialSnap={1}
callbackNode={fall}
enabledGestureInteraction={true}
borderRadius={10}
renderContent={renderContent}
onCloseEnd={() => setIdp(false)}
/>
</>
)}
{adp && (
<DateTimePicker
testID="dateTimePicker"
value={time}
mode={"time"}
is24Hour={false}
display="default"
maximumDate={new Date(2023, 10, 20)}
onChange={setDate}
/>
)}
</>
);
}
const styles = StyleSheet.create({});
import React from "react";
import BottomSheet from "reanimated-bottom-sheet";
import DateTimePicker from "@react-native-community/datetimepicker";
import Animated from "react-native-reanimated";
export default function TimePicker({ dpRef, adp, idp, setIdp, setDate, time }) {
const renderContent = () => (
<View
style={{
backgroundColor: "white",
padding: 16,
height: 330,
justifyContent: "center",
}}
>
<DateTimePicker
testID="dateTimePicker"
value={time}
mode={"time"}
is24Hour={true}
display="spinner"
maximumDate={new Date(2023, 10, 20)}
onChange={setDate}
/>
</View>
);
return (
<>
{Platform.OS === "ios" && (
<>
<TouchableOpacity
onPress={() => closeBottomSheet()}
style={{
position: "absolute",
top: 0,
bottom: 0,
right: 0,
left: 0,
backgroundColor: "rgba(0,0,0,0.5)",
display: idp ? "flex" : "none",
}}
></TouchableOpacity>
<BottomSheet
ref={dpRef}
snapPoints={[330, -100]}
initialSnap={1}
callbackNode={fall}
enabledGestureInteraction={true}
borderRadius={10}
renderContent={renderContent}
onCloseEnd={() => setIdp(false)}
/>
</>
)}
{adp && (
<DateTimePicker
testID="dateTimePicker"
value={time}
mode={"time"}
is24Hour={false}
display="default"
maximumDate={new Date(2023, 10, 20)}
onChange={setDate}
/>
)}
</>
);
}
const styles = StyleSheet.create({});