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.
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%.
