Search code examples
javascriptcssiosreact-nativepicker

Styling react native picker - specifically text alignment (iOS)


I have a picker with full screen width and the text is aligned in the center. I want the text to align to the left but having difficulty.

formPicker:{
    marginTop:10,
    backgroundColor:'#eee',
    alignSelf:'flex-start',
    //alignContent:'flex-start',
    //justifyContent:'flex-start',
    //textAlign:'left'
}

<Picker style={styles.formPicker} selectedValue={selectedValue} onValueChange={this.pickerValueChanged}>
                    {pickerItems}
                </Picker>

enter image description here


Solution

  • In react native picker,label styling in ios is provided itemStyle prop

    <Picker itemStyle={{textAlign:'left'}} selectedValue={selectedValue} onValueChange={this.pickerValueChanged}>
                        {pickerItems}
                    </Picker>
    

    for more information check documentation