react-native-swipetimepicker

A simple swipe time picker component. Allows to be fully customizable.

Installation

React Native >= 0.49

yarn add react-native-swipetimepicker

Attributes

| 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)}
/>