Theme Provider

The previous solution works great for only one component, but imagine having to do this for every component you want custom styles for. That could get a bit tedious to manage. Thankfully, there's a better way to do this. React Native Elements ships with a 3 utilities for large-scale theming.

Firstly you'll want to set up your ThemeProvider.

import { ThemeProvider, Button, createTheme } from '@rneui/themed';

const theme = createTheme({
  components: {
    Button: {
      raised: true,
    },
  },
});

// Your App
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button title="My Button" />
      <Button title="My 2nd Button" />
    </ThemeProvider>
  );
};

The example above achieves the same goals as the first example — apply the same styles to multiple instances of Button in the app. However this example applies the raised prop to every instance of Button inside the component tree under ThemeProvider. Both of these buttons will have the raised prop set to true.

This is extremely convenient and is made possible through React's Context API.

---

use-theme hook

Hook returns theme, updateTheme & replaceTheme from ThemeProvider context or default theme if you did not wrap application with ThemeProvider.

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

function Demo() {
  const { theme } = useTheme();
  return <View style={{ background: theme.colors.primary }} />;
}

---

use-theme-mode hook

You can get current theme mode (light or dark) and update it using setMode function from useThemeMode hook.

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

function Demo() {
  const { mode, setMode } = useThemeMode();

  return <Button onPress={() => setMode('dark')} title={mode} />;
}