From d22eb6cbb6873c5cd2fbdeaf67dea3a03d222799 Mon Sep 17 00:00:00 2001
From: skalthoff <32023561+skalthoff@users.noreply.github.com>
Date: Fri, 5 Dec 2025 07:13:40 -0800
Subject: [PATCH] refactor: replace RefreshControl import from
 react-native-gesture-handler to react-native to avoid deprecated warnings
 (#750)

Co-authored-by: Violet Caulfield <42452695+anultravioletaurora@users.noreply.github.com>
---
 eslint.config.js                       | 16 ++++++++++++++++
 src/components/Playlist/index.tsx      |  2 +-
 src/components/Playlists/component.tsx |  2 +-
 src/components/Tracks/component.tsx    |  2 +-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 3a729fd3..6c83e8eb 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -46,6 +46,22 @@ module.exports = defineConfig([
 			'@typescript-eslint/no-explicit-any': 'error',
 			'no-mixed-spaces-and-tabs': 'off',
 			semi: ['error', 'never'],
+			// Prevent importing RefreshControl from react-native-gesture-handler
+			// as it uses deprecated findNodeHandle which causes warnings in StrictMode.
+			// Use RefreshControl from 'react-native' instead.
+			'no-restricted-imports': [
+				'error',
+				{
+					paths: [
+						{
+							name: 'react-native-gesture-handler',
+							importNames: ['RefreshControl'],
+							message:
+								"Import RefreshControl from 'react-native' instead. The gesture-handler version uses deprecated findNodeHandle which causes warnings in StrictMode.",
+						},
+					],
+				},
+			],
 		},
 
 		settings: {
diff --git a/src/components/Playlist/index.tsx b/src/components/Playlist/index.tsx
index 8c0337f2..ed6e6ac1 100644
--- a/src/components/Playlist/index.tsx
+++ b/src/components/Playlist/index.tsx
@@ -16,7 +16,7 @@ import { useNetworkStatus } from '../../stores/network'
 import { QueuingType } from '../../enums/queuing-type'
 import { useApi } from '../../stores'
 import useStreamingDeviceProfile from '../../stores/device-profile'
-import { RefreshControl } from 'react-native-gesture-handler'
+import { RefreshControl } from 'react-native'
 import { useEffect, useLayoutEffect, useState } from 'react'
 import { updatePlaylist } from '../../../src/api/mutations/playlists'
 import { usePlaylistTracks } from '../../../src/api/queries/playlist'
diff --git a/src/components/Playlists/component.tsx b/src/components/Playlists/component.tsx
index 8a8f1d8c..be706a9b 100644
--- a/src/components/Playlists/component.tsx
+++ b/src/components/Playlists/component.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import { RefreshControl } from 'react-native-gesture-handler'
+import { RefreshControl } from 'react-native'
 import { Separator, useTheme } from 'tamagui'
 import { FlashList } from '@shopify/flash-list'
 import ItemRow from '../Global/components/item-row'
diff --git a/src/components/Tracks/component.tsx b/src/components/Tracks/component.tsx
index 5bc7a292..17c1bfe0 100644
--- a/src/components/Tracks/component.tsx
+++ b/src/components/Tracks/component.tsx
@@ -10,7 +10,7 @@ import { Text } from '../Global/helpers/text'
 import AZScroller, { useAlphabetSelector } from '../Global/components/alphabetical-selector'
 import { UseInfiniteQueryResult } from '@tanstack/react-query'
 import { isString } from 'lodash'
-import { RefreshControl } from 'react-native-gesture-handler'
+import { RefreshControl } from 'react-native'
 import { closeAllSwipeableRows } from '../Global/components/swipeable-row-registry'
 import FlashListStickyHeader from '../Global/helpers/flashlist-sticky-header'