Time picker in React native expo component #5

Currently reading:
 Time picker in React native expo component #5

tempcp001

Member
LV
0
Joined
Jan 7, 2024
Threads
12
Likes
0
Awards
2
Credits
1,378©
Cash
0$
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({});
 

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.

Tips
Top Bottom