I'm using React-Native-Router-Flux for navigations in my react native project. When I move from screen A -> B such that screen B has network call, the transition is not smooth. There is a noticeable lagging in the transition.
Any suggestions how I can make the transition more smooth?
And, I'm very deep into the project with very strict deadlines, so changing the whole navigation will be very tough for me. My router component looks like-
<Scene key="drawer" component={Drawer} open={false} type="replace" initial={this.state.flag ? false : true}>
<Scene key="root">
<Scene key="home" component={Home} title="HOME" initial hideNavBar type="replace" />
<Scene key="dashboard" component={Dashboard} hideNavBar={true} title="MENU DETAILS" />
<Scene key="order" component={Order} hideNavBar={true} title="ORDER SUMMARY" />
</Scene>
</Scene>
Now, I use Actions.dashboard()
on a button click to move to dashboard, where I have a network call in componentDidMount()
which fetches the data and dispatches an action to update the reducer and as a result returns a new state.
Similarly, in Order
component, I'm making network call in componentDidMount()
and this time I simply do this.setState({data})
to update the component with the fetched data.
In both the navigation, Home -> Dashboard
and Home -> Order
, I'm having this "not smooth" transition.
I also had the same problem while running in Android. Just stop the JS Remote Debugging and try it again it will then have smooth transition. I had this problem while signing in with auth with firebase. But its solved now!