React Native Tokens

React Native tokens enable consistent design values across mobile applications built with React Native. Because React Native uses JavaScript for styling, token implementation follows patterns similar to web development while addressing mobile-specific considerations. Understanding React Native token patterns enables effective cross-platform design system implementation.

What Are React Native Tokens

React Native tokens are design values stored in JavaScript or TypeScript formats that React Native applications import and use within StyleSheet definitions or inline styles. These tokens integrate naturally with React Native’s styling system while providing the benefits of centralized design value management.

Token pipelines generate JavaScript modules from platform-agnostic token sources. The same token definitions that produce CSS custom properties can generate React Native-compatible JavaScript objects.

How React Native Tokens Work

Token pipelines generate JavaScript modules with typed exports:

// tokens.js
export const colors = {
  primary: '#3B82F6',
  backgroundDefault: '#FFFFFF',
  textPrimary: '#171717',
};

export const spacing = {
  sm: 8,
  md: 16,
  lg: 24,
};

export const typography = {
  bodyMd: {
    fontSize: 16,
    fontWeight: '400',
    lineHeight: 24,
  },
  headingLg: {
    fontSize: 24,
    fontWeight: '700',
    lineHeight: 32,
  },
};

Components use these tokens in StyleSheet definitions:

import { StyleSheet, View, Text } from 'react-native';
import { colors, spacing, typography } from './tokens';

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.backgroundDefault,
    padding: spacing.md,
  },
  heading: {
    ...typography.headingLg,
    color: colors.textPrimary,
    marginBottom: spacing.sm,
  },
  body: {
    ...typography.bodyMd,
    color: colors.textPrimary,
  },
});

function Card({ title, description }) {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>{title}</Text>
      <Text style={styles.body}>{description}</Text>
    </View>
  );
}

TypeScript definitions provide type safety:

// tokens.ts
export interface Colors {
  primary: string;
  backgroundDefault: string;
  textPrimary: string;
}

export const colors: Colors = {
  primary: '#3B82F6',
  backgroundDefault: '#FFFFFF',
  textPrimary: '#171717',
};

Key Considerations

• React Native does not support CSS or CSS custom properties
• Spacing values are unitless numbers representing density-independent pixels
• Typography requires explicit fontFamily, fontSize, and lineHeight properties
• Shadow tokens differ between iOS and Android platforms
• Platform-specific tokens may be needed for native feel
• StyleSheet.create provides performance optimization
• Hot reloading works with JavaScript-based tokens
• Token bundle size affects app startup time

Common Questions

How should theming work in React Native?

React Native theming typically uses React Context to provide token values throughout the component tree.

Theme context setup:

import React, { createContext, useContext } from 'react';
import { lightTokens, darkTokens } from './tokens';

const ThemeContext = createContext(lightTokens);

export function ThemeProvider({ theme, children }) {
  const tokens = theme === 'dark' ? darkTokens : lightTokens;
  return (
    <ThemeContext.Provider value={tokens}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

Components consume theme tokens via hook:

function ThemedButton({ title, onPress }) {
  const tokens = useTheme();

  return (
    <Pressable
      style={{
        backgroundColor: tokens.colors.primary,
        padding: tokens.spacing.md,
      }}
      onPress={onPress}
    >
      <Text style={{ color: tokens.colors.textOnPrimary }}>
        {title}
      </Text>
    </Pressable>
  );
}

Switching themes updates the context value, causing themed components to re-render with new values.

Libraries like styled-components for React Native, Emotion Native, or NativeWind provide alternative theming approaches with different tradeoffs.

How should platform-specific tokens be handled?

React Native apps run on both iOS and Android, which may require different values for native-feeling experiences.

Platform-specific shadows:

import { Platform } from 'react-native';

export const shadows = {
  md: Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
    },
    android: {
      elevation: 4,
    },
  }),
};

Platform.select chooses the appropriate value based on the running platform.

Token pipelines can generate platform-aware tokens:

// tokens.ios.js
export const shadows = { md: { shadowColor: '#000', ... } };

// tokens.android.js
export const shadows = { md: { elevation: 4 } };

// tokens.js (shared)
export * from './tokens.platform';

React Native’s platform-specific file extensions automatically resolve the correct file.

For visual consistency across platforms, many design systems use consistent values rather than platform-specific ones. Platform-specific tokens are most useful for interaction patterns and system integration.

How do React Native tokens relate to web tokens?

Cross-platform design systems often share tokens between React Native and web applications.

Shared source tokens define values in platform-agnostic format:

{
  "color": {
    "primary": { "value": "#3B82F6" }
  },
  "spacing": {
    "md": { "value": "16" }
  }
}

Platform-specific transforms generate appropriate outputs:

// Style Dictionary config
{
  platforms: {
    web: {
      transformGroup: 'css',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    reactNative: {
      transformGroup: 'react-native',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    }
  }
}

The web output includes units (16px), while React Native output uses unitless numbers (16).

Composite tokens like typography may transform differently per platform, with web producing CSS properties and React Native producing JavaScript objects matching React Native’s style API.

Code sharing through packages enables web and React Native apps to import from the same token package, with bundlers resolving the appropriate platform output.

Summary

React Native tokens enable consistent design values through JavaScript modules that integrate with StyleSheet-based styling. Theming uses React Context for runtime token switching. Platform-specific considerations include shadow differences between iOS and Android. Cross-platform design systems share token sources while generating platform-appropriate outputs. Understanding these patterns enables effective token implementation for React Native applications.