0.0.9 • Published 6 years ago
react-native-swipetimepicker v0.0.9
react-native-swipetimepicker
A simple swipe time picker component. Allows to be fully customizable.
Installation
React Native >= 0.49
yarn add react-native-swipetimepickerAttributes
| Prop | Description | Default |
|---|---|---|
string backgroundColor | Specifies the background color of the component | #828186 |
string borderColor | Specifies the border color of the component | undefined |
number borderWidth | Specifies the border width of the component | undefined |
number borderRadius | Specifies the border radius of the component | 3 |
string textColor | The text color used when strings are rendered | #ffffff |
number fontSize | The font size of the text | auto |
string fontFamily | The font family for the text | undefined |
object style | A standard style object that is applied to the main view | undefined |
object styleHours | A standard style object that is applied to the hours box | undefined |
object styleMinutes | A standard style object that is applied to the minutes box | undefined |
object styleAMPM | A standard style object that is applied to the AMPM box | undefined |
number size | The size of the hour and minute box. | 100 |
number sizeAMPM | The size of the AMPM box. | 60% |
array customHours | An array containing custom hours definitions. | 120 |
array customMinutes | An array containing custom minute definitions. | 120 |
bool is24 | Indicates 24h or 12h time format | false |
number spacing | Spacing between each box | 5 |
number minuteMultiplier | The multiplier to be used for minutes. Refer to the examples below. | 1 |
any time | A Date Object or String indicating the to be used initial time. | undefined |
Events
| Prop | Description |
|---|---|
onChange | Executed when the time was changed. |
The onChange event returns the following data structure:
{
"hour": (integer) the value of the hour,
"minute": (integer) the value of the minute,
"ampm": (boolean) TRUE for PM and FALSE for AM,
"text": (string) A prepared time string, e.g. 12:15AM or 17:30
"time": (date) A JavaScript date object containing the time,
"timevalue": (timestamp) The timestamp value of the time
}Using the Minute Multiplier
The Minute Multiplier is a powerful number allowing to set various minute abstractions.
Examples:
A minuteMultiplier of 1 is displaying minutes from 0 - 59.
A minuteMultiplier of 15 is displaying each quarter minute (15, 30, 45)
A minuteMultiplier of 5 is displaying the minutes every 5 minute (5, 10, 15, 20, ...)
Examples
Import the component:
import SwipeTimePicker from 'react-native-swipetimepicker';Simple Example
<SwipeTimePicker
onChange={(time) => console.log(time, time.text)}
/>Initial Time
<SwipeTimePicker
time={new Date()}
onChange={(time) => console.log(time, time.text)}
/><SwipeTimePicker
time={'17:30'}
is24={true}
onChange={(time) => console.log(time, time.text)}
/>Minute Multiplier
<SwipeTimePicker
minuteMultiplier={15}
onChange={(time) => console.log(time, time.text)}
/>Rounded
<SwipeTimePicker
size={120}
borderRadius={120}
backgroundColor={'#5cb85c'}
onChange={(time) => console.log(time, time.text)}
/>Advanced Example
<SwipeTimePicker
minuteMultiplier={5}
size={80}
sizeAMPM={40}
backgroundColor={'red'}
borderColor={'black'}
borderWidth={3}
styleAMPM={{backgroundColor: 'green'}}
spacing: 10,
onChange={(time) => console.log(time, time.text)}
/>