Change background color of picker component

[ip883]

Hi,
I would like to change the background color of the modal picker dialog () to black.

I already tried

ThemeManager.setComponentForcedTheme('Picker', (props, context) => { return { backgroundColor: 'black', }; });

and

ThemeManager.setComponentForcedTheme('Dialog', (props, context) => { return { backgroundColor: 'black', }; });

but it didn't change the background color of the picker where I can choose between the different options. How would I change the color?

Thanks!

[matjua17]

Hi,

You can customize the picker component through listProps and topBarProps Props.

topBarProps: https://wix.github.io/react-native-ui-lib/docs/components/overlays/Modal/Modal.TopBar
listProps: FlatListProps

Code snippet:

<Picker
  topBarProps={{
    containerStyle: { backgroundColor: 'black' },
    titleStyle: { color: 'white' },
    cancelButtonProps: { iconStyle: { tintColor: 'white' } },
  }}
  listProps={{
    style: { backgroundColor: 'black' },
  }}
>
{...}
</Picker>

[LazyAfternoons]

Thank you @matjua17, what about the useWheelPicker prop though? How can I customize that modal and specifically the color of the highlighted list item which is purple by default?

Thanks.

EDIT: By looking at the source code it doesn't seem like any style is applied when rendering the wheel, except for the title and the doneLabel properties from topBarProps.

[matjua17]

Yes, unfortunately no style props are passed to the wheelpicker component when using useWheelPicker prop.

[LazyAfternoons]

Yes, unfortunately no style props are passed to the wheelpicker component when using useWheelPicker prop.

I see, thank you.

[jjjkkkjjj]

NOTE

You can also change whole background color by setting overlayBackgroundColor in modalProps

<Picker
    ...
    customPickerProps={{
                  modalProps: {
                    overlayBackgroundColor: 'black'
                  },
                }}
/>