react-native-limit-timepicker
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

react-native-limit-timepicker

npm version license

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 🥰

Buy Me A Coffee

Getting started

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

or

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
onChangeMinute (value: ItemT undefined, index: number) => void No
onChangePeriod (value: ItemT undefined, index: number) => void No
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,
    },
  });

Support react-native-limit-timepicker <3

Package Sidebar

Install

npm i react-native-limit-timepicker

Weekly Downloads

1

Version

1.2.0

License

MIT

Unpacked Size

125 kB

Total Files

30

Last publish

Collaborators

  • beethedev