diff --git a/docs/animations.md b/docs/animations.md index 321c8a0b2e1..dd5058b8643 100644 --- a/docs/animations.md +++ b/docs/animations.md @@ -669,4 +669,4 @@ As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), ` We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`. -If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool. +If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool. diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md deleted file mode 100644 index c6fca526672..00000000000 --- a/docs/interactionmanager.md +++ /dev/null @@ -1,422 +0,0 @@ ---- -id: interactionmanager -title: 🗑️ InteractionManager ---- - -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - -:::warning[Deprecated] -Avoid long-running work and use [`requestIdleCallback`](global-requestIdleCallback) instead. -::: - -InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly. - -Applications can schedule tasks to run after interactions with the following: - -```tsx -InteractionManager.runAfterInteractions(() => { - // ...long-running synchronous task... -}); -``` - -Compare this to other scheduling alternatives: - -- `requestAnimationFrame()` for code that animates a view over time. -- `setImmediate/setTimeout()` run code later, note this may delay animations. -- `runAfterInteractions()` run code later, without delaying active animations. - -The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled. - -InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion: - -```tsx -const handle = InteractionManager.createInteractionHandle(); -// run animation... (`runAfterInteractions` tasks are queued) -// later, on animation completion: -InteractionManager.clearInteractionHandle(handle); -// queued tasks run if all handles were cleared -``` - -`runAfterInteractions` takes either a plain callback function, or a `PromiseTask` object with a `gen` method that returns a `Promise`. If a `PromiseTask` is supplied, then it is fully resolved (including asynchronous dependencies that also schedule more tasks via `runAfterInteractions`) before starting on the next task that might have been queued up synchronously earlier. - -By default, queued tasks are executed together in a loop in one `setImmediate` batch. If `setDeadline` is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive. - ---- - -## Example - -### Basic - - - - -```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js -import {useEffect} from 'react'; -import { - Alert, - Animated, - InteractionManager, - Platform, - StyleSheet, - Text, - useAnimatedValue, -} from 'react-native'; -import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; - -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 = (duration = 5000) => { - const opacity = useAnimatedValue(0); - - // Running the animation when the component is mounted - useEffect(() => { - // 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: true, - }).start(); - }, [duration, opacity]); - - return opacity; -}; - -const Ball = ({onShown}) => { - const opacity = useFadeIn(); - - // Running a method after the animation - useEffect(() => { - const interactionPromise = InteractionManager.runAfterInteractions(() => - onShown(), - ); - return () => interactionPromise.cancel(); - }, [onShown]); - - return ; -}; - -const App = () => { - return ( - - - {instructions} - Alert.alert('Animation is done')} /> - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - ball: { - width: 100, - height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, -}); - -export default App; -``` - - - - -```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx -import {useEffect} from 'react'; -import { - Alert, - Animated, - InteractionManager, - Platform, - StyleSheet, - Text, - useAnimatedValue, -} from 'react-native'; -import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; - -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 = (duration = 5000) => { - const opacity = useAnimatedValue(0); - - // Running the animation when the component is mounted - useEffect(() => { - // 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: true, - }).start(); - }, [duration, opacity]); - - return opacity; -}; - -type BallProps = { - onShown: () => void; -}; - -const Ball = ({onShown}: BallProps) => { - const opacity = useFadeIn(); - - // Running a method after the animation - useEffect(() => { - const interactionPromise = InteractionManager.runAfterInteractions(() => - onShown(), - ); - return () => interactionPromise.cancel(); - }, [onShown]); - - return ; -}; - -const App = () => { - return ( - - - {instructions} - Alert.alert('Animation is done')} /> - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - ball: { - width: 100, - height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, -}); - -export default App; -``` - - - - -### Advanced - - - - -```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js -import {useEffect} from 'react'; -import { - Alert, - Animated, - InteractionManager, - Platform, - StyleSheet, - Text, -} from 'react-native'; -import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; - -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', -}); - -// You can create a custom interaction/animation and add -// support for InteractionManager -const useCustomInteraction = (timeLocked = 2000) => { - useEffect(() => { - const handle = InteractionManager.createInteractionHandle(); - - setTimeout( - () => InteractionManager.clearInteractionHandle(handle), - timeLocked, - ); - - return () => InteractionManager.clearInteractionHandle(handle); - }, [timeLocked]); -}; - -const Ball = ({onInteractionIsDone}) => { - useCustomInteraction(); - - // Running a method after the interaction - useEffect(() => { - InteractionManager.runAfterInteractions(() => onInteractionIsDone()); - }, [onInteractionIsDone]); - - return ; -}; - -const App = () => { - return ( - - - {instructions} - Alert.alert('Interaction is done')} /> - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - ball: { - width: 100, - height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, -}); - -export default App; -``` - - - - -```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=tsx -import {useEffect} from 'react'; -import { - Alert, - Animated, - InteractionManager, - Platform, - StyleSheet, - Text, -} from 'react-native'; -import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; - -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', -}); - -// You can create a custom interaction/animation and add -// support for InteractionManager -const useCustomInteraction = (timeLocked = 2000) => { - useEffect(() => { - const handle = InteractionManager.createInteractionHandle(); - - setTimeout( - () => InteractionManager.clearInteractionHandle(handle), - timeLocked, - ); - - return () => InteractionManager.clearInteractionHandle(handle); - }, [timeLocked]); -}; - -type BallProps = { - onInteractionIsDone: () => void; -}; - -const Ball = ({onInteractionIsDone}: BallProps) => { - useCustomInteraction(); - - // Running a method after the interaction - useEffect(() => { - InteractionManager.runAfterInteractions(() => onInteractionIsDone()); - }, [onInteractionIsDone]); - - return ; -}; - -const App = () => { - return ( - - - {instructions} - Alert.alert('Interaction is done')} /> - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - ball: { - width: 100, - height: 100, - backgroundColor: 'salmon', - borderRadius: 100, - }, -}); - -export default App; -``` - - - - -# Reference - -## Methods - -### `runAfterInteractions()` - -```tsx -static runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask); -``` - -Schedule a function to run after all interactions have completed. Returns a cancellable "promise". - ---- - -### `createInteractionHandle()` - -```tsx -static createInteractionHandle(): Handle; -``` - -Notify manager that an interaction has started. - ---- - -### `clearInteractionHandle()` - -```tsx -static clearInteractionHandle(handle: Handle); -``` - -Notify manager that an interaction has completed. - ---- - -### `setDeadline()` - -```tsx -static setDeadline(deadline: number); -``` - -A positive number will use setTimeout to schedule any tasks after the eventLoopRunningTime hits the deadline value, otherwise all tasks will be executed in one setImmediate batch (default). diff --git a/docs/performance.md b/docs/performance.md index e4fc1a60cab..686d44e64b4 100644 --- a/docs/performance.md +++ b/docs/performance.md @@ -59,7 +59,7 @@ There are also other third-party list libraries that are optimized for performan ### Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time -"Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Using [`InteractionManager`](interactionmanager.md) can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider [`LayoutAnimation`](layoutanimation.md). +"Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Deferring work with [`requestIdleCallback`](global-requestIdleCallback) can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider [`LayoutAnimation`](layoutanimation.md). The [`Animated API`](animated.md) currently calculates each keyframe on-demand on the JavaScript thread unless you [set `useNativeDriver: true`](/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-this-in-my-app), while [`LayoutAnimation`](layoutanimation.md) leverages Core Animation and is unaffected by JS thread and main thread frame drops. diff --git a/docs/timers.md b/docs/timers.md index 6a377b178c3..021b68d0563 100644 --- a/docs/timers.md +++ b/docs/timers.md @@ -22,37 +22,3 @@ The `Promise` implementation uses `setImmediate` as its asynchronicity implement When debugging on Android, if the times between the debugger and device have drifted; things such as animation, event behavior, etc., might not work properly or the results may not be accurate. Please correct this by running ``adb shell "date `date +%m%d%H%M%Y.%S%3N`"`` on your debugger machine. Root access is required for the use in real device. ::: - -## InteractionManager - -:::warning[Deprecated] -The `InteractionManager` behavior has been changed to be the same as `setImmediate`, which should be used instead. -::: - -One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use `InteractionManager` to make sure long-running work is scheduled to start after any interactions/animations have completed. - -Applications can schedule tasks to run after interactions with the following: - -```ts -InteractionManager.runAfterInteractions(() => { - // ...long-running synchronous task... -}); -``` - -Compare this to other scheduling alternatives: - -- requestAnimationFrame(): for code that animates a view over time. -- setImmediate/setTimeout/setInterval(): run code later, note this may delay animations. -- runAfterInteractions(): run code later, without delaying active animations. - -The touch handling system considers one or more active touches to be an 'interaction' and will delay `runAfterInteractions()` callbacks until all touches have ended or been cancelled. - -`InteractionManager` also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion: - -```ts -const handle = InteractionManager.createInteractionHandle(); -// run animation... (`runAfterInteractions` tasks are queued) -// later, on animation completion: -InteractionManager.clearInteractionHandle(handle); -// queued tasks run if all handles were cleared -``` diff --git a/website/sidebars.ts b/website/sidebars.ts index 20455d23800..8f14145c3a3 100644 --- a/website/sidebars.ts +++ b/website/sidebars.ts @@ -211,7 +211,6 @@ export default { 'dimensions', 'easing', 'i18nmanager', - 'interactionmanager', 'keyboard', 'layoutanimation', 'linking',