react-native-clock-interval

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #machine-learning #docker #macos #nodejs #awesome #cli #kubernetes #pytorch #security #mcp

react-native-clock-interval

(★ 8)

React Native Time interval control similar to iOS12 Bedtime picker

react-native-clock-interval Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-clock-interval

React Native Time interval control similar to iOS12 Bedtime picker

![example](https://raw.githubusercontent.com/GamgeeNL/react-native-clock-interval/master/clock-interval.gif)

| react-native |  |
|:------------:|:-----:|
| <0.60 | 1.?.? |
| 0.60+ | 2.?.? |

## Installation

`yarn add react-native-clock-interval @react-native-community/art`

## Usage

```js
import TimeInterval from 'react-native-clock-interval';

<TimeInterval
  disabled={false}
  allowLineDrag={true}
  componentSize={300}
  indicatorSize={40}
  lineWidth={40}
  step={5 /* minutes */}
  lineColor={"green" /* or array of two colors for gradient, eg.: ['gold', 'yellow']*/}
  start={{hour: 22, minute: 0}}
  stop={{hour: 7, minute: 30}}
  onChange={(start, stop) => {/* called on every change, use with caution */}}
  onRelease={(start, stop) => {/* called in the end of interaction */}}
  startIndicator={() => <View>{/* custom indicator layout */}</View>}
  stopIndicator={() => <View>{/* custom indicator layout */}</View>}
  />
```

## License

react-native-clock-interval

react-native-clock-interval Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-clock-interval

react-native-clock-interval Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README