TypeScript icon, indicating that this package has built-in type declarations

0.2.3 • Public • Published

RN logo React Native + Theo Theo logo

NPM version

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.


yarn add react-native-theo

Basic Help

yarn theo-native --help


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


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: {
      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: [

React Native Configuration

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


npm i react-native-theo

DownloadsWeekly Downloads






Unpacked Size

21.4 kB

Total Files


Last publish


  • levi-pires