Can't place the Picker on beside text when 'flexDirection' is row.

[lightning331]

trafficstars

My example code:

...
  render() {
    return (
      <View style={styles.container}>
        <Text>Height</Text>
        <Text style={styles.result_text}>170</Text>
        <Picker
          selectedValue={this.state.unit}
          style={{height: 50, width: 100}}
          itemStyle={{textAlign: 'left', fontSize: 14}}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({unit: itemValue})
          }>
          <Picker.Item label="cm" value="cm" />
          <Picker.Item label="feet, inches" value="feet" />
        </Picker>
      </View>
    );
...
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
}

• Screenshot

[hakkikonu]

try to wrap <Picker> component with <View> component

[jainkuniya]

Can you try this

 <View
        style={{
          flexDirection: "row",
          alignItems: "center",
        }}
      >
        <Text>Language:</Text>
        <PickerIOS
          style={{ flex: 1 }}
          mode="dialog"
          itemStyle={{ fontWeight: "bold", color: "#ff0000" }}
          selectedValue={this.state.language}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ language: itemValue })
          }
        >
          <PickerIOS.Item label="Java" value="java" />
          <PickerIOS.Item label="JavaScript" value="js" />
        </PickerIOS>
      </View>

[x-ji]

Is there a solution for Android?

I tried

const Task = ({route}) => (
  <ScrollView>
    <View
      style={tw`flex flex-row justify-between items-center bg-white border border-gray-200`}
    >
      <Text>Task state</Text>
      <Picker>
        <Picker.Item label="NEXT" value="NEXT" />
        <Picker.Item label="INPROGRESS" value="INPROGRESS" />
      </Picker>
    </View>
  </ScrollView>
);

and launched the app in Android, which looks like this. But the problem is that clicking on the picker results in nothing, i.e. the selections don't show up.

[x-ji]

I made it work according to this: https://stackoverflow.com/a/42851316/1460448. Setting flex:.5 on both the Text and the Picker was the key.