Themes

Themes allow you to change the colors and fonts of various components provided by React Navigation. You can use themes to:

• Customize the colors and fonts to match your brand
• Provide light and dark themes based on the time of the day or user preference

Basic usage

To pass a custom theme, you can pass the theme prop to the navigation container.

Static

import * as React from 'react';
import { createStaticNavigation, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'rgb(140, 201, 125)',
    primary: 'rgb(255, 45, 85)',
  },
};

const Navigation = createStaticNavigation(MyTabs);

export default function App() {
  return (
    <Navigation
      theme={MyTheme}
    />
  );
}

Dynamic

import * as React from 'react';
import { DefaultTheme, NavigationContainer } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'rgb(140, 201, 125)',
    primary: 'rgb(255, 45, 85)',
  },
};

export default function App() {
  return (
    <NavigationContainer
      theme={MyTheme}
    >
      <MyTabs />
    </NavigationContainer>
  );
}

You can change the theme prop dynamically and all the components will automatically update to reflect the new theme. If you haven't provided a theme prop, the default theme will be used.

Properties

A theme is a JS object containing a list of colors to use. It contains the following properties:

• dark (boolean): Whether this is a dark theme or a light theme
• colors (object): Various colors used by react navigation components:
  • primary (ColorValue): The primary color of the app used to tint various elements. Usually you'll want to use your brand color for this.
  • background (ColorValue): The color of various backgrounds, such as the background color for the screens.
  • card (ColorValue): The background color of card-like elements, such as headers, tab bars etc.
  • text (ColorValue): The text color of various elements.
  • border (ColorValue): The color of borders, e.g. header border, tab bar border etc.
  • notification (ColorValue): The color of notifications and badge (e.g. badge in bottom tabs).
• fonts (object): Various fonts used by react navigation components:
  • regular (object): Style object for the primary font used in the app.
  • medium (object): Style object for the semi-bold variant of the primary font.
  • bold (object): Style object for the bold variant of the primary font.
  • heavy (object): Style object for the extra-bold variant of the primary font.

The style objects for fonts contain the following properties:

• fontFamily (string): The name of the font family (or font stack on Web) to use, e.g. Roboto or Helvetica Neue. The system fonts are used by default.
• fontWeight (string): The font weight to use. Valid values are normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900.

When creating a custom theme, you will need to provide all of these properties.

Example theme

import { Platform } from 'react-native';

const WEB_FONT_STACK =
  'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';

const MyTheme = {
  dark: false,
  colors: {
    primary: 'rgb(255, 45, 85)',
    background: 'rgb(242, 242, 242)',
    card: 'rgb(255, 255, 255)',
    text: 'rgb(28, 28, 30)',
    border: 'rgb(199, 199, 204)',
    notification: 'rgb(255, 69, 58)',
  },
  fonts: Platform.select({
    web: {
      regular: {
        fontFamily: WEB_FONT_STACK,
        fontWeight: '400',
      },
      medium: {
        fontFamily: WEB_FONT_STACK,
        fontWeight: '500',
      },
      bold: {
        fontFamily: WEB_FONT_STACK,
        fontWeight: '600',
      },
      heavy: {
        fontFamily: WEB_FONT_STACK,
        fontWeight: '700'