search

wix / react-native-ui-lib

UI Components Library for React Native
https://wix.github.io/react-native-ui-lib/
MIT License
6.57k stars 714 forks source link

Can't set the picker's modal background color. #3111

Closed king960 closed 2 months ago

king960 commented 5 months ago

Description

It is not possible to change the picker's modal colour, because in PickerItemsList you use '$backgroundDefault' that always falls back into white colour. <View bg-$backgroundDefault style={wrapperContainerStyle} useSafeArea={useSafeArea}>

Related to

Steps to reproduce

Steps to reproduce the behavior:

  1. Create a picker
  2. Open the picker and see that the background is white.

Expected behavior

If there's an option to specifically set the overlay color, then it should work.

Actual behavior

pickerModalProps={{overlayBackgroundColor: 'red'}} has no effect

More Info

You can confirm that the overlayBackgroundColor will work if you do: Colors.loadSchemes({ light: { $backgroundDefault: 'transparent', }, dark: { $backgroundDefault: 'transparent' } });

Code snippet

<Picker pickerModalProps={{overlayBackgroundColor: 'red'}} label={'test'} value={'test} onChange={(value) => {}} items={{label: 'test', value: ''}} />

Screenshots/Video

Environment

Affected platforms

adids1221 commented 2 months ago

Hi @king960 , First of all it's isn't a bug, the Modal overlay background is visible when using Dialog mode. When using Picker as Modal there is no overlay background since the Modal covers all the screen. What you asked for is a feature, Iv'e created this PR to add background color prop to the Picker which will override the PickerItemList background color.