rnc-theme

🎨 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

Changelog

[0.1.2] - 2025-07-25

Added

• Complete contribution documentation
• Issue and pull request templates
• Security policy
• Code of conduct
• ✨ Custom font configuration support in RNCProvider
• 📚 Font configuration documentation and examples
• 🎨 fontConfig, fontsLoaded, and onFontLoadError props to RNCProvider
• 📖 Custom font setup guide with Expo Google Fonts integration

Changed

• Improved project structure documentation
• 🔄 Enhanced RNCProvider with font loading capabilities
• 📚 Updated API documentation with new font-related props

Deprecated

• Nothing

Removed

• Nothing

Fixed

• 🐛 Fixed theme persistence issue where only current theme mode was saved
• 🔧 Fixed updateCustomTheme to save both light and dark variants when preset is applied
• ✨ Added missing fontFamily: 'System' to all typography variants in preset themes

Security

• Added security policy and guidelines