React Native Paper Dark Theme

Question

How do I set the theme to dark theme in React Native Paper? In all my screens, all the <View>'s still have white backgrounds.

const theme = {
      ...DarkTheme,
      colors: {
        ...DarkTheme.colors,
        primary: '#2d3436',
        accent: '#1C1C1C',
        background : '#636e72'
      }
    };

render() {
   return(
      <PaperProvider theme={theme}>
         <App />
      </PaperProvider>
  );
}

score 3 · Accepted Answer · answered Aug 12 '20 at 03:53

3

Applying a theme and provider level wont change all the views. You will have to use the 'withTheme' when exporting which would provide the theme prop which you can use to access the colors.

import { withTheme } from 'react-native-paper';
const Test = ({ theme,children }) => {
  const { colors } = theme;
  return (
    <View style={{ backgroundColor: colors.background }}>
     {children}
    </View>
  );
};

export default withTheme(Test);

If you want to use the same theme for all Views, create a custom wrapper component which sets the color like above

answered Aug 12 '20 at 03:53

Guruparan Giritharan

15,660
4
27
50

Is there a way to access the theme from a stylesheet file? I typically have separate stylesheet files for my components and it would be very useful to be able to access colors I set in the theme directly in my stylesheets. – Sam Aug 12 '20 at 04:04
As I know, the themes are passed via context so you need to access via the component – Guruparan Giritharan Aug 12 '20 at 04:08
3

Looks like I can do this: ``. I access the colors by doing this: `const { colors } = theme`; – Sam Aug 12 '20 at 04:20

score 0 · Answer 2 · answered Feb 27 '23 at 11:54

0

Instead of adding extra hooks on every screen/component you can configure the theme with react-navigation.

https://callstack.github.io/react-native-paper/docs/guides/theming-with-react-navigation#passing-theme-with-providers

answered Feb 27 '23 at 11:54

Domotor Zsolt

586
5
10

score 0 · Answer 3 · answered Mar 23 '23 at 00:21

You have to set the theme at <NavigationContainer theme={navigationTheme}>{your code}</NavigationContainer>.

The navigationTheme is of the type Theme, but react native paper theme is of the type MD3Theme, so you will have to addapt your MD3Theme to the type Theme.

I have made it like this

const navigationTheme = {
        dark: colorScheme === "dark",
        colors: {
          border: theme.colors.background,
          background: theme.colors.background,
          card: null,
          notification: theme.colors.outline,
          primary: theme.colors.primary,
          text: theme.colors.outline,
        },
      };

where theme is my preconfigured MD3Theme.

React Native Paper Dark Theme

3 Answers3