RNKC: KeyboardChatScrollView

package.json

@@ -192,7 +192,7 @@
     "react-native-image-picker": "^7.1.2",
     "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#8a1c3b7359977462cdd4e63b09ea45afbd3d77c7",
     "react-native-key-command": "1.0.14",
-    "react-native-keyboard-controller": "1.21.0-beta.1",
+    "react-native-keyboard-controller": "^1.22.0",
     "react-native-localize": "^3.5.4",
     "react-native-nitro-modules": "0.35.0",
     "react-native-nitro-sqlite": "9.6.0",

patches/react-native-keyboard-controller/details.md

@@ -1,6 +1,6 @@
 # `react-native-keyboard-controller` patches
 
-### [react-native-keyboard-controller+1.21.0-beta.1+001+fix-insets-in-landscape.patch](react-native-keyboard-controller+1.21.0-beta.1+001+fix-insets-in-landscape.patch)
+### [react-native-keyboard-controller+1.22.1+001+fix-insets-in-landscape.patch](react-native-keyboard-controller+1.22.1+001+fix-insets-in-landscape.patch)
 
 - Reason:
 
@@ -10,4 +10,4 @@
 
 - Upstream PR/issue: -
 - E/App issue: https://github.com/Expensify/App/issues/87307
-- PR introducing patch: https://github.com/Expensify/App/pull/87376
+- PR introducing patch: https://github.com/Expensify/App/pull/87376

patches/react-native-keyboard-controller/react-native-keyboard-controller+1.21.0-beta.1+001+fix-insets-in-landscape.patch → patches/react-native-keyboard-controller/react-native-keyboard-controller+1.22.1+001+fix-insets-in-landscape.patch

@@ -1,28 +1,28 @@
 diff --git a/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt b/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt
-index 003890b..90d3375 100644
+index 3689418..a236663 100644
 --- a/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt
 +++ b/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt
-@@ -116,13 +116,21 @@ class EdgeToEdgeReactViewGroup(
-         val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
+@@ -118,13 +118,21 @@ class EdgeToEdgeReactViewGroup(
+           if (!shouldApplyBottomPadding) 0 else insets.getInsets(WindowInsetsCompat.Type.ime()).bottom
 
          params.setMargins(
 -          navBarInsets.left,
-+          if (shouldApplyZeroPaddingBottom) {
++          if (this.isNavigationBarTranslucent) {
 +            0
 +          } else {
 +            navBarInsets.left
 +          },
-           if (shouldApplyZeroPaddingTop) {
+           if (this.isStatusBarTranslucent) {
              0
            } else {
              systemBarInsets.top
            },
 -          navBarInsets.right,
-+          if (shouldApplyZeroPaddingBottom) {
++          if (this.isNavigationBarTranslucent) {
 +            0
 +          } else {
 +            navBarInsets.right
 +          },
-           if (shouldApplyZeroPaddingBottom) {
-             0
+           if (this.isNavigationBarTranslucent) {
+             keyboardInsets
            } else {

src/components/ActionSheetAwareScrollView/__mocks__/index.android.tsx

@@ -1,5 +1,6 @@
 import {Actions, ActionSheetAwareScrollViewProvider, useActionSheetAwareScrollViewActions, useActionSheetAwareScrollViewState} from './ActionSheetAwareScrollViewContext';
 
 const renderScrollComponent = undefined;
+const renderInvertedScrollComponent = undefined;
 
-export {renderScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};
+export {renderScrollComponent, renderInvertedScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};

src/components/ActionSheetAwareScrollView/__mocks__/index.ios.tsx

@@ -1,5 +1,6 @@
 import {Actions, ActionSheetAwareScrollViewProvider, useActionSheetAwareScrollViewActions, useActionSheetAwareScrollViewState} from './ActionSheetAwareScrollViewContext';
 
 const renderScrollComponent = undefined;
+const renderInvertedScrollComponent = undefined;
 
-export {renderScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};
+export {renderScrollComponent, renderInvertedScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};

src/components/ActionSheetAwareScrollView/__mocks__/index.tsx

@@ -1,5 +1,6 @@
 import {Actions, ActionSheetAwareScrollViewProvider, useActionSheetAwareScrollViewActions, useActionSheetAwareScrollViewState} from './ActionSheetAwareScrollViewContext';
 
 const renderScrollComponent = undefined;
+const renderInvertedScrollComponent = undefined;
 
-export {renderScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};
+export {renderScrollComponent, renderInvertedScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};

src/components/ActionSheetAwareScrollView/index.android.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
+import {KeyboardChatScrollView} from 'react-native-keyboard-controller';
 import Reanimated from 'react-native-reanimated';
 
-import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
+import type {
+    ActionSheetAwareKeyboardScrollViewProps,
+    ActionSheetAwareScrollViewProps,
+    RenderActionSheetAwareKeyboardScrollViewComponent,
+    RenderActionSheetAwareScrollViewComponent,
+} from './types';
 
 import {Actions, ActionSheetAwareScrollViewProvider, useActionSheetAwareScrollViewActions, useActionSheetAwareScrollViewState} from './ActionSheetAwareScrollViewContext';
 import useActionSheetAwareScrollViewRef from './useActionSheetAwareScrollViewRef';
@@ -23,6 +29,27 @@ function ActionSheetAwareScrollView({style, children, ref, ...restProps}: Action
     );
 }
 
+function ActionSheetAwareKeyboardScrollView({style, children, inverted, ref, ...restProps}: ActionSheetAwareKeyboardScrollViewProps) {
+    const {onRef, animatedRef} = useActionSheetAwareScrollViewRef(ref);
+
+    usePreventScrollOnKeyboardInteraction({scrollViewRef: animatedRef});
+
+    return (
+        <KeyboardChatScrollView
+            {...restProps}
+            ref={onRef}
+            style={style}
+            automaticallyAdjustContentInsets={false}
+            contentInsetAdjustmentBehavior="never"
+            inverted={inverted}
+            keyboardDismissMode="interactive"
+            keyboardLiftBehavior="never"
+        >
+            {children}
+        </KeyboardChatScrollView>
+    );
+}
+
 /**
  * This function should be used as renderScrollComponent prop for FlatList
  * @param props - props that will be passed to the ScrollView from FlatList
@@ -32,4 +59,13 @@ const renderScrollComponent: RenderActionSheetAwareScrollViewComponent = (props)
     return <ActionSheetAwareScrollView {...props} />;
 };
 
-export {renderScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};
+const renderInvertedScrollComponent: RenderActionSheetAwareKeyboardScrollViewComponent = (props) => {
+    return (
+        <ActionSheetAwareKeyboardScrollView
+            {...props}
+            inverted
+        />
+    );
+};
+
+export {renderScrollComponent, renderInvertedScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};

src/components/ActionSheetAwareScrollView/index.ios.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
+import {KeyboardChatScrollView} from 'react-native-keyboard-controller';
 import Reanimated, {useAnimatedStyle} from 'react-native-reanimated';
 
-import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
+import type {
+    ActionSheetAwareKeyboardScrollViewProps,
+    ActionSheetAwareScrollViewProps,
+    RenderActionSheetAwareKeyboardScrollViewComponent,
+    RenderActionSheetAwareScrollViewComponent,
+} from './types';
 
 import {Actions, ActionSheetAwareScrollViewProvider, useActionSheetAwareScrollViewActions, useActionSheetAwareScrollViewState} from './ActionSheetAwareScrollViewContext';
 import useActionSheetAwareScrollViewRef from './useActionSheetAwareScrollViewRef';
@@ -29,6 +35,27 @@ function ActionSheetAwareScrollView({style, children, ref, ...restProps}: Action
     );
 }
 
+function ActionSheetAwareKeyboardScrollView({style, children, inverted, ref, ...restProps}: ActionSheetAwareKeyboardScrollViewProps) {
+    const {onRef, animatedRef} = useActionSheetAwareScrollViewRef(ref);
+
+    usePreventScrollOnKeyboardInteraction({scrollViewRef: animatedRef});
+
+    return (
+        <KeyboardChatScrollView
+            {...restProps}
+            ref={onRef}
+            style={style}
+            automaticallyAdjustContentInsets={false}
+            contentInsetAdjustmentBehavior="never"
+            inverted={inverted}
+            keyboardDismissMode="interactive"
+            keyboardLiftBehavior="never"
+        >
+            {children}
+        </KeyboardChatScrollView>
+    );
+}
+
 /**
  * This function should be used as renderScrollComponent prop for FlatList
  * @param props - props that will be passed to the ScrollView from FlatList
@@ -38,4 +65,13 @@ const renderScrollComponent: RenderActionSheetAwareScrollViewComponent = (props)
     return <ActionSheetAwareScrollView {...props} />;
 };
 
-export {renderScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};
+const renderInvertedScrollComponent: RenderActionSheetAwareKeyboardScrollViewComponent = (props) => {
+    return (
+        <ActionSheetAwareKeyboardScrollView
+            {...props}
+            inverted
+        />
+    );
+};
+
+export {renderScrollComponent, renderInvertedScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};

src/components/ActionSheetAwareScrollView/index.tsx

@@ -1,3 +1,3 @@
 // The action sheet is only used on native platforms (iOS and Android)
 // On all other platforms, the action sheet is implemented using the Animated.ScrollView
 import React from 'react';
@@ -34,4 +34,6 @@
     return <ActionSheetAwareScrollView {...props} />;
 };
 
-export {renderScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};
+const renderInvertedScrollComponent = renderScrollComponent;
+
+export {renderScrollComponent, renderInvertedScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};

src/components/ActionSheetAwareScrollView/types.ts

@@ -3,6 +3,7 @@ import type {ActionWithPayload, State} from '@hooks/useWorkletStateMachine';
 import type {Ref} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView, ScrollViewProps} from 'react-native';
+import type {KeyboardChatScrollViewProps} from 'react-native-keyboard-controller';
 import type Reanimated from 'react-native-reanimated';
 import type {SharedValue} from 'react-native-reanimated';
 
@@ -33,12 +34,17 @@ type ActionSheetAwareScrollViewProps = ScrollViewProps & {
     ref?: Ref<ActionSheetAwareScrollViewHandle>;
 };
 
+type ActionSheetAwareKeyboardScrollViewProps = ActionSheetAwareScrollViewProps & Pick<KeyboardChatScrollViewProps, 'inverted'>;
+
 type RenderActionSheetAwareScrollViewComponent = (props: ActionSheetAwareScrollViewProps) => React.ReactElement<ScrollViewProps>;
+type RenderActionSheetAwareKeyboardScrollViewComponent = (props: ActionSheetAwareKeyboardScrollViewProps) => React.ReactElement<ScrollViewProps>;
 
 export type {
     ActionSheetAwareScrollViewProps,
+    ActionSheetAwareKeyboardScrollViewProps,
     ActionSheetAwareScrollViewHandle,
     RenderActionSheetAwareScrollViewComponent,
+    RenderActionSheetAwareKeyboardScrollViewComponent,
     ActionSheetAwareScrollViewContextValue,
     ActionSheetAwareScrollViewStateContextValue,
     ActionSheetAwareScrollViewActionsContextValue,

src/pages/inbox/report/ReportActionsList.tsx

@@ -1,4 +1,4 @@
-import {renderScrollComponent as renderActionSheetAwareScrollView} from '@components/ActionSheetAwareScrollView';
+import {renderInvertedScrollComponent as renderActionSheetAwareScrollView} from '@components/ActionSheetAwareScrollView';
 import InvertedFlashList from '@components/FlashList/InvertedFlashList';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';