CODEWITHSUNDEEP
react-nativereact-navigationreact-native-paper
Asif Rahman
Asif Rahman

Reputation: 465

React native paper theme with react navigation not working

I am new to react-native. I was working with react native paper to provide a theme to all screens. I am also using a react-navigation stack navigator and drawer navigator. First of all with navigation the paper theme is not working in the navigated component. But if I don't use react-navigation then it works.

So I tried to pass theme from component to component by "withTheme". But withTheme is not giving me my custom theme props.

This is my App.js

import { DefaultTheme,Provider as PaperProvider, Drawer, Avatar, withTheme } from 'react-native-paper';
import { createAppContainer,createSwitchNavigator } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer' 

const theme = {
  ...DefaultTheme,
  roundness: 8,
  colors: {
    ...DefaultTheme.colors,
    primary: '#ff0000',
    accent: '#000000',
    text: "#cc1111",
    background: "#000000",
    contained: '#000000'
  },
  dark: true
};

class App extends Component {

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

const switchNavigator = createSwitchNavigator({
  Login: Login,
  dranav: drawyerNavigator
},
{
  initialRouteName: "Login",

})
export default  createAppContainer(switchNavigator);

This is my login.js

class Login extends Component{
    state = {
       emailtext: '',
       passwordtext: ''
    };
    componentDidMount() {
        SplashScreen.hide();
    }
    render(){
       const {navigate} = this.props.navigation;
       const { colors } = this.props.theme;
       console.log({colors.accent})
   }

}
export default withTheme(Login)

In my Login.js I was expecting "colors.accent" to give a value of my custom theme like this value -- "#000000". But it's giving me = "#03DAC4" which is the default color for accent, not my custom color.

I am using react-native version 0.61. please suggest what am I doing wrong. Also is there a better way to pass a react-native paper theme with navigation. I want a global theme for all screens

Thanks

Upvotes: 3

Views: 6901

Answers (1)

satya164
satya164

Reputation: 10145

You are wrapping switch navigator in the component App, but not using it anywhere. You need to wrap and export the container instead:

const Navigation = createAppContainer(switchNavigator);

export default function App() {
  return(
    <PaperProvider theme={theme}>  
      <Navigation />
    </PaperProvider>
  )
}

Upvotes: 5

Related Questions