🎨 RNC Theme

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

!npm downloads
!Platforms

📦 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

``bash
npm install rnc-theme


or

yarn add rnc-theme

or

pnpm add rnc-theme

or

bun add rnc-theme
`

⚡ Quick Start

$3

`tsx
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 (





);
}
`

$3

`tsx
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 (

Hello World!

);
};

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.

---