How to use InteractionManager.runAfterInteractions makes navigator navigation faster

Question

Due to the complex logic, I have to display many components when this.props.navigator.push() , slow transitions on the navigator make the application inaccessible.

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

I need to deliver most of the components that spent a long time on a callback after completing the navigator animation, but I don’t know where to call it,

perhaps a simple example is enough

thank you for your time.

Answer 1

Here's a complete example of what a Navigator script 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 to the library to make it even easier:

 import {AfterInteractions} from 'react-native-interactions'; function MyScene() { return ( <AfterInteractions placeholder={<CheapPlaceholder/>}> <ExpensiveComponent/> </AfterInteractions> ); } 

Answer 2

Take a look at https://facebook.imtqy.com/react-native/docs/performance.html#slow-navigator-transitions

Here you can find an example of how to implement placeholders to get faster transitions!

Answer 3

You should pass any code that supports JS thread wait for InteractionManager, e.g.

 InteractionManager.runAfterInteractions(() => { someLongTask() // or animations, or whatever }) 

Answer 4

 import {InteractionManager} from "react-native"; componentDidMount() { InteractionManager.runAfterInteractions(() => { this.setState({renderPlaceholderOnly: false}); }); } 

Link: https://facebook.imtqy.com/react-native/docs/performance.html#slow-navigator-transitions