Theming

Reactnatively ships a complete design token system. Tokens cover colors, spacing, radius, typography, shadow, motion, glass, and material recipes. Components read from these tokens automatically via the theme context — you customize once and every component updates.

Theme architecture

Base theme— Default values for every token — colors, spacing, radius, typography, motion, glass.

createTheme— Deep-merges your overrides onto the base theme. TypeScript infers your exact token shape.

ThemeProvider— Puts the resolved theme into React context, handles color scheme, and exposes useTheme().

useTheme / useToken— Hooks that components call to read live token values from the nearest ThemeProvider.

createRecipe— Typed variant + state resolver used internally by components — also available for your own components.

Quick setup

The simplest path: wrap your app in ReactnativelyProvider and start building. The base theme is applied automatically.

app/_layout.tsx

import { ReactnativelyProvider } from 'reactnatively';

export default function RootLayout() {
  return (
    <ReactnativelyProvider colorScheme="system">
      <App />
    </ReactnativelyProvider>
  );
}

Custom theme

Use createTheme to override any token. The return type is inferred — editors autocomplete your custom tokens too.

theme.ts

1import { createTheme } from 'reactnatively/theme';23export const myTheme = createTheme({4  colors: {5    primary: '#6366f1',6    secondary: '#8b5cf6',7  },8  radii: {9    card: 20,10    button: 12,11  },12});

app/_layout.tsx

import { ReactnativelyProvider } from 'reactnatively';
import { myTheme } from './theme';

export default function RootLayout() {
  return (
    <ReactnativelyProvider theme={myTheme} colorScheme="system">
      <App />
    </ReactnativelyProvider>
  );
}

Theme hooks

Hook	Returns	Use case
useTheme()	Full theme + colorScheme	Access any token, read current scheme
useColorScheme()	'light' \| 'dark'	Read scheme without the full theme
useIsDark()	boolean	Quick dark-mode boolean check
useToken(path)	Token value	Read a specific token by path, e.g., 'colors.primary'

Design Tokens

Full token reference for all scales.

createTheme

API for extending the base theme.

createRecipe

Variant resolver for your own components.

Dark Mode

Color scheme configuration and usage.