feat(theme): add custom font configuration support to RNCProvider

- Add fontConfig, fontsLoaded, and onFontLoadError props to RNCProvider
- Include documentation and examples for custom font setup
- Update CHANGELOG.md with new features and fixes
- Add badge to setup guide for new font configuration section

Author: masumrpg

CHANGELOG.md

@@ -12,9 +12,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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
@@ -23,7 +29,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Nothing
 
 ### Fixed
-- Nothing
+- 🐛 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

apps/docs/astro.config.mjs

@@ -30,7 +30,11 @@ export default defineConfig({
               },
             },
             { label: 'Quick Start', slug: 'getting-started/quick-start' },
-            { label: 'Setup Guide', slug: 'getting-started/setup-guide' },
+            {
+              label: 'Setup Guide',
+              slug: 'getting-started/setup-guide',
+              badge: { text: 'New', variant: 'success' },
+            },
           ],
         },
         {

apps/docs/src/content/docs/api/provider.mdx

@@ -22,6 +22,9 @@ Provider component is used to wrap your app content and provide the theme contex
 | `loadingComponent?` | `ReactNode` | `undefined` | Custom loading component to display during theme initialization |
 | `splashDuration?` | `number` | `150` | Minimum splash duration in milliseconds to prevent flash |
 | `fallbackTheme?` | `'light' \| 'dark'` | `'light'` | Fallback theme to use when system theme is unavailable |
+| `fontConfig?` | <a href='/api/provider#fontconfig'>`FontConfig`</a> | `undefined` | Custom font configuration for typography |
+| `fontsLoaded?` | `boolean` | `true` | External font loading state indicator |
+| `onFontLoadError?` | `(error: string) => void` | `undefined` | Callback function when font loading fails |
 
 ### BottomSheetProps
 
@@ -62,6 +65,15 @@ Provider component is used to wrap your app content and provide the theme contex
 | `defaultLocale` | `string` | No | `undefined` | The default locale code to use when no specific locale is selected or when the requested locale is not supported. Should be one of the locales listed in `supportedLocales`. |
 | `autoDetectLocale` | `boolean` | No | `undefined` | Whether to automatically detect the user's preferred locale from browser settings or other sources. When `true`, the application will attempt to match the user's preference with supported locales. |
 
+### FontConfig
+
+| Property | Type | Required | Default | Description |
+|----------|------|----------|---------|-------------|
+| `regular` | `string` | No | `'System'` | Font family name for regular weight text |
+| `medium` | `string` | No | `'System'` | Font family name for medium weight text |
+| `semiBold` | `string` | No | `'System'` | Font family name for semi-bold weight text |
+| `bold` | `string` | No | `'System'` | Font family name for bold weight text |
+
 ### `useTheme`
 
 | Property/Method | Type | Description |

apps/docs/src/content/docs/getting-started/setup-guide.mdx

@@ -279,6 +279,105 @@ themeRegistry.registerPreset('custom', customThemeConfig);
   </TabItem>
 </Tabs>
 
+## Custom Font Configuration <Badge variant='success' text='New'/>
+
+### Setting Up Custom Fonts with Expo
+
+RNC Theme supports custom font configuration for enhanced typography. Here's how to set up custom fonts using Expo Google Fonts:
+
+<Steps>
+1. **Install required dependencies**
+   ```bash
+   npx expo install expo-font @expo-google-fonts/poppins
+   ```
+
+2. **Import fonts and utilities**
+   ```tsx title="_layout.tsx"
+   import { useFonts } from 'expo-font';
+   import { utils, RNCProvider } from 'rnc-theme';
+   import {
+     Poppins_400Regular,
+     Poppins_500Medium,
+     Poppins_600SemiBold,
+     Poppins_700Bold,
+   } from '@expo-google-fonts/poppins';
+   ```
+
+3. **Create font configuration**
+   ```tsx title="_layout.tsx"
+   // Font config
+   const fontConfig = utils.createExpoFontConfig({
+     'Poppins-Regular': Poppins_400Regular,
+     'Poppins-Medium': Poppins_500Medium,
+     'Poppins-SemiBold': Poppins_600SemiBold,
+     'Poppins-Bold': Poppins_700Bold,
+   });
+   ```
+
+4. **Load fonts and handle loading states**
+   ```tsx title="_layout.tsx"
+   export default function RootLayout() {
+     const [fontsLoaded, error] = useFonts({
+       'Poppins-Regular': Poppins_400Regular,
+       'Poppins-Medium': Poppins_500Medium,
+       'Poppins-SemiBold': Poppins_600SemiBold,
+       'Poppins-Bold': Poppins_700Bold,
+     });
+
+     const handleFontLoadError = (error: string) => {
+       console.warn('Font loading error:', error);
+       // You could show a toast notification or handle the error as needed
+     };
+
+     useEffect(() => {
+       if (error) throw error;
+     }, [error]);
+
+     useEffect(() => {
+       if (fontsLoaded) {
+         SplashScreen.hideAsync();
+       }
+     }, [fontsLoaded]);
+
+     if (!fontsLoaded) {
+       return null;
+     }
+
+     return (
+       <GestureHandlerRootView>
+         <RNCProvider
+           defaultTheme="system"
+           fontConfig={fontConfig}
+           fontsLoaded={fontsLoaded}
+           onFontLoadError={handleFontLoadError}
+           showLoadingSplash={true}
+           splashDuration={200}
+         >
+           {/* Your app content */}
+         </RNCProvider>
+       </GestureHandlerRootView>
+     );
+   }
+   ```
+</Steps>
+
+### Font Configuration Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `fontConfig` | `FontConfig` | Maps font weights to font family names |
+| `fontsLoaded` | `boolean` | Indicates whether fonts have finished loading |
+| `onFontLoadError` | `(error: string) => void` | Callback for font loading errors |
+| `showLoadingSplash` | `boolean` | Shows loading screen while fonts load |
+| `splashDuration` | `number` | Minimum splash screen duration |
+
+<Aside type="tip" title="Font Loading Best Practices">
+- Always handle font loading errors gracefully
+- Use splash screens to prevent layout shifts
+- Provide fallback fonts for better user experience
+- Test font loading on different devices and network conditions
+</Aside>
+
 ## Internationalization (i18n)
 
 ### Complete i18n Setup

apps/example/app/_layout.tsx

@@ -35,11 +35,6 @@ const fontConfig = utils.createExpoFontConfig({
 });
 
 export default function RootLayout() {
-  // const [loaded, error] = useFonts({
-  //   SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf') as FontSource,
-  //   ...FontAwesome.font,
-  // });
-
   const [fontsLoaded, error] = useFonts({
     'Poppins-Regular': Poppins_400Regular,
     'Poppins-Medium': Poppins_500Medium,

libs/rnc-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnc-theme",
-  "version": "0.1.12",
+  "version": "0.1.2",
   "funding": {
     "type": "github",
     "url": "https://github.com/masumrpg/react-native-components"