6

Let's pretend my problem is I want a user to be able to select an amount of apples, and an amount of pears, with one control. I see the picker in the "Timer" section of the clock app bundled with iOS, and I like it.

iOS Timer picker

I want exactly that, except instead of three columns, I want two, and instead of "hours" and "min", I want "apples" and "pears".

So far, I'm able to put two pickers next to each other, which, while not curving the items towards each other slightly as if they were on the same wheel, is good enough for me for my columns problem for now. I'm as yet unable to put titles on the rows, though.

Here's what I have:

  render() {
    let PickerIOSItem = PickerIOS.Item
    return (
      <View style={styles.container}>
        <PickerIOS style={styles.column}>
          <PickerIOSItem value={1} label="0" />
          <PickerIOSItem value={2} label="1" />
          <PickerIOSItem value={3} label="2" />
          <PickerIOSItem value={4} label="3" />
          <PickerIOSItem value={5} label="4" />
        </PickerIOS>
        <PickerIOS style={styles.column}>
          <PickerIOSItem value={1} label="0" />
          <PickerIOSItem value={2} label="1" />
          <PickerIOSItem value={3} label="2" />
          <PickerIOSItem value={4} label="3" />
          <PickerIOSItem value={5} label="4" />
        </PickerIOS>
      </View>
    );
  }

styles.container has display: flex and flex-direction: row, and styles.column has width: 49%.

My garbage attempt

Adam Barnes
  • 2,922
  • 21
  • 27

2 Answers2

1

Wrap it in a <View> and use <Text> with flex:1 should work

<View style={{ display: 'flex', flexDirection: "row" }}>
  <View style={{ flex: 1, flexDirection: 'row',alignItems: 'center' }}>
    <PickerIOS style={{ flex: 1 }}>
      <PickerIOSItem value={1} label="0" />
      <PickerIOSItem value={2} label="1" />
      <PickerIOSItem value={3} label="2" />
      <PickerIOSItem value={4} label="3" />
      <PickerIOSItem value={5} label="4" />
    </PickerIOS>
    <Text>Apples</Text>
  </View>
  <View style={{ flex: 1, flexDirection: 'row',alignItems: 'center' }}>
    <PickerIOS style={{ flex: 1 }}>
      <PickerIOSItem value={1} label="0" />
      <PickerIOSItem value={2} label="1" />
      <PickerIOSItem value={3} label="2" />
      <PickerIOSItem value={4} label="3" />
      <PickerIOSItem value={5} label="4" />
    </PickerIOS>
    <Text>pears</Text>
  </View>
</View>

Output will be something like below

enter image description here

Though I have not focused on design, you can make it according to your need.

Ravi
  • 34,851
  • 21
  • 122
  • 183
1

I recently made a cross platform "Wheel Picker" library which supports multiple columns: https://www.npmjs.com/package/react-native-segmented-picker

Adam McArthur
  • 950
  • 1
  • 13
  • 27