React Native Guide

toned-styles works with React Native, allowing you to share style definitions across web and native platforms. The core authoring model is identical; only the config and runtime differ.

1. Install Dependencies

npm install @toned/core @toned/react @toned/systems

Note: you do not need @toned/themes for React Native since themes are handled differently on native platforms.

2. Create the Config File

The React Native config omits DOM-specific features like CSS class names and CSS media queries:

// toned.config.ts
import { defineConfig, setConfig } from '@toned/core'
import reactNativeConfig from '@toned/react/react-native'
import { system } from '@toned/systems/base'

export default setConfig(
  defineConfig({
    ...reactNativeConfig,
    useMedia: true,
  }),
)

3. Import Config Early

Import the config at the top of your app entry point, before any component imports:

// App.tsx
import './toned.config.ts'

import { View, Text } from 'react-native'
import { useStyles } from '@toned/react'
import { appStyles } from './styles.ts'

export default function App() {
  const s = useStyles(appStyles)
  return (
    <View {...s.container}>
      <Text {...s.title}>Hello from toned-styles</Text>
    </View>
  )
}

4. Shared Style Definitions

The key benefit of toned-styles is that your stylesheet definitions are platform-agnostic. The same stylesheet file works on both web and native:

// styles/card.ts - works on both web and native
import { stylesheet } from '@toned/systems/base'

export const cardStyles = stylesheet({
  card: {
    bgColor: 'elevated',
    borderRadius: 'large',
    borderColor: 'subtle',
    borderWidth: 'thin',
    shadow: 'small',
    padding: 3,
  },
  title: {
    textColor: 'primary',
    typo: 'heading_3',
  },
})

On the web, tokens like bgColor resolve to CSS custom properties. On React Native, they resolve to concrete colour values from your theme.

5. Platform Differences

No className -- React Native does not support CSS classes. The config adapter ensures that useStyles returns only style props.

Media queries -- In React Native, breakpoint evaluation happens in JavaScript using Dimensions rather than CSS @media rules.

style escape hatch -- When using the style property, prefer numeric values for dimensions (e.g. padding: 24 instead of '24px') to ensure compatibility with React Native's style system.