Q:

how to use InteractionManager.runAfterInteractions make navigator transitions faster

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.

A:

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>
  );
}

