A simple, flexible, performant duration picker for React Native apps
source link: https://reactnativeexample.com/a-simple-flexible-performant-duration-picker-for-react-native-apps/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native Timer Picker ⏰🕰️⏳
A simple, flexible, performant duration picker component for React Native apps 🔥
Great for timers, alarms and duration inputs ⏰🕰️⏳
Works with Expo and bare React Native apps.
Demos 📱
Peer Dependencies 👶
This component will work in your React Native Project without any peer dependencies.
If you want the numbers to fade in/out at the top and bottom of the picker, you will need to install either:
To enable the linear gradient, you need to supply the component as a prop to either TimerPickerModal or TimerPicker.
Installation 🚀
Supports React Native >= 0.59.0 and React >= 16.8.0.
Just run:
npm install react-native-timer-picker
yarn add react-native-timer-picker
Examples 😎
Timer Picker Modal (Dark Mode) 🌚
import { TimerPickerModal } from "react-native-timer-picker";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
string | null
>(null);
return (
<View style={{backgroundColor: "#514242", alignItems: "center", justifyContent: "center"}}>
<Text style={{fontSize: 18, color: "#F1F1F1"}}>
{alarmStringExample !== null
? "Alarm set for"
: "No alarm set"}
</Text>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => setShowPicker(true)}>
<View style={{alignItems: "center"}}>
{alarmString !== null ? (
<Text style={{color: "#F1F1F1", fontSize: 48}}>
{alarmString}
</Text>
) : null}
<TouchableOpacity
activeOpacity={0.7}
onPress={() => setShowPicker(true)}>
<View style={{marginTop: 30}}>
<Text
style={{
paddingVertical: 10,
paddingHorizontal: 18,
borderWidth: 1,
borderRadius: 10,
fontSize: 16,
overflow: "hidden",
borderColor: "#C2C2C2",
color: "#C2C2C2"
}}>
Set Alarm 🔔
</Text>
</View>
</TouchableOpacity>
</View>
</TouchableOpacity>
<TimerPickerModal
visible={showPicker}
setIsVisible={setShowPicker}
onConfirm={(pickedDuration) => {
setAlarmString(formatTime(pickedDuration));
setShowPicker(false);
}}
modalTitle="Set Alarm"
onCancel={() => setShowPicker(false)}
closeOnOverlayPress
LinearGradient={LinearGradient}
styles={{
theme: "dark",
}}
modalProps={{
overlayOpacity: 0.2,
}}
/>
</View>
)
Timer Picker Modal (Light Mode) 🌞
import { TimerPickerModal } from "react-native-timer-picker";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
string | null
>(null);
return (
<View style={{backgroundColor: "#F1F1F1", alignItems: "center", justifyContent: "center"}}>
<Text style={{fontSize: 18, color: "#202020"}}>
{alarmStringExample !== null
? "Alarm set for"
: "No alarm set"}
</Text>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => setShowPicker(true)}>
<View style={{alignItems: "center"}}>
{alarmString !== null ? (
<Text style={{color: "#202020", fontSize: 48}}>
{alarmString}
</Text>
) : null}
<TouchableOpacity
activeOpacity={0.7}
onPress={() => setShowPicker(true)}>
<View style={{marginTop: 30}}>
<Text
style={{paddingVertical: 10,
paddingHorizontal: 18,
borderWidth: 1,
borderRadius: 10,
fontSize: 16,
overflow: "hidden",
borderColor: "#8C8C8C",
color: "#8C8C8C"
}}>
Set Alarm 🔔
</Text>
</View>
</TouchableOpacity>
</View>
</TouchableOpacity>
<TimerPickerModal
visible={showPicker}
setIsVisible={setShowPicker}
onConfirm={(pickedDuration) => {
setAlarmString(formatTime(pickedDuration));
setShowPicker(false);
}}
modalTitle="Set Alarm"
onCancel={() => setShowPicker(false)}
closeOnOverlayPress
LinearGradient={LinearGradient}
styles={{
theme: "light",
}}
/>
</View>
)
Timer Picker with Customisation (Dark Mode) 🌒
import { TimerPicker } from "react-native-timer-picker";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
string | null
>(null);
return (
<View style={{backgroundColor: "#202020", alignItems: "center", justifyContent: "center"}}>
<TimerPicker
padWithNItems={2}
hourLabel=":"
minuteLabel=":"
secondLabel=""
LinearGradient={LinearGradient}
styles={{
theme: "dark",
backgroundColor: "#202020",
pickerItem: {
fontSize: 34,
},
pickerLabel: {
fontSize: 32,
marginTop: 0,
},
pickerContainer: {
marginRight: 6,
},
}}
/>
</View>
)
Timer Picker with Customisation (Light Mode) 🌔
import { TimerPicker } from "react-native-timer-picker";
import { LinearGradient } from "expo-linear-gradient"; // or `import LinearGradient from "react-native-linear-gradient"`
....
const [showPicker, setShowPicker] = useState(false);
const [alarmString, setAlarmString] = useState<
string | null
>(null);
return (
<View style={{backgroundColor: "#F1F1F1", alignItems: "center", justifyContent: "center"}}>
<TimerPicker
padWithNItems={3}
hideHours
minuteLabel="min"
secondLabel="sec"
LinearGradient={LinearGradient}
styles={{
theme: "light",
pickerItem: {
fontSize: 34,
},
pickerLabel: {
fontSize: 26,
right: -20,
},
pickerLabelContainer: {
width: 60,
},
pickerItemContainer: {
width: 150,
},
}}
/>
</View>
)
Props 💅
TimerPicker ⏲️
Prop | Description | Type | Default | Required |
---|---|---|---|---|
onDurationChange | Callback when the duration changes | (duration: { hours: number, minutes: number, seconds: number }) => void |
– | false |
initialHours | Initial value for hours | Number | – | false |
initialMinutes | Initial value for minutes | Number | – | false |
initialSeconds | Initial value for seconds | Number | – | false |
hideHours | Hide the hours picker | Boolean | false | false |
hideMinutes | Hide the minutes picker | Boolean | false | false |
hideSeconds | Hide the seconds picker | Boolean | false | false |
hourLabel | Label for the hours picker | String | h | false |
minuteLabel | Label for the minutes picker | String | m | false |
secondLabel | Label for the seconds picker | String | s | false |
padWithNItems | Number of items to pad the picker with on either side | Number | 1 | false |
disableInfiniteScroll | Disable the infinite scroll feature | Boolean | false | false |
LinearGradient | Linear Gradient Component | expo-linear-gradient.LinearGradient or react-native-linear-gradient.default | – | false |
pickerContainerProps | Props for the picker container | React.ComponentProps<typeof View> |
– | false |
pickerGradientOverlayProps | Props for the gradient overlay | LinearGradientProps | – | false |
styles | Custom styles for the timer picker | CustomTimerPickerStyles | – | false |
Custom Styles 👗
The following custom styles can be supplied to re-style the component in any way. Various styles are applied by default – you can take a look at these here.
Style Prop | Description | Type |
---|---|---|
theme | Theme of the component | “light” | “dark” |
backgroundColor | Main background color | string |
text | Base text style | TextStyle |
pickerContainer | Main container for the picker | ViewStyle |
pickerLabelContainer | Container for the picker’s labels | ViewStyle |
pickerLabel | Style for the picker’s labels | TextStyle |
pickerItemContainer | Container for each number in the picker | ViewStyle |
pickerItem | Style for each individual picker number | TextStyle |
pickerGradientOverlay | Style for the gradient overlay (fade out) | ViewStyle |
TimerPickerModal ⏰
The TimerPickerModal component accepts all TimerPicker props, and the below additional props.
Prop | Description | Type | Default | Required |
---|---|---|---|---|
visible | Determines if the modal is visible | Boolean | – | true |
setIsVisible | Callback to set modal visibility | (isVisible: boolean) => void |
– | true |
onConfirm | Callback when the user confirms the selected time | ({ hours, minutes, seconds }: { hours: number, minutes: number, seconds: number }) => void |
– | true |
onCancel | Callback when the user cancels the selection | () => void |
– | false |
closeOnOverlayPress | Determines if the modal should close on overlay press | Boolean | false | false |
hideCancelButton | Hide the cancel button within the modal | Boolean | false | false |
confirmButtonText | Text for the confirm button | String | Confirm | false |
cancelButtonText | Text for the cancel button | String | Cancel | false |
modalTitle | Title text for the modal | String | – | false |
modalProps | Props for the main modal component | React.ComponentProps<typeof Modal> |
– | false |
containerProps | Props for the main container | React.ComponentProps<typeof View> |
– | false |
contentContainerProps | Props for the content container | React.ComponentProps<typeof View> |
– | false |
buttonContainerProps | Props for the button container | React.ComponentProps<typeof View> |
– | false |
modalTitleProps | Props for the modal title text component | React.ComponentProps<typeof Text> |
– | false |
styles | Custom styles for the timer picker modal | CustomTimerPickerModalStyles | – | false |
Custom Styles 👕
The following custom styles can be supplied to re-style the component in any way. You can also supply all of the styles specified in CustomTimerPickerStyles. Various styles are applied by default – you can take a look at these here.
Style Prop | Description | Type |
---|---|---|
container | Main container’s style | ViewStyle |
contentContainer | Style for the content’s container | ViewStyle |
buttonContainer | Style for the container around the buttons | ViewStyle |
button | General style for both buttons | TextStyle |
cancelButton | Style for the cancel button | TextStyle |
confirmButton | Style for the confirm button | TextStyle |
modalTitle | Style for the title of the modal | TextStyle |
Methods 🔄
TimerPickerModal
reset
– imperative method to reset the selected duration to their initial values.
timerPickerModalRef.current.reset();
License 📝
This project is licensed under the MIT License.
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK