[react-native] Smoother Navigator Transition

More often than not, as an the react-native app transitions from one page to the other, an background API call is made (e.g when navigating from master -> detail page). During such times, if the API call is made during the animated transition of the page, it will most likely cause some stuttering or FPS drops. To solve such a problem, we'll need to separate the animation and background API call processes. Fortunately, react-native provides the InteractionManager API for this.

InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.

Here's how to use it,

class DetailPage extends React.Component {  
    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            // our api call