TimerPicker

Overview

TimerPicker is a time period selection component that supports selection of start time and end time.

Code demo

Note: for more information, see Demo.

import React, { Component } from "react";
 import { View, StyleSheet } from "react-native";
 import { TimerPicker } from "tuya-panel-kit";
 
export default class TimerPickerScene extends Component {
  state = {
    startTime: 0,
    endTime: 0,
  };
 
 _handleTimerChange = (startTime, endTime) => {
    this.setState({ startTime, endTime });
  };
 
 render() {
    return (
      <View style={styles.container}>
        <TimerPicker
          title="Time period selection"
          cancelText="Cancel"
          confirmText="Confirm"
          startTime={this.state.startTime}
          endTime={this.state.endTime}
          is12Hours={true}
          onTimerChange={this._handleTimerChange}
        />
      </View>
    );
  }
 }
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 16,
  },
 });

Interaction demo

API

style

Specify the container style to encapsulate timerPicker.

startTime

The start time.

endTime

The end time.

pickerFontColor

The color of the selector font.

disabled

Whether the selector supports gesture operations.

loop

Whether to support loop scrolling of the selector.

is12Hours

Whether it is 12-hour system.

singlePicker

Whether to support the single selector only.

prefixPosition

Prefix position, that is, the position of AM and PM.

onTimerChange

Callback of changing the time period. The following parameters must be entered when calling:

• startTime: the start time.
• endTime: the end time.