Theming is not working

[ratheesh-vr]

Is there an existing issue for this?

• [X] I have searched the existing issues

Explain what you did

I tried to them a Button. But its not working. Tested only in ios.

const theme = createTheme({
  components: {
    Button: {
      containerStyle: {
        margin: 10,
        backgroundColor: 'red',
      },
      titleStyle: {color: 'yellow'},
    },
  },
});

<ThemeProvider theme={theme}>
      <Button title="Themed Button" />
  </ThemeProvider>

@rneui/base: "^4.0.0-rc.7", @rneui/themed: "^4.0.0-rc.8", react": "18.2.0 react-native": "0.72.5

Expected behavior

Button should have red background and yellow title color

Describe the bug

There is no effect of theming, Button appear with default background color and text color

Steps To Reproduce

Create app, add theme and render component

Screenshots

No response

Your Environment

`npx @rneui/envinfo`

  ```
    Output from `npx @rneui/envinfo` goes here.
  ```

[Pierre-Monier]

It also looks like background is not set in dark mode, with this :

const theme = createTheme({
  mode: "dark",
});

function App(): JSX.Element {
  return (
    <ThemeProvider theme={theme}>
      <Text>Test</Text>
    </ThemeProvider>
  );
}

export default App;

The text is white, but the background is also white

(version 4.0.0-rc.8, react-native: 0.72.7)

[JaweedVenturedive]

@ratheesh-vr In order to give background colour, you need to pass background colour on buttonStyle object like this const theme = createTheme({ components: { Button: { buttonStyle={ backgroundColor: 'red', } containerStyle: { margin: 10, }, titleStyle: {color: 'yellow'}, }, }, });

[khushal87]

Hey @ratheesh-vr, does the above suggestion by @JaweedVenturedive work for you? If yes, please feel free to close the issue.

[coder-xiaomo]

@khushal87 I face the same question, and @JaweedVenturedive 's solution didn't work for me.

Problem Description

In my AppContent component, I have some rneui buttons, dialogs, and some other components.

Same as @ratheesh-vr, I try to set Button & Dialog global style. But its not working. Tested only in android.

The current situation is that:

1. the entire theme.components section does not take effect (all the rneui components style seemed as default)
2. the theme.mode section does not seem to be effective for rneui components (but for custom theme.colors.xxx it works fine with theme.lightColors theme.darkColors).

Environment

React Native: "0.73.4", (latest version currently) @rneui/base: "^4.0.0-rc.7", (the same as @ratheesh-vr) @rneui/themed: "^4.0.0-rc.8", (the same as @ratheesh-vr)

Settings

Here is my settings:

ThemeUtils.js

import {createTheme} from '@rneui/themed';

const theme = createTheme({
  lightColors: {
    primary: '#e7e7e8',
  },
  darkColors: {
    primary: '#000',
  },
  mode: 'dark',
  components: {
    Button: {
      titleStyle: {
        color: 'red',
        backgroundColor: 'black',
      },
    },
    Dialog: {
      overlayStyle: {
        backgroundColor: 'blue',
      },
    },
  },
});

export default theme;

And App.tsx:

import {ThemeProvider} from '@rneui/themed';
import theme from './src/utils/ThemeUtils';
// other imports

function App(): React.JSX.Element {
  return (
    <SafeAreaProvider>
      <ThemeProvider theme={theme}>
        <AppContent key={key} />
      </ThemeProvider>
    </SafeAreaProvider>
  );
}

Maybe it's a bug?

[coder-xiaomo]

Sorry for my mistake, theming is working. It's not a bug.

By read the source from packages/themed/src/config/withTheme.tsx, I found that the style was merged in the packages/themed(source of '@rneui/themed'), not this one packages/base(source of '@rneui/base')

I mistook the import:

import { Button, Divider, Dialog } from '@rneui/base'; // wrong, through it can run without errors import { Button, Divider, Dialog } from '@rneui/themed'; // correct ones

the component from '@rneui/themed' take the custom styles while the component from '@rneui/base' take the default themes