Where to initialize data loading with react-navigation

Question

I'm using react-navigation and here is my structure :

The root stack navigator :

export const Root = StackNavigator({
Index: {
    screen: Index,
    navigationOptions: ({ navigation }) => ({

    }),
},
Cart: {
    screen: Cart,
    navigationOptions: ({ navigation }) => ({
        title: 'Votre panier',
        drawerLabel: 'Cart',
        drawerIcon: ({ tintColor }) => <Icon theme={{ iconFamily: 'FontAwesome' }} size={26} name="shopping-basket" color={tintColor} />
    }),
},
...

My structure looks like this :

• StackNavigator (Root)
  • DrawerNavigator (Index)
    • TabNavigator
      • MyPage
      • MyPage (same page formatted with different datas)
      • ...

So my question is, where do I load my data, initialize my application ? I need somewhere called once, called before the others pages.

The first page displayed in my application is the MyPage page. But as you can see, because of the TabNavigator, if I put my functions inside, it will be called many times.

Some will says in the splashscreen, but I'm using the main splashscreen component and I don't have many controls over it.

I thought about my App.js where we create the provider, but I don't think this is a good idea ?

const MyApp = () => {

    //TODO We're loading the data here, I don't know if it's the good decision
    ApplicationManager.loadData(store);
    SplashScreen.hide();

    return (
        <Provider store={store}>
            <Root/>
        </Provider>
    ); 
};

What is the good way to do it ?

Answer 1

class MyApp extends Component {

  state = {
    initialized: false
  }

  componentWillMount() {
    // if this is a promise, otherwise pass a callback to call when it's done
    ApplicationManager.loadData(store).then(() => {
      this.setState({ initialized: true })
    })
  }

  render() {
    const { initialized } = this.state
    if (!initialized) {
      return <SplashScreen />
    }
    return (
      <Provider store={store} >
        <Root />
      </Provider>
    );
  }
}