native-matenative-mate

Installation

native-mate works with any React Native or Expo project. There is no npm package to install for components — they live in your codebase. The only runtime dependency is @native-mate/core.

Prerequisites

  • React Native ≥ 0.73 (New Architecture recommended)
  • Expo SDK ≥ 51 (optional but recommended)
  • react-native-reanimated ≥ 3.0
  • react-native-safe-area-context ≥ 4.0 (for Screen component)
  • TypeScript ≥ 5.0

New Expo project

bash
1
2
3
4
5
6
7
8
9
# Create project
npx create-expo-app my-app --template blank-typescript
cd my-app

# Install reanimated
npx expo install react-native-reanimated react-native-safe-area-context

# Init native-mate
npx native-mate init

Existing project

bash
1
2
3
4
5
# If you don't have reanimated yet
npm install react-native-reanimated react-native-safe-area-context

# Init native-mate
npx native-mate init

Wrap your root with ThemeProvider

App.tsx
1
2
3
4
5
6
7
8
9
import { ThemeProvider } from '@native-mate/core'

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

Add reanimated plugin to babel

Required for Reanimated to work on Android and iOS.

babel.config.js
1
2
3
4
module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'],
}