From c067432174a9745460146ac8f6e5da649649ed62 Mon Sep 17 00:00:00 2001 From: Jelle Date: Fri, 27 Jun 2025 10:46:01 +0200 Subject: [PATCH] fix: react-native >= 0.65 subscriptions --- src/hooks/useKeyboardDismissable.ts | 25 ++++++++++++++++++++----- src/hooks/useScreenReaderEnabled.ts | 12 ++++++++++-- src/utils/useResponsiveQuery/common.ts | 18 +++++++++++++++--- 3 files changed, 45 insertions(+), 10 deletions(-) diff --git a/src/hooks/useKeyboardDismissable.ts b/src/hooks/useKeyboardDismissable.ts index f3cfa44402..a73309c034 100644 --- a/src/hooks/useKeyboardDismissable.ts +++ b/src/hooks/useKeyboardDismissable.ts @@ -44,16 +44,31 @@ export const useKeyboardDismissable = ({ enabled, callback }: IParams) => { export function useBackHandler({ enabled, callback }: IParams) { useEffect(() => { - let backHandler = () => { + const backHandler = () => { callback(); return true; }; + let subscription: any; if (enabled) { - BackHandler.addEventListener('hardwareBackPress', backHandler); + subscription = BackHandler.addEventListener( + 'hardwareBackPress', + backHandler + ); } else { - BackHandler.removeEventListener('hardwareBackPress', backHandler); + if (BackHandler.removeEventListener) { + BackHandler.removeEventListener('hardwareBackPress', backHandler); + } } - return () => - BackHandler.removeEventListener('hardwareBackPress', backHandler); + return () => { + // React Native >= 0.65 + // @ts-ignore:next-line ignoring ts error as devDependency contains "@types/react-native" < 0.65 + if (subscription?.remove) { + subscription.remove(); + } + + if (BackHandler.removeEventListener) { + BackHandler.removeEventListener('hardwareBackPress', backHandler); + } + }; }, [enabled, callback]); } diff --git a/src/hooks/useScreenReaderEnabled.ts b/src/hooks/useScreenReaderEnabled.ts index b84e9395a1..245e650218 100644 --- a/src/hooks/useScreenReaderEnabled.ts +++ b/src/hooks/useScreenReaderEnabled.ts @@ -18,7 +18,7 @@ export function useScreenReaderEnabled() { handleSetEnabled(res); } - let handler: any = AccessibilityInfo.addEventListener( + const handler: any = AccessibilityInfo.addEventListener( 'screenReaderChanged', (event: any) => { handleSetEnabled(event); @@ -28,7 +28,15 @@ export function useScreenReaderEnabled() { setInitialValue(); return () => { mountedRef.current = false; - AccessibilityInfo.removeEventListener('screenReaderChanged', handler); + // React Native >= 0.65 + // @ts-ignore:next-line ignoring ts error as devDependency contains "@types/react-native" < 0.65 + if (handler.remove) { + handler.remove(); + } + + if (AccessibilityInfo.removeEventListener) { + AccessibilityInfo.removeEventListener('screenReaderChanged', handler); + } }; }); diff --git a/src/utils/useResponsiveQuery/common.ts b/src/utils/useResponsiveQuery/common.ts index a8123c025b..7d2cfc86b3 100644 --- a/src/utils/useResponsiveQuery/common.ts +++ b/src/utils/useResponsiveQuery/common.ts @@ -9,7 +9,7 @@ export const getResponsiveStylesImpl = (width: number) => ( queries: GetResponsiveStylesParams ): GetResponsiveStylesReturnType => { if (typeof width === 'number') { - let styles = queries.initial + const styles = queries.initial ? [ StyleSheet.create({ initial: StyleSheet.flatten(queries.initial) }) .initial, @@ -72,14 +72,26 @@ export const useDimensionsWithEnable = ({ enable }: { enable?: boolean }) => { setDimensions(window); } } - Dimensions.addEventListener('change', handleChange); + + const subscription: any = Dimensions.addEventListener( + 'change', + handleChange + ); // We might have missed an update between calling `get` in render and // `addEventListener` in this handler, so we set it here. If there was // no change, React will filter out this update as a no-op. handleChange({ window: Dimensions.get('window') }); return () => { - Dimensions.removeEventListener('change', handleChange); + // React Native >= 0.65 + // @ts-ignore:next-line ignoring ts error as devDependency contains "@types/react-native" < 0.65 + if (subscription.remove) { + subscription.remove(); + } + + if (Dimensions.removeEventListener) { + Dimensions.removeEventListener('change', handleChange); + } }; } return () => {};