React Native Picker - Styling selector to not be grey

Question

I am trying to style the selector background in the picker component, Where there is the grey background in the picture below. I am trying to change it to a white background and have a border around it.

   <Picker
        selectedValue={selectedProject}
        onValueChange={(text) => {
          setSelectedProject(text as string);
        }}
        style={{
          width: '50%',
          alignSelf: 'center',
        }}
        itemStyle={{
          height: 200,
        }}>
          <Picker.Item key={'all'} label={'all'} value={'all'} />
          <Picker.Item key={'all1'} label={'all1'} value={'all1'} />
          <Picker.Item key={'all2'} label={'all2'} value={'all2'} />
   </Picker>

I have tried everything - which makes me think it cannot be done.

I have tried adding backgroundColour / colour properties to the style and itemStyle of the Picker component but neither of those works.

Is it possible to style this grey selection box?

Schacker

Can you inspect what is being done to the element itself as rendered html and write some css in a stylesheet to override that? – Rabelais

Answer 1

From the issues in react-native-picker, there is a talking about the customizing the selected item inside the picker.

More over, it is not possible to do so at present, as the native properties for the selection indicator styles aren't bridged over yet.

The code inside RNPicker.m file should be modified to handle the customization.

[self selectRow:0 inComponent:0 animated:YES]; // Workaround for missing selection indicator lines (see https://mcmap.net/q/687731/-uipickerview-selection-indicator-not-visible-in-ios10)

Absorbing