Package Exports

react-native-spk-time-picker
react-native-spk-time-picker/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-spk-time-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-spk-time-picker

The component is a time selector. Allows you to select: hour, minutes and format (AM/PM). and get those selected values.

Installation

To install use the following commands:

npm install react-native-spk-time-picker

yarn add react-native-spk-time-picker

Simple Picker Component

Simple Usage

import TimePicker from react-native-spk-time-picker;

export default function App() {
 return (
    <View style={styles.container}>
      <TimePicker
        getTime={(values) => { console.log(values) }}
      />      
    </View >
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10
  }
});

Custom Time Picker Component

Custom Usage

import TimePicker from react-native-spk-time-picker;

export default function App() {
 return (
    <View style={styles.container}>
      <TimePicker
        currentHour={12}
        currentMinutes={6}
        currentFormat={1}
        primaryColor="#4d4dff"
        arrowButtonStyle={{ width: 50, height: 50, borderRadius: 25, borderColor: "#4d4dff", padding: 0 }}
        textStyle={{ fontSize: 50 }}
        iconSize={30}
        radioButtonText={{ fontSize: 20 }}
        selectButtonStyle={{ backgroundColor: '#4d4dff', width: '100%' }}
        selectButtonTextStyle={{ color: '#fff' }}
        selectButtonText={"Seleccionar"}
        getTime={(values) => { console.log(values) }}
      />    
    </View >
  )
}

Props

prop	Type	Description
currentHour	Integer	This value corresponds to the current time selected in the component, its value can vary between (currentHour >= 0 && currentHour <= 12)
currentMinutes	Integer	This value corresponds to the current minute value selected in the component, its value can vary between ((currentMinutes >= 0 && currentMinutes <= 59))
currentFormat	Integer	This value corresponds to the format value selected in the component, its value can vary between (0 = AM / 1 = PM).
primaryColor	string	Component Primary Color. 'rgba(20, 164, 172, 0.2)' "#fff"
arrowButtonStyle	Object	Style of the elements (arrow buttons) of the component. { width: 50, height: 50, borderRadius: 25, borderColor: "#4d4dff", padding: 0 }
textStyle	Object	Style of the hour, minute and separator symbol (:) { fontSize: 50 }
iconSize	Integer	Action buttons arrow icon size.
radioButtonText	Object	Radio button elements text style. { fontSize: 20 }
selectButtonStyle	Object	Time selection button style. { backgroundColor: '#4d4dff', width: '100%' }
selectButtonTextStyle	Object	Time selection button text style. { color: '#fff' }
selectButtonText	string	Time selection button text.
getTime	Function	function to obtain values currently selected in the component.