PlatformColor

PlatformColor

PlatformColor(name, ...fallbacks) gives a style a native color by name instead of a hex value: on Android a theme attribute (?android:attr/textColor) or a color resource (@android:color/holo_blue_bright), on iOS a UIColor name such as label or systemTealColor. The first name is the default and the rest are fallbacks. Because the names differ by platform, always wrap it in Platform.select():

src/info/Themed.tsx: native colors by name, one set per platform (excerpt)TSX

const nativeLabel = Platform.select({
  android: { color: PlatformColor('?android:attr/textColor'),
             backgroundColor: PlatformColor('@android:color/holo_blue_bright') },
  ios: { color: PlatformColor('label'), backgroundColor: PlatformColor('systemTealColor') },
  default: { color: 'black', backgroundColor: 'lightblue' },
});

The blue card of the figure in DevSettings uses it. It kept the same colors after the switch to dark mode on this emulator: the holo resource is a fixed color, and the theme attribute was not re-read while the activity stayed alive. iOS dynamic colors such as label are defined to adapt to the mode. Use PlatformColor to match system chrome, and your own palette, keyed on useColorScheme(), for brand colors.

MENU