@bacons/apple-colors

Use native adaptive iOS colors in your Expo app on all platforms.

This package provides typed bindings for all UIKit colors and native adaptive shims on Android and web. The web colors use CSS variables and support high gamut displays.

Add the package to your npm dependencies

This project requires a dev client on Android as the colors are added to the native resources via a config plugin.

yarn add @bacons/apple-colors

In your app.json:

{
  "expo": {
    "plugins": ["@bacons/apple-colors"]
  }
}

Usage

import * as Colors from "@bacons/apple-colors";

function App() {
  return (
    <>
      <View
        style={{
          backgroundColor: Colors.systemBackground,
        }}
      >
        {/* No TypeScript errors... */}
        <Text style={{ color: Colors.label }}>Link</Text>
      </View>
    </>
  );
}

You can lock the colors to a single scheme with Appearance.setColorScheme() from react-native.

Colors

Issue with Android

While this technically works and is setup correctly on Android, the PlatformColor API in React Native has a bug that makes it not update at runtime. This means the first time a component is mounted with the color, it will be the correct color, but if the appearance changes at runtime, it will not update. This is a limitation of React Native and not this package.