React-native-limit-timepicker NPM

react-native-limit-timepicker

React Native Limit Timepicker is a library that provides a LIMITABLE and CUSTOMIZABLE timepicker component for React Native applications.

Features

Smooth Animated Timepicker
Can limit the minimum time and maximum time in scroll picker
Easy to use
Consistent look and feel on iOS and Android
Customizable font size, colors and animation duration
Implemented with typescript

If you love this library, and want to support it, let's give us a star, you will be a ray of sunshine in our lives 🥰

Getting started

npm install react-native-limit-timepicker --save

yarn add react-native-limit-timepicker

Timepicker Props

Props	Params	isRequire	Description
disabled	boolean	No	Disable the scrollable of Timepicker
customHourData	Array<ItemT = string \| number>	No	String or number array of the hour (Ex: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11)
customMinutesData	Array	No	String or number array of the minute (Ex: 0, 30)
customPeriodData	Array	No	String or number array of the minute (Ex: 'am, 'pm')
renderTextHour	(data: ItemT) => string	No	Customize the text of the hour item
renderTextMinute	(data: ItemT) => string	No	Customize the text of the minute item
renderTextPeriod	(data: ItemT) => string	No	Customize the text of the period item
onChangeHour	(value: ItemT	undefined, index: number) => void	No	Called when the hour's momentum scroll ends (scroll which occurs as the ScrollView glides to a stop)
onChangeMinute	(value: ItemT	undefined, index: number) => void	No	Called when the minute's momentum scroll ends (scroll which occurs as the ScrollView glides to a stop)
onChangePeriod	(value: ItemT	undefined, index: number) => void	No	Called when the period's momentum scroll ends (scroll which occurs as the ScrollView glides to a stop)
time	Date	No	Set default time
minDate	Date	No	the minimum date can selected
maxDate	Date	No	the maximum date can selected
containerStyle	ViewStyle	No	Styling for view container
scrollHourStyle	ViewStyle	No	Styling for hour scroll View
scrollMinuteStyle	ViewStyle	No	Styling for minute scroll View
scrollPeriodStyle	ViewStyle	No	Styling for period scroll View
highlightColor	String	No	Border color for top and bottom centered item in scroll timepicker container
highlightBorderWidth	Number	No	Border width for top and bottom line selected in scroll timepicker container
hourTextStyle	TextStyle	No	Styling for hour text
minuteTextStyle	TextStyle	No	Styling for minute text
periodTextStyle	TextStyle	No	Styling for period text
activeItemTextStyle	TextStyle	No	Styling for selected text
itemHeight	Number	No	Customize item height in each scroll container
wrapperHeight	Number	No	Customize wrapper height of scroll container
wrapperBackground	String	No	Customize background color of scroll container

Timepicker example

  import React, { useState } from 'react';
  import { View } from 'react-native';
  import TimePicker from 'react-native-limit-timepicker';

  const TimePickerComponent = () => {
    return (
      <View style={styles.container}>
        <TimePicker
          customMinutesData={[0, 15, 30, 45]}
          onChangeHour={value => console.log('hour: ', value)}
          onChangeMinute={value => console.log('minute: ', value)}
          onChangePeriod={value => console.log('period: ', value)}
          minDate={new Date()}
          time={new Date()}
        />
      </View>
    );
  };

  export default TimePickerComponent;

  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
      padding: 16,
    },
  });