React Native Paper Dark Theme

user_1705266 0
Viewed 7181

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>
  );
}
react-native-paper react-native javascript
1 Answers

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

user_14357220
Related