feat: optional support for react-native-keyboard-controller

Author: khushal87

examples/SampleApp/ios/Podfile.lock

@@ -2036,6 +2036,65 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
+  - react-native-keyboard-controller (1.20.2):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - react-native-keyboard-controller/common (= 1.20.2)
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
+  - react-native-keyboard-controller/common (1.20.2):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
   - react-native-maps (1.20.1):
     - React-Core
   - react-native-netinfo (11.4.1):
@@ -3220,6 +3279,7 @@ DEPENDENCIES:
   - "react-native-document-picker (from `../node_modules/@react-native-documents/picker`)"
   - "react-native-geolocation (from `../node_modules/@react-native-community/geolocation`)"
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
+  - react-native-keyboard-controller (from `../node_modules/react-native-keyboard-controller`)
   - react-native-maps (from `../node_modules/react-native-maps`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
@@ -3394,6 +3454,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/geolocation"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
+  react-native-keyboard-controller:
+    :path: "../node_modules/react-native-keyboard-controller"
   react-native-maps:
     :path: "../node_modules/react-native-maps"
   react-native-netinfo:
@@ -3561,6 +3623,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: c5fa18e9fc47b34cfbab3b0a4447d0df918a5621
   react-native-geolocation: eb39c815c9b58ddc3efb552cafdd4b035e4cf682
   react-native-image-picker: e479ec8884df9d99a62c1f53f2307055ad43ea85
+  react-native-keyboard-controller: 6fe65d5d011d88e651d5279396e95e9c1f9458ca
   react-native-maps: ee1e65647460c3d41e778071be5eda10e3da6225
   react-native-netinfo: f0a9899081c185db1de5bb2fdc1c88c202a059ac
   react-native-safe-area-context: 7fd4c2c8023da8e18eaa3424cb49d52f626debee

examples/SampleApp/package.json

@@ -47,6 +47,7 @@
     "react-native-gesture-handler": "^2.26.0",
     "react-native-haptic-feedback": "^2.3.3",
     "react-native-image-picker": "^8.2.1",
+    "react-native-keyboard-controller": "^1.20.2",
     "react-native-maps": "1.20.1",
     "react-native-nitro-modules": "^0.31.3",
     "react-native-nitro-sound": "^0.2.9",

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import type { LocalMessage, Channel as StreamChatChannel } from 'stream-chat';
+import { useHeaderHeight } from '@react-navigation/elements';
 import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/native';
 import {
   Channel,
@@ -17,7 +18,7 @@ import {
   useTranslationContext,
   MessageActionsParams,
 } from 'stream-chat-react-native';
-import { Platform, Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -210,6 +211,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     },
     [chatClient, colors, t, handleMessageInfo],
   );
+  const headerHeight = useHeaderHeight();
 
   if (!channel || !chatClient) {
     return null;
@@ -225,7 +227,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         disableTypingIndicator
         enforceUniqueReaction
         initialScrollToFirstUnreadMessage
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
+        keyboardVerticalOffset={headerHeight}
         messageActions={messageActions}
         MessageHeader={MessageReminderHeader}
         MessageLocation={MessageLocation}

examples/SampleApp/yarn.lock

@@ -7658,6 +7658,13 @@ react-native-is-edge-to-edge@^1.2.1:
   resolved "https://registry.yarnpkg.com/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz#64e10851abd9d176cbf2b40562f751622bde3358"
   integrity sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q==
 
+react-native-keyboard-controller@^1.20.2:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-controller/-/react-native-keyboard-controller-1.20.2.tgz#2953341f48e25fec20dd732241cb8152251fd4d1"
+  integrity sha512-3xvPTIfasAbosDxT3Mc6b5Xr/M+yq99ECCM4iGnSAngziIVUZsZuPpfYL7nN1UiN9rQjWKvjdul/jq9E0V1s2w==
+  dependencies:
+    react-native-is-edge-to-edge "^1.2.1"
+
 react-native-lightbox@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-native-lightbox/-/react-native-lightbox-0.7.0.tgz#e52b4d7fcc141f59d7b23f0180de535e35b20ec9"

package/package.json

@@ -91,6 +91,7 @@
     "emoji-mart": ">=5.4.0",
     "react-native": ">=0.73.0",
     "react-native-gesture-handler": ">=2.18.0",
+    "react-native-keyboard-controller": ">=1.20.2",
     "react-native-reanimated": ">=3.16.0",
     "react-native-safe-area-context": ">=5.4.1",
     "react-native-svg": ">=15.8.0"
@@ -107,6 +108,9 @@
     },
     "@emoji-mart/data": {
       "optional": true
+    },
+    "react-native-keyboard-controller": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -154,6 +158,7 @@
     "react-native": "0.80.2",
     "react-native-builder-bob": "0.40.11",
     "react-native-gesture-handler": "^2.26.0",
+    "react-native-keyboard-controller": "^1.20.2",
     "react-native-reanimated": "3.18.0",
     "react-native-safe-area-context": "^5.6.1",
     "react-native-svg": "15.12.0",

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { BackHandler, Keyboard, Platform, StyleSheet } from 'react-native';
+import { BackHandler, EmitterSubscription, Keyboard, Platform, StyleSheet } from 'react-native';
 
 import BottomSheetOriginal from '@gorhom/bottom-sheet';
 import type { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
@@ -19,6 +19,7 @@ import { NativeHandlers } from '../../native';
 import type { File } from '../../types/types';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
 import { BottomSheetFlatList } from '../BottomSheetCompatibility/BottomSheetFlatList';
+import { KeyboardControllerPackage } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 
 dayjs.extend(duration);
 
@@ -185,20 +186,18 @@ export const AttachmentPicker = React.forwardRef(
         }
         closePicker();
       };
-      const keyboardShowEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-      const keyboardSubscription = Keyboard.addListener(keyboardShowEvent, onKeyboardOpenHandler);
-
+      let keyboardSubscription: EmitterSubscription | null = null;
+      if (KeyboardControllerPackage?.KeyboardEvents) {
+        keyboardSubscription = KeyboardControllerPackage.KeyboardEvents.addListener(
+          'keyboardWillShow',
+          onKeyboardOpenHandler,
+        );
+      } else {
+        const keyboardShowEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+        keyboardSubscription = Keyboard.addListener(keyboardShowEvent, onKeyboardOpenHandler);
+      }
       return () => {
-        // Following if-else condition to avoid deprecated warning coming RN 0.65
-        if (keyboardSubscription?.remove) {
-          keyboardSubscription.remove();
-          return;
-        }
-        // @ts-ignore
-        else if (Keyboard.removeListener) {
-          // @ts-ignore
-          Keyboard.removeListener(keyboardShowEvent, onKeyboardOpenHandler);
-        }
+        keyboardSubscription?.remove();
       };
     }, [closePicker, selectedPicker, setSelectedPicker]);
 

package/src/components/Channel/Channel.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -150,7 +150,10 @@ import {
   LoadingErrorProps,
 } from '../Indicators/LoadingErrorIndicator';
 import { LoadingIndicator as LoadingIndicatorDefault } from '../Indicators/LoadingIndicator';
-import { KeyboardCompatibleView as KeyboardCompatibleViewDefault } from '../KeyboardCompatibleView/KeyboardCompatibleView';
+import {
+  KeyboardCompatibleView as KeyboardCompatibleViewDefault,
+  KeyboardCompatibleViewProps,
+} from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { Message as MessageDefault } from '../Message/Message';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageSimple/MessageBlocked';
@@ -414,7 +417,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
     /**
      * Additional props passed to keyboard avoiding view
      */
-    additionalKeyboardAvoidingViewProps?: Partial<KeyboardAvoidingViewProps>;
+    additionalKeyboardAvoidingViewProps?: Partial<KeyboardCompatibleViewProps>;
     /**
      * When true, disables the KeyboardCompatibleView wrapper
      *
@@ -470,7 +473,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
      * When true, messageList will be scrolled at first unread message, when opened.
      */
     initialScrollToFirstUnreadMessage?: boolean;
-    keyboardBehavior?: KeyboardAvoidingViewProps['behavior'];
+    keyboardBehavior?: KeyboardCompatibleViewProps['behavior'];
     /**
      * Custom wrapper component that handles height adjustment of Channel component when keyboard is opened or dismissed
      * Default component (accepts the same props): [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
@@ -490,7 +493,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
      * />
      * ```
      */
-    KeyboardCompatibleView?: React.ComponentType<KeyboardAvoidingViewProps>;
+    KeyboardCompatibleView?: React.ComponentType<KeyboardCompatibleViewProps>;
     keyboardVerticalOffset?: number;
     /**
      * Custom loading error indicator to override the Stream default

package/src/components/ImageGallery/ImageGallery.tsx

@@ -1,6 +1,5 @@
 import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
-
+import { Image, ImageStyle, StyleSheet, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
@@ -50,6 +49,7 @@ import {
   BottomSheetModal,
   BottomSheetModalProvider,
 } from '../BottomSheetCompatibility/BottomSheetModal';
+import { dismissKeyboard } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 
 const MARGIN = 32;
 
@@ -177,7 +177,7 @@ export const ImageGallery = (props: Props) => {
    * Run the fade animation on visible change
    */
   useEffect(() => {
-    Keyboard.dismiss();
+    dismissKeyboard();
     showScreen();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/src/components/KeyboardCompatibleView/KeyboardControllerAvoidingView.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import {
+  Keyboard,
+  Platform,
+  KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps,
+} from 'react-native';
+
+import {
+  KeyboardAvoidingView as KeyboardControllerPackageKeyboardAvoidingView,
+  KeyboardController as KeyboardControllerPackageKeyboardController,
+  KeyboardEvents,
+  KeyboardProvider,
+} from 'react-native-keyboard-controller';
+
+import { KeyboardCompatibleView as KeyboardCompatibleViewDefault } from './KeyboardCompatibleView';
+
+type ExtraKeyboardControllerProps = {
+  behavior?: 'translate-with-padding';
+};
+
+export type KeyboardCompatibleViewProps = ReactNativeKeyboardAvoidingViewProps &
+  ExtraKeyboardControllerProps;
+
+let KeyboardControllerPackage:
+  | {
+      KeyboardAvoidingView: typeof KeyboardControllerPackageKeyboardAvoidingView;
+      KeyboardController: typeof KeyboardControllerPackageKeyboardController;
+      KeyboardProvider: typeof KeyboardProvider;
+      KeyboardEvents: typeof KeyboardEvents;
+    }
+  | undefined;
+
+try {
+  KeyboardControllerPackage = require('react-native-keyboard-controller');
+} catch (e) {
+  KeyboardControllerPackage = undefined;
+}
+
+export const KeyboardCompatibleView = (props: KeyboardCompatibleViewProps) => {
+  const { behavior = 'translate-with-padding', children, ...rest } = props;
+
+  const KeyboardProvider = KeyboardControllerPackage?.KeyboardProvider;
+  const KeyboardAvoidingView = KeyboardControllerPackage?.KeyboardAvoidingView;
+
+  if (KeyboardProvider && KeyboardAvoidingView) {
+    return (
+      <KeyboardProvider>
+        {/* @ts-expect-error - The reason is that react-native-keyboard-controller's KeyboardAvoidingViewProps is a discriminated union, not a simple behavior union so it complains about the `position` value passed. */}
+        <KeyboardAvoidingView behavior={behavior} {...rest}>
+          {children}
+        </KeyboardAvoidingView>
+      </KeyboardProvider>
+    );
+  }
+  const compatibleBehavior =
+    behavior === 'translate-with-padding'
+      ? Platform.OS === 'ios'
+        ? 'padding'
+        : 'position'
+      : behavior;
+
+  return (
+    <KeyboardCompatibleViewDefault behavior={compatibleBehavior} {...rest}>
+      {children}
+    </KeyboardCompatibleViewDefault>
+  );
+};
+
+export const dismissKeyboard = () => {
+  if (KeyboardControllerPackage?.KeyboardController) {
+    KeyboardControllerPackage?.KeyboardController.dismiss();
+  }
+  Keyboard.dismiss();
+};
+
+export { KeyboardControllerPackage };