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

Question

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

Answer 1

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.