# React Native

Compile typed styles with Metro, and select themes and window sizes as the app renders.

## Overview

Zyzz compiles the same `style` and `variants` definitions to native style tables for iOS and Android. Metro compiles them during bundling, and applying a style returns a `style` prop instead of a class name.

A Provider selects the color scheme, named tokens, and window size, and compiled styles switch alternatives without recompiling. The guides in this section cover styling, themes, responsive styles, components, animations, shared packages, and migrating from Unistyles.

```tsx title="Card.tsx"
import { Text, View } from 'react-native'
import { style } from 'zyzz'

export function Card() {
  return (
    // Each applied style spreads a native style prop
    <View {...styles.card()}>
      <Text {...styles.label()}>Saved for later</Text>
    </View>
  )
}

namespace styles {
  export const card = style({
    backgroundColor: '#f3f4f6',
    borderRadius: '12px',
    padding: '16px',
  })

  // A numeric lineHeight multiplies the fontSize in the same style
  export const label = style({
    color: '#111111',
    fontSize: '16px',
    lineHeight: 1.5,
  })
}
```

## Walkthrough

These steps add Zyzz to an Expo app with React 19 and render text in a configured color for the device's color scheme.

### Install Zyzz

Add Zyzz to the existing app. React Native 0.86 or later is required.

```sh
npm install zyzz
```

### Configure Metro

Wrap the app's existing Metro configuration. Zyzz keeps its settings and compiles iOS and Android modules before the configured Babel transformer runs.

```ts title="metro.config.ts"
import { getDefaultConfig } from 'expo/metro-config'
import { zyzz } from 'zyzz/metro'

export default zyzz(getDefaultConfig(import.meta.dirname), {
  // One px is one native logical unit, and rem needs an explicit size
  units: { px: 1, rem: 16 },
})
```

The adapter requires a configured `babelTransformerPath`, which Expo's default configuration provides. Restart Metro after changing `units` or `fonts`. See [Expo's Metro guide](https://docs.expo.dev/guides/customizing-metro/) for the base configuration.

### Configure TypeScript

Types for the `zyzz/react-native` hooks resolve under the `react-native` export condition. Expo's base configuration sets it already. Other apps add the condition to `compilerOptions`:

```json title="tsconfig.json"
{
  "compilerOptions": {
    "customConditions": ["react-native"]
  }
}
```

### Add a Provider

`defineConfig` from `zyzz/react-native` returns a typed `Provider` with the config's helpers. Place it above the components that consume compiled styles, and pass the device scheme from [`useColorScheme`](https://reactnative.dev/docs/usecolorscheme).

```tsx title="App.tsx"
import { Text, useColorScheme } from 'react-native'
import { defineConfig } from 'zyzz/react-native'

const { Provider, style } = defineConfig({
  vars: {
    // A pair holds one value per color scheme
    color: { ink: { dark: '#eeeeee', light: '#111111' } },
  },
})

export default function App() {
  const scheme = useColorScheme()

  return (
    // Resolve an absent device preference to light
    <Provider colorScheme={scheme === 'dark' ? 'dark' : 'light'}>
      <Greeting />
    </Provider>
  )
}

function Greeting() {
  return <Text {...styles.label()}>Hello from Zyzz</Text>
}

namespace styles {
  export const label = style({
    color: 'ink',
    fontSize: '16px',
    lineHeight: '24px',
    padding: '16px',
  })
}
```

### Build the App

Zyzz includes a native module that updates compiled styles on supported views without rerendering them. Rebuild a development client after installing Zyzz. Expo Go has no native module, so styles there update through React subscriptions.

```sh
# Rebuild the development client with the native module
npx expo run:ios
```

## Native Differences

Shared declarations keep CSS value semantics, and native compilation rejects what native views cannot express. Diagnostics name the unsupported declaration.

* **Output:** Applied styles return `style` props. Native views have no cascade or inheritance, so each element receives its own styles.
* **Units:** `px` is one logical unit by default. `rem` requires `units.rem`, and Zyzz does not read screen density.
* **Fonts:** Zyzz does not load fonts. Map shared families with the Metro `fonts` option, or name an installed family in `targets.native`.
* **Rejected features:** Selectors, pseudo-classes, container queries, cascade layers, global styles, `!important`, and fallback arrays fail native compilation.
* **Shorthands:** `flex` follows CSS and expands to `flexGrow`, `flexShrink`, and `flexBasis`, so `flex: 1` means `1 1 0`. React Native's own `flex: 1` does not shrink, so write `flex: '1 0 0'` to match it.
* **Bundled tokens:** `zyzz/default` is not yet available on native, so tokens come from a native `defineConfig`.

## More

[Styling](/docs/guides/native/styling)

Combine styles, branch by platform, and bind values that change at runtime.

[Themes](/docs/guides/native/themes)

Select color schemes and named token sets, and read tokens in components.

[Responsive Styles](/docs/guides/native/responsive)

Adapt styles to the window size and orientation with media queries.

[Components](/docs/guides/native/components)

Resolve compiled styles for third-party components and code outside JSX.

[Animations](/docs/guides/native/animations)

Animate between theme and variant values with Reanimated shared values.

[Migrating from Unistyles](/docs/guides/native/unistyles)

Move Unistyles stylesheets, themes, and breakpoints to Zyzz one at a time.