react-native-spk-time-picker

1.0.3 • Public • Published

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

Avatar Ticket

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

Avatar Ticket

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.

Package Sidebar

Install

npm i react-native-spk-time-picker

Weekly Downloads

2

Version

1.0.3

License

ISC

Unpacked Size

17.2 kB

Total Files

5

Last publish

Collaborators

  • rodrigospk