react-nativereact-native-elementscustom-theme

React Native Elements theme is not working


I am creating a react native app. For my component ui library i choosed react-native-elements. Now i want to apply my own theme to it, however it is not working 100%. When i want to override the styles of the RNE-Components, it's not working.

Here is how i did it. This is my App Component. i keep it simple, that only the important things are shown. So i create my theme on top of the component. Than i pass my theme to the Theme Provider.

The colors are working. I can use the useTheme() Hook in my other components and access the several colors (primary, success, ...)

The problem comes with the component section of my theme. For the sake of simplicity, i just added the Text component here. But it's not working with any other of the available components.

So basicalle the color for h1, and the fontSize and color for normal texts are not beeing applied to my RNE-Components. What am i missing here?

BTW: I am using this versions: "@rneui/base": "^4.0.0-rc.7", "@rneui/themed": "^4.0.0-rc.7",

const theme = createTheme({
  components: {
    Text: {
      h1Style: {
        color: '#d20eb8',
      },
      style: {
        backgroundColor: 'green',
        fontSize: 28,
        color: 'orange',
      },
    },
  },
  lightColors: {
    primary: '#208bbb',
    success: '#20bb5e',
    grey0: '#2D2D2D',
  },
  darkColors: {
    primary: '#6b056e',
    success: '#086e31',
    grey0: '#c0c0c0',
  },
  mode: 'light',
});

`const App: React.FC = () => {
  return (
    <ThemeProvider theme={theme}>
      <Text>Test Text</Text>
      <Text h1>Test Text</Text>
    </ThemeProvider>
  );
};
export default App;

Thanks in advance.


Solution

  • Repeat answer from @Splix (Thank you!)

    For everyone who is facing the same problem. React Native Elements has 2 npm packages. 1.@rneui/base. 2.@rneui/themed If you want to use a theme, you need to import all of the RNE-Components form the themed package and not from the base package