Replace deprecated method InteractionManager.runAfterInteractions (#80)

Resolves: observation/app#1116

Author: SjaakSchilperoort

jest.mocks.js

@@ -2,32 +2,58 @@
 import React from 'react'
 import { Image } from 'react-native'
 
-// Mock font awesome
-const Icon = 'Icon'
-const getIconType = (prefix) => {
-  switch (prefix) {
-    case 'fas':
-      return 'solid'
-    case 'fal':
-      return 'light'
-    case 'fab':
-      return 'brand'
-    default:
-      throw new Error()
+// === Globals ===
+
+if (typeof global.requestIdleCallback === 'undefined') {
+  global.requestIdleCallback = function (callback) {
+    return setTimeout(function () {
+      callback({
+        timeRemaining: function () {
+          return 50
+        },
+        didTimeout: false,
+      })
+    }, 0)
   }
 }
-jest.mock('@fortawesome/react-native-fontawesome', () => ({
-  FontAwesomeIcon: (faIcon) => (
-    <Icon
-      testID={faIcon.testID}
-      color={faIcon.color}
-      name={faIcon.icon.iconName}
-      size={faIcon.size}
-      style={faIcon.style}
-      type={getIconType(faIcon.icon.prefix)}
-      transform={faIcon.transform}
-    />
-  ),
-}))
+
+if (typeof global.cancelIdleCallback === 'undefined') {
+  global.cancelIdleCallback = function (id) {
+    clearTimeout(id)
+  }
+}
+
+// === Third-party libraries ===
+
+jest.mock('@fortawesome/react-native-fontawesome', () => {
+  const Icon = 'Icon'
+
+  const getIconType = (prefix) => {
+    switch (prefix) {
+      case 'fas':
+        return 'solid'
+      case 'fal':
+        return 'light'
+      case 'fab':
+        return 'brand'
+      default:
+        throw new Error()
+    }
+  }
+
+  return {
+    FontAwesomeIcon: (faIcon) => (
+      <Icon
+        testID={faIcon.testID}
+        color={faIcon.color}
+        name={faIcon.icon.iconName}
+        size={faIcon.size}
+        style={faIcon.style}
+        type={getIconType(faIcon.icon.prefix)}
+        transform={faIcon.transform}
+      />
+    ),
+  }
+})
 
 Image.getSizeWithHeaders = jest.fn(() => Promise.resolve({ width: 0, height: 0 }))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.67.0",
+  "version": "1.68.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",

src/@types/requestIdleCallback.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  function requestIdleCallback(
+    callback: (deadline: { timeRemaining(): number; didTimeout: boolean }) => void,
+    options?: { timeout: number },
+  ): number
+
+  function cancelIdleCallback(handle: number): void
+}
+
+export {}

src/hooks/useShowBlurView.ts

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { InteractionManager, Platform } from 'react-native'
+import { Platform } from 'react-native'
 
 import { useFocusEffect } from '@react-navigation/native'
 
@@ -21,14 +21,14 @@ const useShowBlurView = () => {
     React.useCallback(() => {
       let timer: Timeout
       const timeout = isIOSDevice ? 0 : 200
-      const task = InteractionManager.runAfterInteractions(() => {
+      const taskHandle = requestIdleCallback(() => {
         timer = setTimeout(() => {
           setShowBlurView(true)
         }, timeout)
       })
 
       return () => {
-        task.cancel()
+        cancelIdleCallback(taskHandle)
         clearTimeout(timer)
         setShowBlurView(isIOSDevice)
       }

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "@react-native/typescript-config",
+  "typeRoots": ["./src/@types", "./node_modules/@types"],
   "compilerOptions": {
     "types": ["jest"],
   },