DynamicColorIOS

DynamicColorIOS

DynamicColorIOS({ light, dark, highContrastLight, highContrastDark }) builds a native iOS color that switches by itself when the appearance or the Increase Contrast setting changes, with no re-render and no useColorScheme(); the two high-contrast values are optional and fall back to light and dark. Where PlatformColor's PlatformColor reads the platform's own palette, this defines your own adaptive color. The obvious way to share one color across platforms fails:

src/ios/InkDemo.tsx: the tempting Platform.select() version (excerpt)TSX

    const naive = Platform.select({
      ios: DynamicColorIOS({ light: '#102a43', dark: '#e3f2fd' }),
      android: PlatformColor('?android:attr/textColorPrimary'),
    });

Output

 LOG  Platform.select threw: DynamicColorIOS is not available on this platform.

Platform.select() receives an object, so JavaScript builds every value, including the iOS one, before the platform is chosen, and outside iOS DynamicColorIOS throws. Test Platform.OS first:

src/ios/colors.ts: a dynamic ink color that is safe on AndroidTypeScript

export const inkColor: ColorValue = Platform.OS === 'ios'
  ? DynamicColorIOS({ light: '#102a43', dark: '#e3f2fd',
      highContrastLight: '#000000', highContrastDark: '#ffffff' })
  : PlatformColor('?android:attr/textColorPrimary');

Output

 LOG  inkColor -> {"resource_paths":["?android:attr/textColorPrimary"]}

On Android the color is a reference to the theme's primary text color, resolved natively; on iOS (not run here) it follows the system's appearance and contrast without any JavaScript.

MENU