Skip to main content


The following React Native format is provided when compiling design tokens to JavaScript using native-js, or TypeScript using native-ts. It utilizes exported constant variables for reusability. This format is based on the web-js/ts format, with the following differences:

  • Unit based values are literal numbers instead of being suffixed with px (or another unit). This matches how React Native handles unit based props. For example:
export const border: BorderTokens = {
sm: {
radius: 1.5,
width: 0,
df: {
radius: 3,
width: 1,
lg: {
radius: 4.5,
width: 2,
  • Since React Native supports both iOS and Android, we inject some platform conditionals within the generated system to support both platforms. For example:
const systemFont = Platform.OS === 'ios' ? 'SF Pro' : 'sans-serif';
const monospaceFont = Platform.OS === 'ios' ? 'Menlo-Regular' : 'monospace';

Please refer to the web based format for more information on how to use this format.