Theme Provider

The RNCProvider is the foundation of the RNC Theme system. It provides theme context to your entire application and manages theme state, persistence, and switching.

Basic Setup

Minimal Configuration

import React from 'react';
import { RNCProvider } from 'rnc-theme';
import { YourApp } from './YourApp';

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

Recommended Configuration

_layout.tsx

import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { RNCProvider } from 'rnc-theme';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import 'react-native-reanimated';

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  if (!loaded) {
    return null;
  }

  return (
    <RNCProvider defaultTheme="system">
      <GestureHandlerRootView>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="+not-found" />
        </Stack>
        <StatusBar style="auto" />
      </GestureHandlerRootView>
    </RNCProvider>
  );
}

Configuration Options

Core Properties

type ThemeMode = 'light' | 'dark' | 'system';
<RNCProvider defaultTheme="system">
  {/* App content */}
</RNCProvider>

Options:

• 'light' - Always use light theme
• 'dark' - Always use dark theme
• 'system' - Follow device system preference (recommended)

Advanced Configuration

Toast Configuration

<RNCProvider toast={{
    maxToasts: 4, // Maximum number of toasts
    position: "bottom", // 'top' | 'bottom'
  }}>
  {/* App content */}
</RNCProvider>

i18n Configuration

<RNCProvider
  i18nConfig={{
    defaultLocale: "en", // Default locale
    translations: {
      en: {
        /* English translations */
      },
      id: {
        /* Indonesian translations */
      },
    },
  }}>
  {/* App content */}
</RNCProvider>

Bottom Sheet Props

<RNCProvider bottomSheetProps={{
    backgroundColor: "rgba(0, 0, 0, 0.5)", // Background color for bottom sheets
    // and more
  }}>
  {/* App content */}
</RNCProvider>

Global Theme

<RNCProvider
  customDarkTheme={{}} // for dark theme
  customLightTheme={{}} // for light theme
>
  {/* App content */}
</RNCProvider>

Integration Patterns

With Expo Router

app/_layout.tsx

import { RNCProvider } from 'rnc-theme';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';

export default function RootLayout() {
  return (
    <RNCProvider
      defaultTheme="system"
    >
      <StatusBar style="auto" />
      <Stack screenOptions={{ headerShown: false }} />
    </RNCProvider>
  );
}

With Redux/Zustand

Redux

import { Provider } from 'react-redux';
import { RNCProvider } from 'rnc-theme';
import { store } from './store';

export default function App() {
  return (
    <Provider store={store}>
      <RNCProvider defaultTheme="system">
        {/* App content */}
      </RNCProvider>
    </Provider>
  );
}

Zustand

import { RNCProvider } from 'rnc-theme';
import { useThemeStore } from './stores/themeStore';

export default function App() {
  const { themeMode } = useThemeStore();

  return (
    <RNCProvider defaultTheme={themeMode}>
      {/* App content */}
    </RNCProvider>
  );
}

Theme Context Access

Once RNCProvider is set up, you can access theme context anywhere in your component tree:

Using useTheme Hook

import { useTheme } from 'rnc-theme';

function MyComponent() {
  const {
    theme, // Current theme object
    themeMode, // Current theme mode ('light', 'dark', 'system')
    setThemeMode, // Function to set the theme mode ('light', 'dark', 'system')
    isDark, // Boolean indicating if the current theme is dark
    resetTheme, // Function to reset the theme to default
    updateCustomTheme, // Function to update the custom theme for changes other themes
    activePreset, // Current active preset theme
  } = useTheme();

  return (
    <View style={{ backgroundColor: theme.colors.background }}>
      <Text style={{ color: theme.colors.text }}>
        Current mode: {mode}
      </Text>
    </View>
  );
}

Performance Considerations

Memoization

All theme calculations are automatically memoized to prevent unnecessary re-renders.

Efficient Updates

Only components using changed theme properties re-render during theme switches.

Common Patterns

❌ Bad

screen.tsx

// ❌ Bad: Nested providers
function Screen() {
  return (
    <RNCProvider> {/* Don't nest providers */}
      <Content />
    </RNCProvider>
  );
}

✅ Good

_layout.tsx

// ✅ Good: Provider at app root
export default function App() {
  return (
    <RNCProvider defaultTheme="system">
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    </RNCProvider>
  );
}

API Reference

Need more details?

For complete details about the RNCProvider API and all available configuration options, check out our API reference documentation. The reference includes detailed explanations of all props, methods, and usage examples to help you get the most out of the theme provider.