Theme from React Navigation and Paper doesn't work on the screens background

Question

I'm using themes from React Native Navigation and from React Native Paper, after some configuration everything works, titles, text, headers, etc. Except for the background of the screens.

I used Stack Navigator, Bottom Tab Navigator, and Top Tab Navigator, and only in the Top Tab Navigator screens is working the background color theme. In the other screens from Stack and Bottom Navigator the background is always white and the texts black.

I'm wrapping everything with PaperProvider and NavigationContainer, here is some code:

Custom Themes:

import { 
  DefaultTheme as PaperDefaultTheme,
  DarkTheme as PaperDarkTheme
} from 'react-native-paper';
import { 
  DefaultTheme,
  DarkTheme
} from '@react-navigation/native';

const CustomDefaultTheme = {
  ...DefaultTheme,
  ...PaperDefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    ...PaperDefaultTheme.colors,
    primary: '#A16E2E'
  }
}

const CustomDarkTheme = {
  ...DarkTheme,
  ...PaperDarkTheme,
  colors: {
    ...DarkTheme.colors,
    ...PaperDarkTheme.colors,
    primary: '#F9CA2E',
    card: '#000',
    background: '#000',
    border: '#FFFFFF',
  }
}
export { CustomDefaultTheme, CustomDarkTheme }

Applying themes:

export default MainApp = () => {

  const [isDarkTheme, setIsDarkTheme] = useState(false)
  const myFunction = useMemo(() => ({
    toggleTheme: () => {
      setIsDarkTheme(isDarkTheme => !isDarkTheme)
    }
  }))

  const theme = isDarkTheme ? CustomDefaultTheme : CustomDarkTheme
  
  return(
    <PaperProvider theme = {theme}>
      <myContext.Provider value = {myFunction}>
        <NavigationContainer theme = {theme}>
          <Stack_LoginRegister />
        </NavigationContainer>
      </myContext.Provider>
    </PaperProvider>
  )
}

NOTE: The problem existed before I added myContext.Provider, so that's not the problem.

Screen with Top Tab Navigator, nested with Stack and Bottom Tab Navigator

Screen with only Stack Navigator

And thats how the background color only applys on screens with TopTab Navigator. I hoppe someone can help me. Thank you so much!

score 0 · Answer 1 · answered Feb 11 '22 at 21:11

Maybe I'm too late here. I think your problem is that your are not importing the theme from the Navigation. You have use the PaperDarkTheme for the Navigation as well.

import * as React from 'react';
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import {
  DarkTheme as PaperDarkTheme,
  Provider as PaperProvider,
} from 'react-native-paper';

export default function Main() {
  return (
    <PaperProvider theme={PaperDarkTheme}>
      <NavigationContainer theme={DarkTheme}>
        {/* content */}
      </NavigationContainer>
    </PaperProvider>
  );
}

Source: Reac Navigation

Theme from React Navigation and Paper doesn't work on the screens background

1 Answers1