Member-only story

10 React Native Gems That Deserve a Place in Your Next Project

9 min read6 days ago

Not a Medium Member? “Read For Free”

1. DynamicColorIOS

Most apps handle dark mode like this: read the colour scheme, then pick a colour with an if. DynamicColorIOS lets you give both colours at once, and iOS picks the right one by itself.

Code:

function dynamicColor(
  light: string,
  dark: string,
  scheme: string | null | undefined,
): ColorValue {
  if (Platform.OS === 'ios') {
    return DynamicColorIOS({ light, dark });
  }
  return scheme === 'dark' ? dark : light;
}

const schemes = ['light', 'dark', 'unspecified'] as const;

export function DynamicColorIOSDemo() {
  const scheme = useColorScheme();
  const [override, setOverride] =
    useState<(typeof schemes)[number]>('unspecified');

  useEffect(() => () => Appearance.setColorScheme('unspecified'), []);

  const choose = (next: (typeof schemes)[number]) => {
    setOverride(next);
    Appearance.setColorScheme(next);
  };

  return (
    <View style={styles.stack}>
      <View
        style={[
          styles.sky,
          { backgroundColor: dynamicColor('#7DD3FC', '#1E1B4B', scheme) }…