How to pass props from parent component to a switch navigator?

How to / Third Party Tooling
1

This is my App.js . The first component that gets mounted when I open my app.

import React from 'react';
import {Provider} from 'react-redux'
import store from './src/redux/index'
import Container from './src/index'

export default class App extends React.Component{
  render(){
    return (
      <Provider store={store}>
        <Container/>
      </Provider>
    );
  }
}

The Container component referred in above code is actually as follows:

import { createSwitchNavigator, createAppContainer } from 'react-navigation'
import LoginScreen from './screens/LoginScreen'
import Homepage from './screens/Homepage'

const AppNavigator = createSwitchNavigator({
    Login : {
        screen : LoginScreen
    },
    Home: {
        screen: Homepage
    }
},
{
    initialRouteName: 'Login'
})

export default createAppContainer(AppNavigator)

I want to use AppLoading component in App.js to load font and images asynchronously and then pass them as props to the switch navigator (Container component). How may I go doing that? I know I can pass props like this:

<Container font={'someFont'} image={appLogo} />

But how should I retrieve them in switch navigator and send them further down?

2

You might want to give screenProps a look (https://reactnavigation.org/docs/en/navigation-options.html). You can do something like <Container screenProps={{ font: ..., image: ...}} /> and then those props will be available in this.props.screenProps on any screens in the navigation hierarchy.