Unable to see selected item lines depending on system color scheme (iOS)

[mcraigie]

Bug report

Summary

On iOS the horizontal lines above and below the selected item appear to follow the system color scheme (dark mode/light mode), with no way to control/override it. This means if you are using the component on a darker background while the phone is in light mode, you cannot see them. Likewise if you are using it on a lighter background while the phone is in dark mode.

Environment info

react-native info output:

System:
    OS: macOS 10.15.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.45 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.7.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 13.0.1 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 1.6.6

Steps to reproduce

1. Build a picker on a black background
2. Ensure the phone is in light-mode

or

1. Build a picker on a white background
2. Ensure the phone is in dark-mode

Describe what you expected to happen:

I think it is fine for the lines to change color with the system light/dark mode, but that there should be a prop you can use to control the line color, or at least pick between light and dark

Reproducible sample code

  // example picker with a permanent black background
  // the lines above and below the selected item will not be visible if the phone is in light-mode

  <View style={{ backgroundColor: 'black' }}>
    <Picker
      selectedValue="a"
      itemStyle={{ color: 'white' }}
      onValueChange={itemValue => console.log(itemValue)}>
      <Picker.Item label="A" value="a" />
      <Picker.Item label="B" value="b" />
    </Picker>
  </View>

[donutsahoy]

I'm running into the save issue. I'd like to be able to change the style of the "selected item".