'React Native Picker Change Overlay Color And Prevent Text Cut

currently i'm using https://github.com/react-native-picker/picker library
But i got some problem, my placeholder text is cutted and i want to change the overlay background color
I tried a lot of code like flexwrap, backgroundcolor etc but still not working
The placeholder is still cutted from (--- Select Sizes ---) to (--- Select ...)
Also how to change the gray color of the overlay to white colour?
And can i prevent user to select the placeholder item?

Here is the code:

<SelectInput
    dataValue={product.sizes}
    placeHolder="--- Select Sizes ---"
    width={themes.responsiveWidth(150)}
    height={themes.responsiveWidth(40)}
    fontSize={14}
/>

Picker Code:

<View style={styles.pickerWrapper(width, height, fontSize, fontBold)}>
      <Picker
        dropdownIconColor={colors.black}
        style={styles.pickerStyles(fontSize, fontBold)}
        selectedValue={selectedValue}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}>
        <Picker.Item
          label={placeHolder}
          value={placeHolder}
          style={styles.pickerStyles(fontSize, fontBold)}
        />
        {dataValue.map((item, index) => (
          <Picker.Item
            label={item}
            value={item}
            style={styles.pickerStyles(fontSize, fontBold)}
          />
        ))}
      </Picker>
</View>

Picker Style:

  pickerWrapper: (width, height) => ({
    justifyContent: 'center',
    width: width,
    height: height,
    backgroundColor: colors.white,
    borderRadius: 10,
  }),
  pickerStyles: (fontSize, fontBold) => ({
    fontSize: fontSize ? RFValue(fontSize, MobileHeightUI) : 14,
    fontFamily: fontBold
      ? themes.fonts.primary.bold
      : themes.fonts.primary.regular,
  }),

Placeholder Cutted Overlay Colour



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source