CODEWITHSUNDEEP
react-nativereact-navigation
jskidd3
jskidd3

Reputation: 4783

Invoking a function in screen that succeeds the current one

My app has a welcome screen, and when a user presses 'continue' the app then transitions to the setup screen.

The first thing the setup screen does upon mounting is make a fetch to grab some configurable options from the server.

As users sit for a few seconds on the welcome screen, it would make more sense to fire this fetch then so that the welcome screen is effectively 'pre-loaded' with the options.

One option would be to make the fetch on the welcome screen and pass the options via props. I don't really like this option though as the fetch isn't really to do with the welcome screen, it's for the setup screen.

Is it possible to 'pre-load' the setup screen, or perhaps fire a function from the welcome screen contained within the setup screen allowing me to make this fetch before the setup screen is mounted?

Upvotes: 1

Views: 20

Answers (1)

Poptocrack
Poptocrack

Reputation: 2989

Unless your user has to fill some kind of input, one the welcome screen is loaded you can fetch your data using for example componentDidMount() and store it in the welcome screen state using this.setState({ data: yourData }) for example.

Then, one the user click on the 'continue' button, you just pass the data stored in this.state.data to the next screen. To do this, you will have to check how to do it depending on the navigation plugin you use.

For example with react-navigation:

onContinuePress = () => {
  this.props.navigation.navigate('SecondScreen', { data: this.state.data })
}

Upvotes: 1

Related Questions