React Native InteractionManager
Last Updated :
25 Jan, 2023
Interaction Manager provides us the ability to schedule long-running work/tasks to run after the completion of any interactions/animations.
The tasks can be scheduled with the help of the following command:
InteractionManager.runAfterInteractions(() => {
someLongTask() // or animations
});
where,
- runAfterInteractions(someLongTask) function fundamentally Schedules a function to run after all interactions have been completed. Returns a cancellable “promise”.
- One or more active touches are evaluated as an ‘interaction’ by the touch handling system and will delay runAfterInteractions() callbacks until all touches have ended or been canceled.
Let’s understand React Native InteractionManager with the help of an example:
Creating Application: Follow the below steps to create a React Native application:
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
Step 2: Now create a project by the following command.
expo init Project
Step 3: Now go into your project folder i.e. Project
cd Project
Project Structure: The project should look like below:
project structure
Approach: We will be creating a fading animation and scheduling an alert task to be done after the completion of the animation.
- Task: Show alert messages after the animation is done.
- Animation: A fading-in animation on a simple square shape.
We are creating a square component which is an <Animated.View/> React native component and adding a fade-in animation to it.
- useFadeIn is a simple animation where we are animating the square shape opacity from 0 to 1 in 5 seconds.
- useEffect hook is making sure that the animation only runs on the first render.
- runAfterInteractions() is scheduling the onShown() function to run after the fading animation is done.
Example: Implement the above approach as a code example:
- App.js: Write the following code in App.js
Javascript
import React, { useState, useEffect } from 'react' ;
import {
Alert,
Text,
Animated,
StyleSheet,
InteractionManager,
View,
} from 'react-native' ;
const useFadeIn = (duration = 5000) => {
const [opacity] = useState( new Animated.Value(0));
useEffect(() => {
Animated.timing(opacity, {
toValue: 1,
duration,
}).start();
}, []);
return opacity;
};
const Square = ({ onShown }) => {
const opacity = useFadeIn();
useEffect(() => {
const interactionPromise =
InteractionManager.runAfterInteractions(
() => onShown()
);
return () => interactionPromise.cancel();
}, []);
return <Animated.View
style={[styles.square, { opacity }]} />;
};
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.txt}>
"Square Fade In Animation"
</Text>
<Square
onShown={() =>
Alert.alert( 'The animations '
+ 'Task is done and displaying this alert now!!!'
)
}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center' ,
alignItems: 'center'
},
square: {
width: 100,
height: 100,
backgroundColor: 'green' ,
},
txt: {
fontSize: 20,
paddingBottom: 20,
},
});
export default App;
|
Output:
output
As you can see in the output. The square component is rendered first and is animated for 5 seconds and the alert shows up after the animation is done. The alert is scheduled to run after 5 seconds with the help of runAfterInteractions() function.
Share your thoughts in the comments
Please Login to comment...