Add Custom Color in Theme React Native Paper-CodePudding

I would like to add some custom colors in my theme, I'm new in React Native but I don't find something related about how to do it.

import { DefaultTheme } from 'react-native-paper';

const LightTheme: ReactNativePaper.Theme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        accent: '#6A148E',
        primary: '#6A148E',
        background: '#FFFFFF',
        placeholder: '#666666',
        error: '#EB0043',
        text: '#000000',
        disabled: '#EAEAEA',
        onSurface: '#AB70EB',
        myColor: '#464646',
    },
    fonts: {
        ...DefaultTheme.fonts,
    },
    animation: {
        ...DefaultTheme.animation,
    },
};

export default LightTheme;

Can you help me? thank you

CodePudding user response：

You can add them this way:

declare a global override

declare global {
  namespace ReactNativePaper {
    interface ThemeColors {
      //Add your colors here
      myColor: string;
    }
  }
}



//Your main theme
const myLightTheme: ReactNativePaper.Theme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        accent: '#6A148E',
        primary: '#6A148E',
        background: '#FFFFFF',
        placeholder: '#666666',
        error: '#EB0043',
        text: '#000000',
        disabled: '#EAEAEA',
        onSurface: '#AB70EB',
    },
    fonts: {
        ...DefaultTheme.fonts,
    },
    animation: {
        ...DefaultTheme.animation,
    },
};
//Combine them
 const LightTheme = {
  ...myLightTheme
  colors: {
    ...myLightTheme
    myColor: "#333444"
  },
};
//Export it
export default LightTheme;

There is probably a better way to combine the types, but this works. You can find more about this here, under typescript section: https://callstack.github.io/react-native-paper/theming.html