react-native-picker-select icon indicating copy to clipboard operation
react-native-picker-select copied to clipboard

Vertical Alignment of RNPickerSelect

Open Deblob12 opened this issue 4 years ago • 1 comments

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

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

});

Deblob12 avatar Dec 29 '20 06:12 Deblob12

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

DaviGn avatar Apr 14 '21 13:04 DaviGn