Expo/ReactNativeElements/Storybook, extending theme issues

Question

I am working on finding a way to create a ReactNativeElements UI library for our team, with Expo as our development environment (we use Expo on existing deployed apps), and using Storybook to create the library. I found the official Expo "With Storybook" template to start the project. One thing we want to do is utilize our company theme, which is a different format than the Colors theme shape that ReactNativeElements has as default.

The v4 RNE docs suggest that you can extend the default theme, so I have been trying to follow this instruction. One note is that the docs are not correct in v4, because creating the react-native-elements.d.ts is for v3, but now we need to create a @rneui/themed d.ts file.

The issue I run into is:

1. when creating my custom ColorShape and then inject to the ThemeProvider, the new shape is not accepted (unless I create the definition in the same file as initializing the ThemeProvider
2. the actual shape myColorShape.text.primary is not found

Step 1: create // @rneui.themed.d.ts.

import "@rneui/themed";
import { ColorShape } from "../theme/colors/theme.type";

declare module "@rneui/themed" {
    export interface CreateThemeOptions {
       fluidColors: ColorShape;
    }
}

Step 2: initialize the ThemeProvider in preview.ts for Storybook to consume

const withThemeProvider = (Story, context) => {
  const colors = useDarkMode() ? dark : light;

  const themeObj = createTheme({
    fluidColors: colors
  })
//  themeObj.fluidColors.backgroundColor is not found, `fluidColors` doesn't have any of the actual `ColorShape` as describe in the d.ts above??

  return (
    <ThemeProvider theme={themeObj}>
        {children}
    </ThemeProvider>
  );
};

Note on step 2: if I DO NOT declare module "@rneui/themed" inside this preview file, TS error:

Argument of type '{ fluidColors: ColorShape; }' is not assignable to parameter of type 'CreateThemeOptions'. Object literal may only specify known properties, and 'fluidColors' does not exist in type 'CreateThemeOptions'

This is really odd because I also have the d.ts file.

Step 3: Consume the theme in a simple component:

import { Button as RNEButton, ButtonProps } from '@rneui/base';
import { ThemeContext, useTheme } from '@rneui/themed';
import { useContext } from 'react';

const Button = (props: ButtonProps) => {
  const { theme } = useTheme();
// theme.fluidColors does not exist
  const themeContext = useContext(ThemeContext);
// themeContext.theme does not contain the colors either

  return <RNEButton {...props} buttonStyle={{
    backgroundColor: '#19AFEB', // should be theme.fluidColors.backgroundColor
    borderRadius: 32,
  }}
  titleStyle={{
    color: '#FFF', // should be theme.fluidColors.text.primary
  }}
  />;
};

I have created a repo @: https://github.com/lucksp/expo-storybook

Any ideas on this?

Answer 1

add themed.d.ts in root project (sibling of package.json) and custom theme like following.

// themed.d.ts
import "@rneui/themed";
import { TextStyle } from "react-native";

declare module "@rneui/themed" {
  export interface InputProps {
    required?: boolean;
    labelNumber?: number;
  }

  export interface TextProps {
    h5?: boolean;
    h5Style?: TextStyle;
    h6?: boolean;
    h6Style?: TextStyle;
    body?: boolean;
    bodyStyle?: TextStyle;
    caption?: boolean;
    CaptionStyle?: TextStyle;
    bold?: boolean;
    italic?: boolean;
    underline?: boolean;
    center?: boolean;
  }

  export interface ComponentTheme {
    Input: Partial<InputProps>;
    Text: Partial<TextProps>;
  }
}

I'm useing:

• Expo 49
• react native 0.72.5
• rneui 4.0.0-rc.8