React-native-paper: How to add custom colors/attributes to the theme?

[indigoviolet]

Previously: #317, #568, #799, but I don't think the question has been answered:

What is the recommended way to pass custom attributes (eg. custom accent colors besides the one accent property) through the theme? The typescript type currently makes this inconvenient.

One way is to make a separate auxTheme object and pass it through a custom context, but it would be nicer to be able to use a single theme object.

Perhaps adding a auxiliary: any key to the theme type will be sufficient? Perhaps we can make Provider take a generic type for the auxiliary object, or infer it?

[kamui545]

This is bugging me so much as well.

I just managed to do something like that:

// app/themes.ts

import {
  DefaultTheme as PaperDefaultTheme,
  Theme as PaperTheme,
} from 'react-native-paper';

export interface Theme extends PaperTheme {
  custom: {
    muted: string;
  };
}

export const DefaultTheme: Theme = {
  ...PaperDefaultTheme,
  colors: {
    ...PaperDefaultTheme.colors,

    //
  },
  custom: {
    muted: '#ccc',
  },
};

and then use as to give the new Theme Interface:

import { Theme } from 'app/themes';

const { colors, custom } = useTheme() as Theme;

Not sure if it is the right way, I am no expert tbh, but at least it is working for me.
TypeScript is not yelling about it and your IDE will also benefit from the autocomplete.

If anyone knows how to "merge" the types of colors in the interface, that would be even better.

Edit: Ok found it

import {
  DefaultTheme as PaperDefaultTheme,
  DarkTheme as PaperDarkTheme,
  Theme as PaperTheme,
} from 'react-native-paper';

type CustomColors = {
  muted: string;
};

type PaperColors = PaperTheme['colors'];
type Colors = PaperColors & CustomColors;

export interface Theme extends PaperTheme {
  colors: Colors;
}

export const DefaultTheme: Theme = {
  ...PaperDefaultTheme,
  colors: {
    ...PaperDefaultTheme.colors,
    muted: '#ccc',
  },
};

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[kamui545]

https://github.com/callstack/react-native-paper/issues/1835

Let's hope they find a sexy implementation for 4.0 ❤️

[kamui545]

Support has been merged (#2002) and it is now available on react-native-paper@^4.0.0-alpha.2, just tried it out and it works like a charm.

Usage:

declare global {
  namespace ReactNativePaper {
    interface ThemeColors {
      myOwnColor: string;
    }
    interface Theme {
      myOwnProperty: boolean;
    }
  }
}