React Native + Theo

React Native Theo is an implementation of Theo for React Native. Due to the use of tools that RN doesn't provide during runtime (like fs and path) I decided to create a CLI to handle Design Tokens before packaging.

Installation

yarn add react-native-theo

Basic Help

yarn theo-native --help

CLI

First of all, start the project with yarn theo-native init. This command generates a default config file. If you want to create your own config file, try yarn theo-native init --create. You can also use the --force flag to change configurations.

Link Fonts

Before linking, you will have to set up the react-native.config.js to link fonts properly. If you already have it set up you can skip this step.

To link the fonts, run yarn theo-native link-fonts|link.

Note: I highly recommend you to use Google Fonts links

Convert Tokens

This part is pretty straightforward. Just run yarn theo-native convert-tokens|convert

Example:

input: ./tokens/tokens.yml

output: ./src/tokens.ts -->

export const borderStyleDefault = "solid";
export const borderWidthNone = 0;
export const borderWidthHairline = 1;
export const borderWidthThin = 2;
export const borderWidthThick = 4;
export const borderWidthHeavy = 8;
export const opacityLevelSemiopaque = 0.8;
export const opacityLevelIntense = 0.64;
export const opacityLevelMedium = 0.32;
export const opacityLevelLight = 0.16;
export const opacityLevelSemitransparent = 0.08;
export const borderRadiusNone = 0;
/* ... */

API Usage

Since React Native has a limited support to external fonts, I created this simple function.

Note: Mainly on Android, the output of the function has to be the same as the file name

const { renderNativeFont } = require('react-native-theo')

const styles = {
  foo: {
    ...renderNativeFont({
      fontFamily: 'Roboto';
      fontWeight: '600';
      italic: true;
    }) /*
        output: {
          fontFamily: Roboto-SemiBold-Italic,
          fontWeight: '600'
        }
        */
  }
}

Default Configuration File

// react-native-theo.config.js
module.exports = {
  // All required if you are going to use 'theo-native convert-tokens'
  styles: {
    files: ["./tokens/tokens.yml"],
    output: {
      dir: "./src/tokens/",
      // .js | .ts
      extension: ".js",
      // module.js | common.js
      format: "module.js",
    },
  },

  // You can declare both files and urls, but you cannot declare
  // 'fonts: {}' if you are going to use 'theo-native link-fonts'
  fonts: {
    files: ["./tokens/brand-01/typography/index.yml"],
    urls: [
      "https://fonts.googleapis.com/css2?family=Roboto",
      "https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,900;1,700",
    ],
  },
};

React Native Configuration

// react-native.config.js
module.exports = {
  assets: ["./assets/fonts/"] /* you will need to add this line */,
};