Borders using PlatformColor do not update on fly when toggling dark mode

Description

So I’ve been implementing dark mode support on our iOS app by using the new PlatformColor API. Overall, it’s been a pleasure. The API is simple, efficient and works —for the most part— really well.

However, I’ve found that when using PlatformColor to set View style’s border, the colour of the border does not update when toggling the system appearance.

The correct colour appears for the current theme when the component mounts. This means that starting the app in either light or dark mode will display the correct colour for the appearance. The issue only happens when, after the component mounted, the appearance is toggled.

React Native version:

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 335.46 MB / 20.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.3.0 - /var/folders/n8/l8xdjt192lb9lpfrkyh9v57m0000gn/T/yarn--1605203511438-0.01156582499322334/node
    Yarn: 1.22.5 - /var/folders/n8/l8xdjt192lb9lpfrkyh9v57m0000gn/T/yarn--1605203511438-0.01156582499322334/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.1, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.1/12A7403 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_272 - /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.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Run the app with a component using PlatformColor for its border colour.
2. Toggle the light/dark system appearance
3. See the border colour does not update

Expected Results

I’m expecting that when toggling the system appearance, the border colours update as well as the other SystemColors used in font colour or background colours.

Snack, code example, screenshot, or link to a repository:

import { PlatformColor, View, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  borderedView: {
    borderColor: PlatformColor('separator'),
    borderWidth: 5,
  },
})

const MyComponent = () => (
  <View>
    <View style={styles.borderedView} />
  </View>
)

[habovh]

@zachgibson that’s true, but requires a ton of refactoring in order to temporary workaround a whole app. Might be enough for a more lightweight app though. In any case, I believe this is an actual issue with React Native that should be fixed at some point.

[habovh]

Does anyone with a tad more experience on the native side have an idea on how we can fix this?