React Native ,why can't I align picker item to right in android platform? - react-native

Question

I tried to find the solution for ages , but it's still none working! Below is how I wrote:
<View style = {[ {flex: 0.7} ]}>
<Picker
selectedValue={this.state.selectedGender}
onValueChange={this.onValueChange.bind(this, 'selectedGender')}
>
<Item label="Please select gender" value=""/>
<Item label="Male" value="M" />
<Item label="Female" value="F" />
</Picker>
</View>

Answer 1

If you want to change the style of the picker items on Android, you have to change native code.
You'll have to add your style in android/app/src/main/res/values/styles.xml.
To change the picker container
Here I set, the background to null so there is not the down arrow on the left.
<style name="SpinnerStyle" parent="#android:style/Widget.Spinner">>
<item name="android:background">#null</item>
</style>
To change the selected item style
Here I set the items to be centered, the color font to be dark gray and the font size to 16.
<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:gravity">center</item>
<item name="android:textColor">#373737</item>
<item name="android:textSize">16dp</item>
</style>
To change the drapdown items
Just as, the selected item, I want the dropdown items to have the same style.
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:gravity">center</item>
<item name="android:textColor">#373737</item>
<item name="android:textSize">16dp</item>
</style>
Finally
Once, you have set your styles for every element of the picker. You have to add the style to the general App theme.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:spinnerStyle">#style/SpinnerStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
...
</style>
Hope it helps !