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.