react-native-picker-select
react-native-picker-select copied to clipboard
Using rgba with alpha in backgroundColor causes text to be highlighted
Describe the bug
As mentioned in issues #79 #80, I too am facing the same exact issue. It basically appears only on an iOS device and that too when I set the styling property backgroundColor to use a rgba method with some alpha and not a normal hex starting with a #
To Reproduce
- Go to the screen in your demo's App.js that has a style named
pickerSelectStyles - Change
backgroundColorproperty to usergbamethod with some alpha value, for example:backgroundColor: "rgba(255, 255, 255, 0.6)" - Save the change
- See the buggy output (only in iOS simulator/device)
Expected behavior

[Note: You can ignore other styling props that I have set like bottom border, font family, arrow icon, etc]
Screenshots

Additional details
- Device: [iPhone (any)]
- OS: [N/A]
- react-native-picker-select version: [^7.0.0]
- react-native version: [https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz]
- expo sdk version: [~37.0.3]
Reproduction and/or code sample
https://snack.expo.io/@astiwari/react-native-picker-select
[Note: The behavior of the plugin looks very different than its actual output. Snack seems a little buggy as it doesn't even properly depict the colors that I have used]
Just for your reference, the issue is with the fact that you're probably setting the backgroundColor to the TextInput, instead, you should set on the parent View that's holding the TextInput https://stackoverflow.com/questions/53379387/textinput-placing-an-automatic-highlight-behind-text-react-native