'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,
}),
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|