Skip to content
RNC Theme

Installation

Get started with RNC Theme by installing the package and its required dependencies. This guide will walk you through the complete installation process for different environments.

Package Installation

Section titled “Package Installation”

npm

The most common package manager for Node.js projects.

Terminal window
npm install rnc-theme

yarn

Fast, reliable, and secure dependency management.

Terminal window
yarn add rnc-theme

pnpm

Efficient package manager with shared dependencies.

Terminal window
pnpm add rnc-theme

bun

Ultra-fast JavaScript runtime and package manager.

Terminal window
bun add rnc-theme

Required Dependencies

Section titled “Required Dependencies”

RNC Theme requires several peer dependencies to function properly. Choose the installation method that matches your project setup:

  1. Install Core Dependencies with Expo CLI

    Terminal window
    npx expo install react-native-reanimated
    npx expo install react-native-gesture-handler
    npx expo install @react-native-async-storage/async-storage
    npx expo install lucide-react-native
    npx expo install react-native-calendars
    npx expo install @shopify/flash-list

  2. Install Optional Dependencies Feature Specific

    Terminal window
    npx expo install @react-navigation/native react-native-safe-area-context
    npx expo install expo-localization i18n-js

Essential Configuration

Section titled “Essential Configuration”

Babel Configuration

Section titled “Babel Configuration”
babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // Other plugins...
    'react-native-reanimated/plugin', // ⚠️ Must be last!
  ],
};

TypeScript Configuration

Section titled “TypeScript Configuration”

RNC Theme includes comprehensive TypeScript definitions. Update your tsconfig.json:

tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ]
}

Version Compatibility Matrix

Section titled “Version Compatibility Matrix”
PackageMinimum VersionRecommendedStatus
React19.0.0+LatestRequired
React Native0.79.3+LatestRequired
React Native Reanimated3.0.0+3.15.0+Required
React Native Gesture Handler2.0.0+2.18.0+Required
AsyncStorage2.0.0+LatestRequired
Lucide React Native0.513.0+LatestRequired
React Navigation6.0.0+LatestRequired
React Native Calendars1.1200.0+LatestRequired
FlashList1.8.0+LatestRequired

Installation Verification

Section titled “Installation Verification”

Create a test component to verify your installation:

_layout.tsx
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { Stack, usePathname } from 'expo-router';
import { RNCProvider } from 'rnc-theme';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import 'react-native-reanimated';


export default function RootLayout() {
  return <RootLayoutNav />;
}


function RootLayoutNav() {
  return (
      <ThemeProvider>
        <GestureHandlerRootView>
           <RNCProvider>
              {/* stack or children */}
              <Stack>
                <Stack.Screen name="index" />
              </Stack>
           </RNCProvider>
        </GestureHandlerRootView>
      </ThemeProvider>
  );
}

Troubleshooting Common Issues

Section titled “Troubleshooting Common Issues”

Metro Bundler Errors

Solution: Clear Metro cache

Terminal window
  npx expo start -c

Reanimated Errors

Solution: Check Babel configuration

  • Ensure react-native-reanimated/plugin is last in plugins array
  • Restart Metro bundler after changes

Getting Help & Support

Section titled “Getting Help & Support”