react native navigation performance

Question

I have the Issue with React Native Navigation V2 that there is quite a long waiting time until I can view the next screen.

And I read that it seems to be normal, since react native has to render all components of the new Screen.

So I was wondering if there are certain patterns for better performance or ways to hide the loading time (through loading circles or transitions)?

Answer 1

Yes, It usually happens if you have a lot of components to render. React navigation waits for component to mount and then switches to the screen. For example, If a screen will take 2 seconds to render all the components. Then react navigation will take 2 seconds to switch to that screen. There is a way you can lower the time to switch to the next screen. You can use intreractionManager or You can do something like,

First keep your state, let's say loading to true. And in your componentDidMount() You can write something like:

setTimeout(() => this.setState({ loading: false }), 0);

And in your render function, in your parent view, do a conditional render, Like

{this.state.loading && <View> 
... your components
</View>}

With this approach. The component will mount fast as componentDidMount() will resolve fast as the component has nothing to render. Also if you are using flatlist or listview, you can give the prop initialRender to 3 or something like that to decrease loading time. So. initially render only a single empty view and after that render everything else.

Answer 2

Thanks to the Suggestion of @Wainage I used InteractionManager

import PropTypes from "prop-types";
import React from "react";
import {
    InteractionManager,
    Text,
   View,
} from "react-native";

interface State {
   ready: boolean;
   sortedJobs: any[];
}


export default class ProviderJobs extends React.Component<Props, State> {
    constructor(props) {
       super(props);
       this.state = {
          ready: false,
       };
    }

   public componentDidMount() {
       InteractionManager.runAfterInteractions(() => {
           // Do expensive Stuff such as loading
           this.setState({
               ready: true,
               sortedJobs: groupJobs(this.props.jobs), // loading Jobs in my Case
        });

    });
}

   public render() {
       if (!this.state.ready || this.state.sortedJobs.length == 0) {
           return <LoadingCircle/>;
       }


       return (
           <View>
               <DisplayJobs jobs ={this.state.sortedJobs}>
           </View>
       );
   }
}