CODEWITHSUNDEEP
react-nativeflexbox
Marklar
Marklar

Reputation: 1267

How to align text and Picker in React Native

How do we align a Text to be next to an Input in React Native? In the image below the Text is in the top left but the Picker seems to have padding or margin applied. I tried other solutions with flex but also ran into this problem

incorrect alignment of text and picker

Upvotes: 2

Views: 21014

Answers (3)

Faizan Vekariya
Faizan Vekariya

Reputation: 1

<View style={styles.Container}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <View style={{flex:.5}}>
    <Text>Placeholder</Text>
  </View>
  <View style={{flex:.5}}>
    <Picker itemStyle={{textAlign:"left"}}>
      <Picker.Item label="Java" value="java"/>
      <Picker.Item label="JavaScript" value="js"/>
    </Picker>
  </View>
</View>

This worked for me.

Upvotes: 0

JainZz
JainZz

Reputation: 612

I have a similar problem with the picker. Give equal flex for both text and picker(eg: parent have flex: 1 and give flex: 0.5 to both text and picker ). Better to give height and width to the picker according to your screen size. I think you didn't give flexDirection(row) to that the parent View. And also give height and width for items to the picker.

Sample code for giving style to picker:

    <Picker
        style={styles.picker}
        mode="dropdown"
        itemStyle={styles.itemStyle}>
            <Item label="1 Hr" value="1" />
            <Item label="4 Hrs" value="4" />
            <Item label="8 Hrs" value="8" />
            <Item label="16 Hrs" value="16" />
            <Item label="24 Hrs" value="24" />
    </Picker>

Styles:

itemStyle: {
    fontSize: 15,
    height: 75,
    color: 'black',
    textAlign: 'center',
    fontWeight: 'bold'
  }
picker: {
    width: 100
  },

Its working for me.

Thanks.

Upvotes: 3

vinayr
vinayr

Reputation: 11234

This works for me - 

  <View style={styles.Container}>
    <View style={{flexDirection: 'row', alignItems: 'center'}}>
      <View style={{flex:.5}}>
        <Text>Placeholder</Text>
      </View>
      <View style={{flex:.5}}>
        <Picker>
          <Picker.Item label="Java" value="java"/>
          <Picker.Item label="JavaScript" value="js"/>
        </Picker>
      </View>
    </View>
  </View>

You can change the flex values according to your needs.

Upvotes: 3

Related Questions