React Native props from App.js through react-navigation to Screen not working

user_1634084 0
Viewed 105

i tried first steps with Theming in react-native with react-native-paper but the first step is not working.

AppViewContainer

export default compose(

  lifecycle({
    componentDidMount() {
      if (Platform.OS === 'android') {
        // eslint-disable-next-line no-unused-expressions
        UIManager.setLayoutAnimationEnabledExperimental &&
        UIManager.setLayoutAnimationEnabledExperimental(true);
      }
    },
  }),
)(AppView);

AppView.js

export default function App() {
  return(
    <PaperProvider theme={theme}>  
      <Navigator  onNavigationStateChange={() => {  }} uriPrefix="/app" />
    </PaperProvider>
  )
}

Navigator

export default createAppContainer( createSwitchNavigator({
  AuthLoading: LoadingScreen,
  App: AppStack,
  Tabs: TabNavigator,
  Auth: AuthStack,
},
{
  initialRouteName: 'AuthLoading',
}
));

in next step my HomeScreen is coming but there

this.props.theme //undefined

It seems the props not going through react navigation. How i can tell the Navigator to loop it through?

Many Thx

react-navigation react-native
1 Answers

My Solution was now:

App.tsx - including redux

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { AppearanceProvider } from 'react-native-appearance';
import { Provider } from 'react-redux';
import { Main } from './src/main';
import store from "./src/store"; //redux store

export default function App() {
  return (
    <Provider store={store}> 
      <SafeAreaProvider>
        <AppearanceProvider>
          <Main />
        </AppearanceProvider>
      </SafeAreaProvider>
    </Provider>
  );
}

Main.tsx

import React from 'react';
import {
  Provider as PaperProvider,
  DefaultTheme,
  DarkTheme,
} from 'react-native-paper';
import { I18nManager } from 'react-native';
import * as Updates from 'expo-updates';
import { useColorScheme } from 'react-native-appearance';
import { PreferencesContext } from './context/preferencesContext';
import { RootNavigator } from './rootNavigator';

...

return (

<PreferencesContext.Provider value={preferences}>
  <PaperProvider
    theme={
      theme === 'light'
        ? {
            ...DefaultTheme,
            colors: { ...DefaultTheme.colors, 
              primary: 'red',
              background: '#f8f8f8',
              listbg: '#ffffff',
              bg: require('../assets/splash.png') 
            },
          }
        : {
            ...DarkTheme,
            colors: { ...DarkTheme.colors, 
              primary: '#1ba1f2',
              listbg: 'rgba(255, 255, 255, 0.1)',
              bg: require('../assets/splash.png')  
            },
          }
        }
      >
        <RootNavigator />
      </PaperProvider>
    </PreferencesContext.Provider>
  );
};

now u can use 'theme' in every function component with global defined values and switch between dark and light mode.

const theme = useTheme(); // imported from react-native-paper

The complete example found on github here: https://github.com/Trancever/twitterClone

if this info was useful, vote up. thx.

user_16340840
Related