import React, { useState, useEffect } from "react";
+import {
+ Alert,
+ Animated,
+ InteractionManager,
+ Platform,
+ StyleSheet,
+ Text,
+ View,
+} from "react-native";
+
+const instructions = Platform.select({
+ ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
+ android:
+ "Double tap R on your keyboard to reload,\n" +
+ "Shake or press menu button for dev menu",
+});
+
+const useMount = func => useEffect(() => func(), []);
+
+const useFadeIn = (duration = 5000) => {
+ const [opacity] = useState(new Animated.Value(0));
+
+ // Running the animation when the component is mounted
+ useMount(() => {
+ // Animated.timing() create a interaction handle by default, if you want to disabled that
+ // behaviour you can set isInteraction to false to disabled that.
+ Animated.timing(opacity, {
+ toValue: 1,
+ duration,
+ }).start();
+ });
+
+ return opacity;
+};
+
+const Ball = ({ onShown }) => {
+ const opacity = useFadeIn();
+
+ // Running a method after the animation
+ useMount(() => {
+ InteractionManager.runAfterInteractions(() => onShown());
+ });
+
+ return <Animated.View style={[styles.ball, { opacity }]} />;
+};
+
+const App = () => {
+ return (
+ <View style={styles.container}>
+ <Text>{instructions}</Text>
+ <Ball onShown={() => Alert.alert("Animation is done")} />
+ </View>
+ );
+};
+
+export default App;
+
+const styles = StyleSheet.create({
+ container: { flex: 1, justifyContent: "center", alignItems: "center" },
+ ball: {
+ width: 100,
+ height: 100,
+ backgroundColor: "salmon",
+ borderRadius: 100,
+ },
+});
+
+import React, { useEffect } from "react";
+import {
+ Alert,
+ Animated,
+ InteractionManager,
+ Platform,
+ StyleSheet,
+ Text,
+ View,
+} from "react-native";
+
+const instructions = Platform.select({
+ ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
+ android:
+ "Double tap R on your keyboard to reload,\n" +
+ "Shake or press menu button for dev menu",
+});
+
+const useMount = func => useEffect(() => func(), []);
+
+// You can create a custom interaction/animation and add
+// support for InteractionManager
+const useCustomInteraction = (timeLocked = 2000) => {
+ useMount(() => {
+ const handle = InteractionManager.createInteractionHandle();
+
+ setTimeout(
+ () => InteractionManager.clearInteractionHandle(handle),
+ timeLocked
+ );
+
+ return () => InteractionManager.clearInteractionHandle(handle);
+ });
+};
+
+const Ball = ({ onInteractionIsDone }) => {
+ useCustomInteraction();
+
+ // Running a method after the interaction
+ useMount(() => {
+ InteractionManager.runAfterInteractions(() => onInteractionIsDone());
+ });
+
+ return <Animated.View style={[styles.ball]} />;
+};
+
+const App = () => {
+ return (
+ <View style={styles.container}>
+ <Text>{instructions}</Text>
+ <Ball onInteractionIsDone={() => Alert.alert("Interaction is done")} />
+ </View>
+ );
+};
+
+export default App;
+
+const styles = StyleSheet.create({
+ container: { flex: 1, justifyContent: "center", alignItems: "center" },
+ ball: {
+ width: 100,
+ height: 100,
+ backgroundColor: "salmon",
+ borderRadius: 100,
+ },
+});
++Note:
+InteractionManager.runAfterInteractions()is not working properly on web. It triggers immediately without waiting until the interaction is finished.
runAfterInteractions()