🎨 RNC Theme

A powerful and flexible theming system for React Native applications with TypeScript support.

📦 Peer Dependencies

| Package | Version | Description | |---------|---------|-------------| | ⚛️ react | >=19.0.0 | React library | | 📱 react-native | >=0.79.3 | React Native framework | | 🎭 react-native-reanimated | >=3 | Advanced animations | | 👆 react-native-gesture-handler | >=2 | Gesture interactions | | 💾 @react-native-async-storage/async-storage | >=2 | Local storage | | 🎨 lucide-react-native | >=0.513.0 | Icon library | | 📅 react-native-calendars | >=1.1286.0 | Calendar components | | 🧭 @react-navigation/native | >=6 | Navigation | | 🛡️ react-native-safe-area-context | >=4 | Safe area handling | | 🌍 expo-localization | >=16.1.5 | Locale detection | | 🗣️ i18n-js | >=4.5.1 | Internationalization | | 🚀 @shopify/flash-list | >=1.8.0 | Optimized list rendering |

✨ Features

• 🎯 Type-Safe - Full TypeScript support with comprehensive type definitions
• 🎨 Dynamic Theme Switching - Seamless light/dark mode transitions
• 📱 React Native Optimized - Built specifically for React Native performance
• 💾 Persistent Storage - Automatically saves theme preferences
• 🎭 8+ Built-in Presets - Material, Neon, Ocean, Cyberpunk, and more
• 🔄 Theme Registry - Register and manage multiple theme configurations

🚀 Installation

npm install rnc-theme
# or
yarn add rnc-theme
# or
pnpm add rnc-theme
# or
bun add rnc-theme

⚡ Quick Start

1. Setup Theme Provider

import React from 'react';
import { RNCProvider } from 'rnc-theme';
import App from './App';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function Root() {
  return (
    <GestureHandlerRootView>
      <RNCProvider>
        <App />
      </RNCProvider>
    </GestureHandlerRootView>
  );
}

2. Using Themes in Components

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme, useThemedStyles } from 'rnc-theme';

const MyComponent = () => {
  const { theme, isDark, setThemeMode } = useTheme();
  const styles = useThemedStyles(createStyles);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
    </View>
  );
};

const createStyles = (theme) => StyleSheet.create({
  container: {
    backgroundColor: theme.colors.background,
    padding: theme.spacing.md,
  },
  text: {
    color: theme.colors.text,
    fontSize: theme.fontSizes.md,
  },
});

📄 License

MIT License - see LICENSE file for details.

Made with ❤️ for the React Native community

Documentation • GitHub • NPM