Slow Transitions in react native router flux

1.1k Views Asked by At

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.

1

There are 1 best solutions below

0
On

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!