how to use InteractionManager.runAfterInteractions make navigator transitions faster

Question

Because of complex logic, I have to render many components when this.props.navigator.push(), slow navigator transitions make app unavailable.

then I notice here provide InteractionManager.runAfterInteractions api to solve this problem,

I need bring most of components which consumed long time to callback after navigator animation finished, but I don't know where should I call it,

maybe a simple example is enough,

thanks for your time.

Answer 1

Here's a full example of what a performant Navigator scene might look like:

import {Component} from 'react';
import {InteractionManager, Text} from 'react-native';

class OptimizedScene extends Component {

  state = {interactionsComplete: false};

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({interactionsComplete: true});
    });
  }

  render() {
    if (!this.state.interactionsComplete) {
      return <Text>loading...</Text>;
    }

    return (
      <ExpensiveComponent/>
    );
  }
}

This has been extracted into a library to make it even easier:

import {AfterInteractions} from 'react-native-interactions';

function MyScene() {
  return (
    <AfterInteractions placeholder={<CheapPlaceholder/>}>
      <ExpensiveComponent/>
    </AfterInteractions>
  );
}