react-native-picker-select
react-native-picker-select copied to clipboard
Vertical Alignment of RNPickerSelect
Describe the bug
The Alignment of the picker select is not correct vertically as opposed to using TextInput
To Reproduce
Steps to reproduce the behavior:
Not applicatble
Expected behavior
The text should be centered
Screenshots
Additional details
- Device: iPhone 11
- OS: iOS 14.2
- react-native-picker-select version: 8.04
- react-native version: 0.63.4
- expo sdk version: n/a
Reproduction and/or code sample
<View style={{ flex: 1, alignItems: 'center' }}>
<View style={{
flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: 294, height: 34, borderColor: 'white', borderWidth: 3, borderRadius: 30,
}}
>
<Image
source={Email}
style={{
marginTop: 3, marginLeft: 30, marginRight: 10, borderWidth: 0,
}}
/>
<RNPickerSelect
placeholder={{label: "Select a University", value:""}}
onValueChange={(value) => setUniversity(value)}
useNativeAndroidPickerStyle={false}
items={allUniversities}
style={{ ...pickerSelectStyles }}
/>
</View>
</View>
const pickerSelectStyles = StyleSheet.create({
inputIOS: {
textAlign: 'left',
color: 'white',
justifyContent: 'center',
display: 'flex',
alignItems:'center',
fontFamily: 'Roboto',
},
});
I solved this issue using viewContainer in styles. Here's my code, it centralizes placeholder to vertical center:
viewContainer: { flex: 1, paddingLeft: 24, paddingRight: 24, justifyContent: 'center', }, inputIOSContainer: { height: '100%', justifyContent: 'center', }