lawnstarter / react-native-picker-select

🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
https://npmjs.com/package/react-native-picker-select
MIT License
1.75k stars 499 forks source link

Vertical Alignment of RNPickerSelect #407

Open Deblob12 opened 3 years ago

Deblob12 commented 3 years ago

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
image

Additional details

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',
  },

});
DaviGn commented 3 years ago

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', }