PickerView

Overview

PickerView is a container view that you can choose one from multiple selections. It is usually used in combination with components such as time selection and date selection.

Note: you must specify width and height values for PickerView, otherwise rendering will not work.

Code demo

Note: for more information, see Demo.

Basic selector

One PickerView represents one selector. In the PickerView, selectedValue represents the currently selected value, and onValueChange is the callback function after value changes by sliding.

import _ from "lodash";
 import React, { Component } from "react";
 import { View, StyleSheet, Text } from "react-native";
 import { Picker } from "tuya-panel-kit";
 import ExplorerLayout from "../../components/ExplorerLayout";
 
export default class PickerViewScene extends Component {
  constructor(props) {
    super(props);
    this.state = {
      languages: ["clojure", "elixir", "haskell", "scala"],
      value: "elixir",
    };
  }
 
 _handleChange = (value) => {
    this.setState({ value });
    console.log(value);
  };
 
 renderContent = () => {
    return (
      <View style={styles.pickerContainer}>
        <Text style={styles.tip}>Please Choose Your Favorite Language:</Text>
        <Picker
          style={[styles.picker]}
          itemStyle={styles.pickerItem}
          selectedValue={this.state.value}
          onValueChange={this._handleChange}
        >
          {this.state.languages.map((value) => (
            <Picker.Item key={value} value={value} label={value} />
          ))}
        </Picker>
      </View>
    );
  };
 
 renderPlayground = () => {
    return <View />;
  };
 
 render() {
    return (
      <ExplorerLayout
        renderContent={this.renderContent}
        renderPlayground={this.renderPlayground}
      />
    );
  }
 }

Time selector

The time picker is the most commonly used scene of PickerView, and each selection is a PickerView. The example below implements a 12-hour time selector, which requires 3 PickerViews.

import _ from "lodash";
 import React, { Component } from "react";
 import { View, StyleSheet } from "react-native";
 import { Picker } from "tuya-panel-kit";
 import ExplorerLayout from "../components/ExplorerLayout";
 import ControlNumber from "../components/ControlNumber";
 
export default class PickerViewScene extends Component {
  constructor(props) {
    super(props);
    this.hours = _.times(12, (n) => _.padStart(n === 0 ? 12 : n, 2, "0"));
    this.minutes = _.times(60, (n) => _.padStart(n, 2, "0"));
    this.state = {
      amPm: "AM",
      hour: "12",
      minute: "00",
    };
  }
 
 _handleChange = (key) => (value) => {
    const v = typeof value === "number" ? _.padStart(value, 2, "0") : value;
    this.setState({ [key]: v });
  };
 
 renderContent = () => {
    return (
      <View style={styles.pickerContainer}>
        <Picker
          style={[styles.picker, styles.pickerLeft]}
          itemStyle={styles.pickerItem}
          selectedValue={this.state.amPm}
          onValueChange={this._handleChange("amPm")}
        >
          {["AM", "PM"].map((value) => (
            <PickerView.Item key={value} value={value} label={value} />
          ))}
        </Picker>
        <Picker
          style={[styles.picker, styles.pickerMiddle]}
          itemStyle={styles.pickerItem}
          selectedValue={this.state.hour}
          onValueChange={this._handleChange("hour")}
        >
          {this.hours.map((value) => (
            <PickerView.Item key={value} value={value} label={value} />
          ))}
        </Picker>
        <Picker
          style={[styles.picker, styles.pickerRight]}
          itemStyle={styles.pickerItem}
          selectedValue={this.state.minute}
          onValueChange={this._handleChange("minute")}
        >
          {this.minutes.map((value) => (
            <Picker.Item key={value} value={value} label={value} />
          ))}
        </Picker>
      </View>
    );
  };
 
 renderPlayground = () => {
    return (
      <View>
        <ControlNumber
          min={1}
          max={12}
          title="hour"
          value={+this.state.hour}
          stepValue={1}
          onChange={this._handleChange("hour")}
          onComplete={this._handleChange("hour")}
        />
        <ControlNumber
          min={0}
          max={59}
          title="minute"
          value={+this.state.minute}
          stepValue={1}
          onChange={this._handleChange("minute")}
          onComplete={this._handleChange("minute")}
        />
      </View>
    );
  };
 
 render() {
    return (
      <ExplorerLayout
        renderContent={this.renderContent}
        renderPlayground={this.renderPlayground}
      />
    );
  }
 }

Picker API

• PickerView uses PickerIOS on iOS system. For more information, see PickerIOS.
• The API on the Android system inherits from ViewPropTypes. For more information, see ViewPropTypes.

itemTextColor

The text color of the Picker option.

selectedItemTextColor

The color of the text selected by the Picker option.

dividerColor

Divider color of the Picker option.

visibleItemCount

The number of items in the visible area of Picker.

itemAlign

Alignment method of items of Picker.

textSize

Text size of items of Picker.

loop

Whether to simulate an endless loop of PickerItem.

children

PickerView child element.

Picker.Item API

value

Picker.Item value.

label

Picker.Item label description.