Installation

Step 1: Install Package

Install @masumdev/rn-ui along with required peer dependencies using your preferred package manager:

npm

npm i @masumdev/rn-ui react-native-reanimated react-native-gesture-handler react-native-worklets react-native-safe-area-context

pnpm

pnpm add @masumdev/rn-ui react-native-reanimated react-native-gesture-handler react-native-worklets react-native-safe-area-context

yarn

yarn add @masumdev/rn-ui react-native-reanimated react-native-gesture-handler react-native-worklets react-native-safe-area-context

bun

bun add @masumdev/rn-ui react-native-reanimated react-native-gesture-handler react-native-worklets react-native-safe-area-context

If you plan to use BottomSheet, Calendar, or persistent theme storage (SecureStore), install optional dependencies:

npm

npm i @gorhom/bottom-sheet react-native-calendars expo-secure-store

pnpm

pnpm add @gorhom/bottom-sheet react-native-calendars expo-secure-store

yarn

yarn add @gorhom/bottom-sheet react-native-calendars expo-secure-store

bun

bun add @gorhom/bottom-sheet react-native-calendars expo-secure-store

Step 2: Configure Babel Plugin

Add react-native-reanimated/plugin to babel.config.js:

babel.config.js

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    // Reanimated plugin must be listed last
    'react-native-reanimated/plugin',
  ],
};

Reanimated plugin must always be placed as the last plugin in your babel.config.js.

Step 3: Set Up Root Providers

Wrap your root navigation container with GestureHandlerRootView, ThemeProvider, and ToastProvider:

_layout.tsx

import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { ThemeProvider, ToastProvider } from '@masumdev/rn-ui';
import * as SecureStore from 'expo-secure-store';
import { Stack } from 'expo-router';

const themeStorage = {
  getItem: (key: string) => SecureStore.getItemAsync(key),
  setItem: (key: string, value: string) => SecureStore.setItemAsync(key, value),
};

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ThemeProvider
        defaultColorScheme="system"
        storage={themeStorage}
        storageKey="app-color-scheme"
      >
        <ToastProvider placement="bottom">
          <Stack screenOptions={{ headerShown: false }} />
        </ToastProvider>
      </ThemeProvider>
    </GestureHandlerRootView>
  );
}