How to create a custom theme for React Navigation (with correct types)

React Navigation uses DefaultTheme by default. To extend the theme, you can create a new object with the properties you want to add or modify. Let’s add a customColor to the theme as an example.

import { DefaultTheme } from "@react-navigation/native";

export const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    customColor: "#ccc",
  },
};

You can use the typeof operator to get the type of the object.

export type Theme = typeof customTheme;

Next, create a globals.d.ts file with the following content.

import type { Theme } from "./src/theme";

declare module "@react-navigation/native" {
  export function useTheme(): Theme;
}

Now, you can use the extended theme in your components as usual.

const theme = useTheme();

The theme object will contain all the new properties with the correct types.