rmc-picker@5.0.10

React Mobile Picker Component(web and react-native)

/* tslint:disable:no-console */
import MultiPicker from '../src/MultiPicker';
import Picker from '../src/Picker';
import * as React from 'react';
import { View } from 'react-native';

export class Test extends React.Component<any, any> {
  state = {
    value: ['1', '11'],
  };

  onChange = (value) => {
    console.log('onChange', value);
    this.setState({
      value,
    });
  }

  render() {
    return (
      <View style={{ borderWidth: 2, padding: 10 }}>
        <MultiPicker
          style={{
            flexDirection: 'row' as any,
            alignItems: 'center' as any,
            paddingTop: 10,
            paddingBottom: 10,
          }}
          selectedValue={this.state.value}
          onValueChange={this.onChange}
        >
          <Picker style={{ flex: 1 }}>
            <Picker.Item value="1">one</Picker.Item>
            <Picker.Item value="2">two</Picker.Item>
            <Picker.Item value="3">three</Picker.Item>
            <Picker.Item value="4">four</Picker.Item>
            <Picker.Item value="5">five</Picker.Item>
            <Picker.Item value="6">six</Picker.Item>
            <Picker.Item value="7">seven</Picker.Item>
            <Picker.Item value="8">eight</Picker.Item>
          </Picker>
          <Picker style={{ flex: 1 }}>
            <Picker.Item value="11">eleven</Picker.Item>
            <Picker.Item value="12">twelve</Picker.Item>
            <Picker.Item value="13">thirteen</Picker.Item>
            <Picker.Item value="14">fourteen</Picker.Item>
            <Picker.Item value="15">fifteen</Picker.Item>
            <Picker.Item value="16">sixteen</Picker.Item>
            <Picker.Item value="17">seventeen</Picker.Item>
            <Picker.Item value="18">eighteen</Picker.Item>
          </Picker>
        </MultiPicker>
      </View>
    );
  }
}

export const Demo = Test;
export const title = 'multi-picker';
Fork me on GitHub