createTheme

createTheme deep-merges your token overrides onto the base theme. The return type is inferred, so your custom tokens are fully typed and autocompletable everywhere they're used.

Signature

typescript

import { createTheme } from 'reactnatively/theme';

function createTheme<T extends DeepPartial<BaseTheme>>(overrides: T): BaseTheme & T

Basic usage

theme.ts

1import { createTheme } from 'reactnatively/theme';23export const theme = createTheme({4  colors: {5    primary:   '#6366f1',   // indigo6    secondary: '#8b5cf6',   // violet7    accent:    '#06b6d4',   // cyan8  },9  radii: {10    card:   20,11    button: 12,12    badge:  6,13  },14  spacing: {15    // override specific values16    screenPadding: 20,17  },18});1920// TypeScript knows theme.colors.primary is '#6366f1'21// and theme.radii.card is 20

Passing to the provider

app/_layout.tsx

1import { ReactnativelyProvider } from 'reactnatively';2import { theme } from './theme';34export default function RootLayout() {5  return (6    <ReactnativelyProvider theme={theme} colorScheme="system">7      <Stack />8    </ReactnativelyProvider>9  );10}

Using custom tokens in components

MyComponent.tsx

1import { useTheme } from 'reactnatively';2import { View } from 'react-native';34export function MyCard() {5  const { theme } = useTheme();67  return (8    <View style={{9      borderRadius: theme.radii.card,    // 20 — your custom value10      padding: theme.spacing[4],          // 16 — from base theme11      backgroundColor: theme.colors.primary, // '#6366f1'12    }} />13  );14}

Typing your theme

Use InferTheme to extract the exact type of your theme for re-exporting or strict prop typing:

theme.ts

import { createTheme, type InferTheme } from 'reactnatively/theme';

const themeFactory = () => createTheme({
  colors: { brand: '#6366f1' },
});

export type MyTheme = InferTheme<typeof themeFactory>;
// MyTheme.colors.brand → string

Deep merge behavior

createTheme uses a deep merge — nested objects are merged, not replaced. You only need to specify the tokens you want to change; all other base theme values are inherited.

typescript

// You override one spacing value → all other spacing values come from the base theme
createTheme({
  spacing: {
    // Only this key changes. spacing[4], spacing[8], etc. remain as-is.
    20: 80,
  },
});