CODEWITHSUNDEEP
react-nativeexpothemesreact-navigationreact-native-paper
Lando Sotelo
Lando Sotelo

Reputation: 91

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

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 Top Tab Navigator

Screen with only Stack 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!

Upvotes: 1

Views: 2003

Answers (1)

Nathan Lo Sabe
Nathan Lo Sabe

Reputation: 327

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

Upvotes: 0

Related Questions