Skip to content

Latest commit

 

History

History
147 lines (107 loc) · 3.9 KB

README.md

File metadata and controls

147 lines (107 loc) · 3.9 KB
Raw

react-native-swipetimepicker

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

alt text

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

alt text

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