Theming Guide

Theme your app with @sohantalukder/rn-kit

RN Kit Theme System

This boilerplate uses @sohantalukder/rn-kit as the shared source for themes, screen wrappers, typography, spacing, and overlay UI. Keep feature-specific layouts in modules, and use RN Kit for reusable primitives.

Theme Provider

Wrap the app once with RN Kit's ThemeProvider and share colors, typography, spacing, and layout helpers everywhere.

Default, Dark, System

Switch between default, dark, and system theme modes with the useTheme hook.

Overlay Portals

Use UiPortalProvider when the app needs toast, dialog, bottom sheet, or context menu APIs.

React Navigation Ready

Pass theme.navigationTheme to NavigationContainer when navigation should follow the active theme.

Open RN Kit Theming Docs

Provider Setup

Add RN Kit providers near the root of the app. Include UiPortalProvider whenever you use global overlays such as toast, dialog, bottom sheet, or context menu.

import {
  ThemeProvider,
  UiPortalProvider,
} from '@sohantalukder/rn-kit';

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      <UiPortalProvider>{children}</UiPortalProvider>
    </ThemeProvider>
  );
}

Using Theme Values

Read the active theme from useTheme and compose UI with RN Kit tokens instead of hardcoded colors and spacing.

import { Text, useTheme } from '@sohantalukder/rn-kit';
import { View } from 'react-native';

export function ProfileHeader() {
  const { colors, gutters, layout, typographies } = useTheme();

  return (
    <View
      style={[
        layout.itemsCenter,
        gutters.paddingHorizontal_32,
        { backgroundColor: colors.background },
      ]}
    >
      <Text
        variant="heading1"
        weight="bold"
        style={typographies.heading1}
      >
        Welcome back
      </Text>
    </View>
  );
}

Theme Switching

Use changeTheme from RN Kit to switch between default, dark, and system modes.

import { Button, useTheme } from '@sohantalukder/rn-kit';

export function ThemeToggleButton() {
  const { changeTheme, variant } = useTheme();

  return (
    <Button
      text="Toggle theme"
      onPress={() =>
        changeTheme(variant === 'default' ? 'dark' : 'default')
      }
    />
  );
}

Navigation Theme

RN Kit exposes a navigationTheme value so React Navigation can match the selected app theme.

import { NavigationContainer } from '@react-navigation/native';
import { useTheme } from '@sohantalukder/rn-kit';

export function RootNavigator() {
  const { navigationTheme } = useTheme();

  return (
    <NavigationContainer theme={navigationTheme}>
      {/* navigators */}
    </NavigationContainer>
  );
}

Best Practices

Keep the boilerplate aligned with RN Kit instead of building a second theme system.

Do
  • Use useTheme for colors, layout, and typography.
  • Use RN Kit components for reusable UI.
  • Keep feature-only styles close to the feature.
  • Link to RN Kit docs for full API details.
Avoid
  • Adding a parallel local theme system.
  • Copying shared UI primitives into the boilerplate.
  • Hardcoding palette values in reusable components.
  • Mixing unrelated theme providers for app UI.

Next Steps

RN Kit Website

Browse complete theming and component documentation.

Components

Learn how this boilerplate uses RN Kit components.