Where to initialize data loading using interactive navigation

Question

I use react-navigationand here is my structure:

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 is as follows:

• StackNavigator (Root)
  • DrawerNavigator (Index)
    • Tabnavigator
      • Mypage
      • MyPage (same page formatted with different data)
      • ...

So my question is: where to download my data, initialize my application? I need to call somewhere once, call in front of other pages.

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

, splashscreen, .

App.js, , , ?

const MyApp = () => {

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

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

?

Answer 1

class MyApp extends Component {

  state = {
    initialized: false
  }

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

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

Answer 2

TabNavigator / , lazy: true, . , .

const Tabs = TabNavigator(
    {
      MyPage : {
        screen: MyPage
      },
      MyPage2 : {
        screen: MyPage,
        }
      }
    },
    {
        lazy: true
    }
);

MyPage, componentWillReceiveProps, , / . MyPage / ", ", .

, , , , , , . - :

class MyApp extends Component {

  state = {
    initialized: false
  }

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

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

class Root extends Component {
    componentDidMount() {
        SplashScreen.hide();
    }
...
}

Answer 3

App.js StackNavigator. , , StackNavigator , .

Answer 4

, . , , , TabNavigator tabBarOnPress, . .

https://reactnavigation.org/docs/navigators/tab#tabBarOnPress