Using theme with custom components

[xelmido]

Is there an existing issue for this?

• [X] I have searched the existing issues

Explain what you did

I am trying to pass the theme styling to my own component. I wrapped my component with the hoc withTheme. But i dont get te props. Maybe i am doing something wrong or it's a bug.

PageHeader.tsx

export type PageHeaderComponentProps = {
  title: string;
  style?: StyleProp<TextStyle>;
};

export const PageHeader = withTheme<PageHeaderComponentProps>(props => {
 //props.style is undefined <--- 
  return <Text style={props.style}>{props.title}</Text>;
});

Theme

export const Theme = createTheme({
  lightColors: {
    primary: primaryColor,
  },
  components: {
    Input: {
      labelStyle: {
        alignSelf: 'flex-start',
        letterSpacing: 0.4,
        fontWeight: 'normal',
        marginTop: -7,
        paddingLeft: 5,
        fontSize: 12,
        paddingRight: 10,
        backgroundColor: '#fff',
        color: textColor,
      },
      inputStyle: {
        fontSize: 16,
        borderBottomWidth: 0,
      },
      inputContainerStyle: {
        paddingLeft: 5,
        borderBottomWidth: 0,
      },
    },
    PageHeader: {style: {fontSize: 32, marginBottom: 30}},
  },
});

My themed.d

import '@rneui/themed';
import {PageHeaderComponentProps} from 'atoms/PageHeader';

declare module '@rneui/themed' {
  export interface ComponentTheme {
    PageHeader: Partial<PageHeaderComponentProps>;
  }
}

 <ThemeProvider theme={Theme}>
      <View style={GlobalStyles.container}>
        <ScrollView>
          {route.params && <PageHeader title={route.params.pageTitle} />}

          {children}
        </ScrollView>
        ...........

Expected behavior

Expect to get props style in the component from the heme

Describe the bug

I am getting undefined

Your Environment

`npx @rneui/envinfo`

React Native Elements Env Info

## Global Dependencies:

   No related dependency found

## Local Dependencies:

 - @rneui/base : ^4.0.0-rc.6
 - @rneui/themed : ^4.0.0-rc.6
 - react : 18.0.0
 - react-native : 0.69.1
 - @rneui/envinfo : ^1.1.2
 - @types/react-native : ^0.69.1

[arpitBhalla]

Hey in withTheme you need to add theme key as well which you defined in theme, in your case it would be PageHeader Try this

export const PageHeader = withTheme<PageHeaderComponentProps>(props => {
 //props.style is undefined <--- 
  return <Text style={props.style}>{props.title}</Text>;
},'PageHeader');

[xelmido]

Hey!

Thanks! That worked. I thought it was an optional key.

Maybe a suggestion to add it to the docs / example?

[arpitBhalla]

If we do like this export default withTheme(PageHeader); (Named function) then we don't need key, else it's required to specify.

Feel free to add it to docs.

[xelmido]

Thanks for clarifying! I tried the named function before. But with no luck.