Getting started

native-mate is a copy-paste component system for React Native. You run a CLI command, the component source lands in your project, and you own it completely.

Requirements

• React Native ≥ 0.73 (New Architecture recommended)
• Expo SDK ≥ 51 (optional, but recommended)
• react-native-reanimated ≥ 3.0
• TypeScript ≥ 5.0

1. Init your project

Run this from your project root. It installs @native-mate/core, creates native-mate.json, and updates your .cursorrules.

npx native-mate init

2. Add your first component

npx native-mate add button

The component is written to components/ui/button.tsx (or wherever you configured). No runtime imports — just source files you own completely.

3. Import and use

import { Button } from '~/components/ui/button'

export function HomeScreen() {
  return (
    <Button variant="default" size="md" onPress={() => console.log('hi')}>
      Get started
    </Button>
  )
}

Wrap your app in ThemeProvider

Required once, at the root of your app. Resolves design tokens and provides them via context.

import { ThemeProvider } from '@native-mate/core'

export default function App() {
  return (
    <ThemeProvider preset="zinc">
      <RootNavigator />
    </ThemeProvider>
  )
}