From 741f6dd778a34969e0abdc6d6f50850fc7b2a3ff Mon Sep 17 00:00:00 2001 From: danilobrinu Date: Mon, 9 Mar 2020 10:54:54 -0500 Subject: [PATCH 1/8] Add basic example --- docs/interactionmanager.md | 71 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index 61a1d8058b6..bd4b4114c9e 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -37,6 +37,77 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b --- +## Example + +```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android +import * as React 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 useFadeIn = () => { + const [opacity] = React.useState(new Animated.Value(0)); + + // Running the animation + React.useEffect(() => { + Animated.timing(opacity, { + toValue: 1, + duration: 5000, + useNativeDriver: true, + }).start(); + }, []); + + return opacity; +}; + +function Ball({ onShown }) { + const opacity = useFadeIn(); + + // Running a method after the animation + React.useEffect(() => { + InteractionManager.runAfterInteractions(() => onShown()); + }, []); + + return ; +} + +function App() { + const [show, setShow] = React.useState(false); + + return ( + + {instructions} + Alert.alert('Animation is done')} /> + + ); +} + +export default App; + +const styles = StyleSheet.create({ + container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, + ball: { + width: 100, + height: 100, + backgroundColor: 'salmon', + borderRadius: 100, + }, +}); +``` + # Reference ## Methods From 7f2c4b3cc78099e6f02c8ccc0ec13b600163b696 Mon Sep 17 00:00:00 2001 From: danilobrinu Date: Mon, 9 Mar 2020 11:11:09 -0500 Subject: [PATCH 2/8] Update basic example --- docs/interactionmanager.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index bd4b4114c9e..c17122994e1 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -58,15 +58,15 @@ const instructions = Platform.select({ 'Shake or press menu button for dev menu', }); -const useFadeIn = () => { +const useFadeIn = (duration = 5000, useNativeDriver = true) => { const [opacity] = React.useState(new Animated.Value(0)); // Running the animation React.useEffect(() => { Animated.timing(opacity, { toValue: 1, - duration: 5000, - useNativeDriver: true, + duration, + useNativeDriver, }).start(); }, []); From d9cf8cd3b55fc787eef2c1b8df33e88e39708744 Mon Sep 17 00:00:00 2001 From: danilobrinu Date: Mon, 9 Mar 2020 11:53:18 -0500 Subject: [PATCH 3/8] Update basic example and add note --- docs/interactionmanager.md | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index c17122994e1..35ae444bca2 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -39,7 +39,9 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ## Example -```SnackPlayer name=Function%20Component%20Example&supportedPlatforms=ios,android +### Basic + +```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android import * as React from 'react'; import { Alert, @@ -58,17 +60,20 @@ const instructions = Platform.select({ 'Shake or press menu button for dev menu', }); -const useFadeIn = (duration = 5000, useNativeDriver = true) => { +const useMount = (func) => React.useEffect(() => func(), []) + +const useFadeIn = (duration = 5000) => { const [opacity] = React.useState(new Animated.Value(0)); - // Running the animation - React.useEffect(() => { + // 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, - useNativeDriver, }).start(); - }, []); + }); return opacity; }; @@ -77,9 +82,9 @@ function Ball({ onShown }) { const opacity = useFadeIn(); // Running a method after the animation - React.useEffect(() => { + useMount(() => { InteractionManager.runAfterInteractions(() => onShown()); - }, []); + }); return ; } @@ -108,6 +113,8 @@ const styles = StyleSheet.create({ }); ``` +> **Note**: InteractionManager.runAfterInteractions() is not working properly on web, triggering immediately any function without wait to the interaction is finished. + # Reference ## Methods From 7e015dfe6d1c22bbf1f8e5b34147f204c038dbed Mon Sep 17 00:00:00 2001 From: danilobrinu Date: Mon, 9 Mar 2020 11:53:33 -0500 Subject: [PATCH 4/8] Add advanced example --- docs/interactionmanager.md | 73 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index 35ae444bca2..8fec588995b 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -113,6 +113,79 @@ const styles = StyleSheet.create({ }); ``` +### Advanced + +```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android +import * as React 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) => React.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); + }); +}; + +function Ball({ onInteractionIsDone }) { + useCustomInteraction() + + // Running a method after the interaction + useMount(() => { + InteractionManager.runAfterInteractions(() => onInteractionIsDone()); + }); + + return ; +} + +function App() { + const [show, setShow] = React.useState(false); + + return ( + + {instructions} + Alert.alert('Interaction is done')} /> + + ); +} + +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, triggering immediately any function without wait to the interaction is finished. # Reference From 83a258fe229e2eacfb0256fe57234dbbd81ae637 Mon Sep 17 00:00:00 2001 From: danilobrinu Date: Mon, 9 Mar 2020 15:06:44 -0500 Subject: [PATCH 5/8] Minor fixes --- docs/interactionmanager.md | 52 +++++++++++++++++++------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index 8fec588995b..13bff4f5510 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -42,7 +42,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ### Basic ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android -import * as React from 'react'; +import React, { useEffect } from "react"; import { Alert, Animated, @@ -50,17 +50,17 @@ import { Platform, StyleSheet, Text, - View, -} from 'react-native'; + View +} from "react-native"; const instructions = Platform.select({ - ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', + 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', + "Double tap R on your keyboard to reload,\n" + + "Shake or press menu button for dev menu" }); -const useMount = (func) => React.useEffect(() => func(), []) +const useMount = func => useEffect(() => func(), []); const useFadeIn = (duration = 5000) => { const [opacity] = React.useState(new Animated.Value(0)); @@ -71,7 +71,7 @@ const useFadeIn = (duration = 5000) => { // behaviour you can set isInteraction to false to disabled that. Animated.timing(opacity, { toValue: 1, - duration, + duration }).start(); }); @@ -95,7 +95,7 @@ function App() { return ( {instructions} - Alert.alert('Animation is done')} /> + Alert.alert("Animation is done")} /> ); } @@ -103,20 +103,20 @@ function App() { export default App; const styles = StyleSheet.create({ - container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, + container: { flex: 1, justifyContent: "center", alignItems: "center" }, ball: { width: 100, height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, + backgroundColor: "salmon", + borderRadius: 100 + } }); ``` ### Advanced ```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android -import * as React from 'react'; +import React, { useEffect } from "react"; import { Alert, Animated, @@ -124,17 +124,17 @@ import { Platform, StyleSheet, Text, - View, -} from 'react-native'; + View +} from "react-native"; const instructions = Platform.select({ - ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', + 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', + "Double tap R on your keyboard to reload,\n" + + "Shake or press menu button for dev menu" }); -const useMount = (func) => React.useEffect(() => func(), []) +const useMount = func => useEffect(() => func(), []); // You can create a custom interaction/animation and add // support for InteractionManager @@ -152,7 +152,7 @@ const useCustomInteraction = (timeLocked = 2000) => { }; function Ball({ onInteractionIsDone }) { - useCustomInteraction() + useCustomInteraction(); // Running a method after the interaction useMount(() => { @@ -168,7 +168,7 @@ function App() { return ( {instructions} - Alert.alert('Interaction is done')} /> + Alert.alert("Interaction is done")} /> ); } @@ -176,13 +176,13 @@ function App() { export default App; const styles = StyleSheet.create({ - container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, + container: { flex: 1, justifyContent: "center", alignItems: "center" }, ball: { width: 100, height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, + backgroundColor: "salmon", + borderRadius: 100 + } }); ``` From 0980484198940ef0c0d556ed6f0c382dceff07ce Mon Sep 17 00:00:00 2001 From: danilobrinu Date: Mon, 9 Mar 2020 18:24:02 -0500 Subject: [PATCH 6/8] Minor changes --- docs/interactionmanager.md | 41 +++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index 13bff4f5510..0fb0d41c77d 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -42,7 +42,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ### Basic ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android -import React, { useEffect } from "react"; +import React, { useState, useEffect } from "react"; import { Alert, Animated, @@ -50,20 +50,20 @@ import { Platform, StyleSheet, Text, - View + 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" + "Shake or press menu button for dev menu", }); const useMount = func => useEffect(() => func(), []); const useFadeIn = (duration = 5000) => { - const [opacity] = React.useState(new Animated.Value(0)); + const [opacity] = useState(new Animated.Value(0)); // Running the animation when the component is mounted useMount(() => { @@ -71,14 +71,14 @@ const useFadeIn = (duration = 5000) => { // behaviour you can set isInteraction to false to disabled that. Animated.timing(opacity, { toValue: 1, - duration + duration, }).start(); }); return opacity; }; -function Ball({ onShown }) { +const Ball = ({ onShown }) => { const opacity = useFadeIn(); // Running a method after the animation @@ -87,9 +87,9 @@ function Ball({ onShown }) { }); return ; -} +}; -function App() { +const App = () => { const [show, setShow] = React.useState(false); return ( @@ -98,7 +98,7 @@ function App() { Alert.alert("Animation is done")} /> ); -} +}; export default App; @@ -108,9 +108,10 @@ const styles = StyleSheet.create({ width: 100, height: 100, backgroundColor: "salmon", - borderRadius: 100 - } + borderRadius: 100, + }, }); + ``` ### Advanced @@ -124,14 +125,14 @@ import { Platform, StyleSheet, Text, - View + 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" + "Shake or press menu button for dev menu", }); const useMount = func => useEffect(() => func(), []); @@ -151,7 +152,7 @@ const useCustomInteraction = (timeLocked = 2000) => { }); }; -function Ball({ onInteractionIsDone }) { +const Ball = ({ onInteractionIsDone }) => { useCustomInteraction(); // Running a method after the interaction @@ -160,18 +161,16 @@ function Ball({ onInteractionIsDone }) { }); return ; -} - -function App() { - const [show, setShow] = React.useState(false); +}; +const App = () => { return ( {instructions} Alert.alert("Interaction is done")} /> ); -} +}; export default App; @@ -181,8 +180,8 @@ const styles = StyleSheet.create({ width: 100, height: 100, backgroundColor: "salmon", - borderRadius: 100 - } + borderRadius: 100, + }, }); ``` From 40436416eede23b77784505e860f4aa77bd929e3 Mon Sep 17 00:00:00 2001 From: danilobrinu Date: Mon, 9 Mar 2020 18:50:54 -0500 Subject: [PATCH 7/8] Remove unused code --- docs/interactionmanager.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index 0fb0d41c77d..b70c05e41d8 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -90,8 +90,6 @@ const Ball = ({ onShown }) => { }; const App = () => { - const [show, setShow] = React.useState(false); - return ( {instructions} From 61481e331912ad38d43d4785087009a2f5e83492 Mon Sep 17 00:00:00 2001 From: R Nabors Date: Tue, 10 Mar 2020 12:26:49 +0000 Subject: [PATCH 8/8] Tweaking grammar --- docs/interactionmanager.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index b70c05e41d8..3cbac7e5ef5 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -183,7 +183,7 @@ const styles = StyleSheet.create({ }); ``` -> **Note**: InteractionManager.runAfterInteractions() is not working properly on web, triggering immediately any function without wait to the interaction is finished. +> **Note**: `InteractionManager.runAfterInteractions()` is not working properly on web. It triggers immediately without waiting until the interaction is finished. # Reference