fix: use remove method on the event subscription (#2923)

src/components/BottomNavigation.tsx

@@ -7,7 +7,6 @@ import {
   StyleSheet,
   StyleProp,
   Platform,
-  Keyboard,
   ViewStyle,
 } from 'react-native';
 import { getBottomSpace } from 'react-native-iphone-x-helper';
@@ -23,6 +22,7 @@ import { withTheme } from '../core/theming';
 import useAnimatedValue from '../utils/useAnimatedValue';
 import useAnimatedValueArray from '../utils/useAnimatedValueArray';
 import useLayout from '../utils/useLayout';
+import useIsKeyboardShown from '../utils/useIsKeyboardShown';
 
 type Route = {
   key: string;
@@ -482,25 +482,10 @@ const BottomNavigation = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  React.useEffect(() => {
-    if (Platform.OS === 'ios') {
-      Keyboard.addListener('keyboardWillShow', handleKeyboardShow);
-      Keyboard.addListener('keyboardWillHide', handleKeyboardHide);
-    } else {
-      Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
-      Keyboard.addListener('keyboardDidHide', handleKeyboardHide);
-    }
-
-    return () => {
-      if (Platform.OS === 'ios') {
-        Keyboard.removeListener('keyboardWillShow', handleKeyboardShow);
-        Keyboard.removeListener('keyboardWillHide', handleKeyboardHide);
-      } else {
-        Keyboard.removeListener('keyboardDidShow', handleKeyboardShow);
-        Keyboard.removeListener('keyboardDidHide', handleKeyboardHide);
-      }
-    };
-  }, [handleKeyboardHide, handleKeyboardShow]);
+  useIsKeyboardShown({
+    onShow: handleKeyboardShow,
+    onHide: handleKeyboardHide,
+  });
 
   const prevNavigationState = React.useRef<NavigationState>();
 

src/utils/useIsKeyboardShown.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Keyboard, NativeEventSubscription, Platform } from 'react-native';
+
+type Props = {
+  onShow: () => void;
+  onHide: () => void;
+};
+export default function useIsKeyboardShown({ onShow, onHide }: Props) {
+  React.useEffect(() => {
+    let willShowSubscription: NativeEventSubscription | undefined;
+    let willHideSubscription: NativeEventSubscription | undefined;
+    let didShowSubscription: NativeEventSubscription | undefined;
+    let didHideSubscription: NativeEventSubscription | undefined;
+
+    if (Platform.OS === 'ios') {
+      willShowSubscription = Keyboard.addListener('keyboardWillShow', onShow);
+      willHideSubscription = Keyboard.addListener('keyboardWillHide', onHide);
+    } else {
+      didShowSubscription = Keyboard.addListener('keyboardDidShow', onShow);
+      didHideSubscription = Keyboard.addListener('keyboardDidHide', onHide);
+    }
+
+    return () => {
+      if (Platform.OS === 'ios') {
+        if (willShowSubscription?.remove) {
+          willShowSubscription.remove();
+        } else {
+          Keyboard.removeListener('keyboardWillShow', onShow);
+        }
+
+        if (willHideSubscription?.remove) {
+          willHideSubscription.remove();
+        } else {
+          Keyboard.removeListener('keyboardWillHide', onHide);
+        }
+      } else {
+        if (didShowSubscription?.remove) {
+          didShowSubscription.remove();
+        } else {
+          Keyboard.removeListener('keyboardDidShow', onShow);
+        }
+
+        if (didHideSubscription?.remove) {
+          didHideSubscription.remove();
+        } else {
+          Keyboard.removeListener('keyboardDidHide', onHide);
+        }
+      }
+    };
+  }, [onHide, onShow]);
+}