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.

user_1136066 · Answer

import {InteractionManager} from "react-native"; 

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({renderPlaceholderOnly: false});
    });
  }

Reference : https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

how to use InteractionManager.runAfterInteractions make navigator transitions faster

4 Answers