From 1962635031f05d5076bfadf699cff279c1a7b3f4 Mon Sep 17 00:00:00 2001
From: Sjaak Schilperoort <sjaak@xs4all.nl>
Date: Thu, 15 Jan 2026 09:56:33 +0100
Subject: [PATCH] Replace deprecated method
 InteractionManager.runAfterInteractions

---
 jest.mocks.js                       | 76 +++++++++++++++++++----------
 package.json                        |  2 +-
 src/@types/requestIdleCallback.d.ts | 10 ++++
 src/hooks/useShowBlurView.ts        |  6 +--
 tsconfig.json                       |  1 +
 5 files changed, 66 insertions(+), 29 deletions(-)
 create mode 100644 src/@types/requestIdleCallback.d.ts

diff --git a/jest.mocks.js b/jest.mocks.js
index e2ef93a..42d7d73 100644
--- a/jest.mocks.js
+++ b/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 }))
diff --git a/package.json b/package.json
index 70a10c2..3acde31 100644
--- a/package.json
+++ b/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",
diff --git a/src/@types/requestIdleCallback.d.ts b/src/@types/requestIdleCallback.d.ts
new file mode 100644
index 0000000..0e55d7a
--- /dev/null
+++ b/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 {}
diff --git a/src/hooks/useShowBlurView.ts b/src/hooks/useShowBlurView.ts
index 562f550..fa6e72e 100644
--- a/src/hooks/useShowBlurView.ts
+++ b/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)
       }
diff --git a/tsconfig.json b/tsconfig.json
index 8a28ab3..53da7a4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "@react-native/typescript-config",
+  "typeRoots": ["./src/@types", "./node_modules/@types"],
   "compilerOptions": {
     "types": ["jest"],
   },