makeStyles on Bleeding Edge does not pass in custom color/extended theme colors

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

I am using the RNE Bleeding Edge version to create a custom color theme. However, when I makeStyles(), while the Typescript compiler thinks theme.myCustomColors exists, when the code runs on device, myCustomColors is not there.

Expected behavior

makeStyles theme will pass the custom colors theme to be available at run time

Describe the bug

When the code runs, the makeStyles function is not passing in custom color fields to the returned value of the function, and therefore, the custom/extended theme does not have the correct theme available.

Steps To Reproduce

1. create a custom theme file, similar to describe here: (https://reactnativeelements.com/docs/next/customization/typescript).  Something like `themed.d.ts` with contents: 



declare module '@rneui/themed' {

  export interface FullTheme {
    colors: RecursivePartial<Colors>;
    myColors: ColorShape;
  }

}

1. Inject the ThemeProvider with custom theme, such as:

export const AppTheme: React.FC = ({ children }) => {
  const colorScheme = useColorScheme();
  const myColors = colorScheme === 'light' ? lightColors : darkColors;

  const themeObj = {
    myColors,
  };

  const theme = createTheme(themeObj)

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;

1. In your component, create a custom style with makeStyles:

export const useSplashStyles = makeStyles<StyleOutput, StyleProps>(
  (theme) => {
    return ({
      content: {
        backgroundColor: theme.myColors?.backgroundColor,
      },
});

You can see TS thinks it’s happy

1. Run the app, you will see that on run time, the theme.myColors is missing

Screenshots

makeStyles does not have the correct theme obj

this appears to be because the makeStyles() function is returning specifically known theme.mode and theme.colors for default. It’s missing the custom/extended color theme

Your Environment

Bleeding edge RNE:
    "@rneui/base": "github:react-native-elements/react-native-elements#base",
    "@rneui/themed": "github:react-native-elements/react-native-elements#themed",

    "expo": "^44.0.6",

[arpitBhalla]

Extend the Colors

import '@rneui/themed';

import { ColorShape } from '../theme/colors/theme.type';

declare module '@rneui/themed' {
  export interface Colors extends ColorShape {}
}

add light and dark colors

const theme = createTheme({
  lightColors: {
    text: {
      primary: '#000',
    },
  },
  darkColors: {
    text: {
      primary: '#fff',
    },
  },
});

Also you can use updateTheme to update the color mode

const ColorModeSwitch = ({ children }) => {
  const { updateTheme } = useTheme();
  const colorScheme = useColorScheme();

  React.useEffect(() => {
    updateTheme({
      mode: colorScheme === 'dark' ? 'dark' : 'light',
    });
  }, [colorScheme]);
  return children;
};

Use above component as child of ThemeProvider

<ThemeProvider theme={theme}>
      <ColorModeSwitch>
		{...}
      </ColorModeSwitch>
    </ThemeProvider>

[lucksp]

If you like React Native Elements, could you please tweet about it? Actually I was thinking of showing some tweets on website.

DONE! https://twitter.com/Phlucks/status/1519426758201978880?s=20&t=v66gN9nADV0OYy51ilaXZA