N Kaushik

How to combine themes of React-Navigation and React native Paper

April 20, 2021

How to combine themes of React-Navigation and Paper:

React native paper and react navigation v5 can be used together and their themes can be combined to one.

Both react native paper and react navigation uses same theming pattern. So, both can be combined to one and the same object can be used with both.

How to combine both:

Both react native paper and react navigation provides two themes, one is dark theme and another is default theme. Both can be combined as like below:

import * as React from 'react';
import {
  NavigationContainer,
  DefaultTheme as NavigationTheme,
} from '@react-navigation/native';

import {
  DefaultTheme as PaperDefaultTheme,
  Provider as PaperProvider,
} from 'react-native-paper';

const AppTheme = {
  ...PaperDefaultTheme,
  ...NavigationTheme,
  colors: { ...PaperDefaultTheme.colors, ...NavigationTheme.colors },
};

export default function Main() {
  return (
    <PaperProvider theme={AppTheme}>
      <NavigationContainer theme={AppTheme}>
        <App />
      </NavigationContainer>
    </PaperProvider>
  );
}

Combining both themes makes it easier to apply global styling to the app components.