Styling a React Native picker to align with text input

Question

I'm trying to align a picker where the user selects a phone country code with a text input where the user enters the phone number. I'm using the NativeBase component but I assume this is similar with the standard React Native component.

<View style={{ flex: 1, flexDirection: 'row' }}>
  <View style={{ flex: 0.2 }}>
    <Picker note selectedValue={this.state.phoneCountry}
      onValueChange={value => {this.setState({ phoneCountry = value })}}>
      <Picker.Item label="US +1" value="us" />
      // other items ....
    </Picker>
  </View>
  <View style={{ flex: 0.8 }}>
    <Input keyboardType='number-pad' onChangeText={text => {this.state.phone = text}} />
  </View>
</View>

This is what the output looks like (including the previous input field and labels for better view):

The issue that I have is that in the picker, there is a padding that makes the text not align with the input that's side-by-side to it. It also seems that the text is centered in the picker. I tried changing the styles on both the picker in the items to change the textAlign, padding and margin but none of these seem to be the source of the issue since changing them doesn't move the text within the picker.

Can you please share screenshot how it looks like? – Nirmalsinh Rathod Jan 19 '19 at 07:03 — Nirmalsinh Rathod, Jan 19 '19 at 07:03
Done, added a screenshot for context – wizplum Jan 19 '19 at 07:13 — wizplum, Jan 19 '19 at 07:13

score 0 · Answer 1 · answered Jan 19 '19 at 16:06

To align Text in picker Item, you should use textAlign property of itemStyle like below:

<View style={{ flex: 1, flexDirection: 'row' }}>
        <View style={{ flex: 0.2 }}>
          <Picker
            itemStyle={{ color: 'red', textAlign: 'left' }}
            selectedValue={this.state.phoneCountry}
            onValueChange={value => { this.setState({ phoneCountry : value }) }}>
            <Picker.Item label="US +1" value="us" />
          </Picker> 
          </View>
      </View>

just to help you I tried this code and below is the output:

Styling a React Native picker to align with text input

1 Answers1