React Native InteractionManager

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';

// Importing essential react-native components
import {
    Alert,
    Text,
    Animated,
    StyleSheet,
    InteractionManager,
    View,
} from 'react-native';

// The total time taken by the animation
// is 5000millisecond or 5seconds.
const useFadeIn = (duration = 5000) => {

    // Keeping the opacity 0 at the start
    // of the animation
    const [opacity] = useState(new Animated.Value(0));

    // Running the animation only on the first render
    useEffect(() => {
        // Changing the opacity value from
        // 0 to 1 over the duration of 5 seconds.
        Animated.timing(opacity, {
            toValue: 1,
            duration,
        }).start();
    }, []);

    return opacity;
};

const Square = ({ onShown }) => {
    const opacity = useFadeIn();

    // Running a method after the animation
    useEffect(() => {

        // Scheduling onShown() task
        const interactionPromise =
        InteractionManager.runAfterInteractions(
            () => onShown()
        );

        return () => interactionPromise.cancel();
    }, []);

    // Square Shape
    return <Animated.View
        style={[styles.square, { opacity }]} />;
};

// We will be scheduling onShown()
// function using Interaction Manager.
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>
    );
};

// Styles for text and Square shape
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.