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

@@ -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: {

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'

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'

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'