rne-theming.md

Motivation

Currently we can extend the default theme using TS declaration merging feature, like

declare module 'react-native-elements' {
  export interface TextProps {
    h5: boolean;
    h5Style: StyleProp<TextStyle>;
  }
  export interface FullTheme {
    Text: Partial<TextProps>;
  }
}

But we can't change component's default behavior, For eg.

const theme= createTheme({
  Text:{
        h5Style:{fontSize:8}
   }
 });

const App = ()=> <ThemeProvider theme={theme}>....

<Text h5 /> will not implement fontSize:8, as we haven't changed behaviour in the component.

Implementation

We can do it by having type of Text in FullTheme as TextProps | (props:TextProps)=>TextProps and will pass props in withTheme HOC

const theme = createTheme({
 Text: (prop)=>({
    style: prop.h5 &&{ fontSize:8 }
 })
});

so we can use it as <Text/> or <Text h5/>