RNKC: KeyboardChatScrollView

ios/Podfile.lock

@@ -2612,7 +2612,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-keyboard-controller (1.21.0-beta.1):
+  - react-native-keyboard-controller (1.22.1):
     - boost
     - DoubleConversion
     - fast_float
@@ -2630,7 +2630,7 @@ PODS:
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - react-native-keyboard-controller/common (= 1.21.0-beta.1)
+    - react-native-keyboard-controller/common (= 1.22.1)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-renderercss
@@ -2641,7 +2641,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-keyboard-controller/common (1.21.0-beta.1):
+  - react-native-keyboard-controller/common (1.22.1):
     - boost
     - DoubleConversion
     - fast_float
@@ -4901,7 +4901,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: 18a9d68e6117d37ac5facd87619cbc3ff17575a7
   react-native-image-picker: 1722f5d3dc5de5039d423e290dc31a717ba9605e
   react-native-key-command: 7538df85ed26502b2a929c0584235459b26c7a91
-  react-native-keyboard-controller: 0619a578e4d79a38dc4b1bef3b89cee6525bc1c7
+  react-native-keyboard-controller: 1fe3fcd7cc26a549e72e733905cf1131dc478948
   react-native-netinfo: f94b3a0fc305e812f3f615989d99299d7110c2ae
   react-native-pager-view: c62ab82db28e2d11e7809c59085e2984a45979c5
   react-native-pdf: 6a09a9be0e7ee954ea671437483316f9a28f8572

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/AnimatedActionSheetAwareScrollView/index.android.tsx

@@ -0,0 +1,26 @@
+import useActionSheetAwareScrollViewRef from '@components/ActionSheetAwareScrollView/useActionSheetAwareScrollViewRef';
+
+import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
+
+import React from 'react';
+import {KeyboardChatScrollView} from 'react-native-keyboard-controller';
+
+import type AnimatedActionSheetAwareScrollViewProps from './types';
+
+function AnimatedActionSheetAwareScrollView({children, ref, ...restProps}: AnimatedActionSheetAwareScrollViewProps) {
+    const {onRef} = useActionSheetAwareScrollViewRef(ref);
+    const safeAreaPaddings = useSafeAreaPaddings();
+
+    return (
+        <KeyboardChatScrollView
+            {...restProps}
+            ref={onRef}
+            offset={safeAreaPaddings.paddingBottom}
+            keyboardDismissMode="interactive"
+        >
+            {children}
+        </KeyboardChatScrollView>
+    );
+}
+
+export default AnimatedActionSheetAwareScrollView;

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

@@ -0,0 +1,33 @@
+import useActionSheetAwareScrollViewRef from '@components/ActionSheetAwareScrollView/useActionSheetAwareScrollViewRef';
+import useActionSheetKeyboardSpacing from '@components/ActionSheetAwareScrollView/useActionSheetKeyboardSpacing';
+
+import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
+
+import React from 'react';
+import {KeyboardChatScrollView} from 'react-native-keyboard-controller';
+import {useAnimatedStyle} from 'react-native-reanimated';
+
+import type AnimatedActionSheetAwareScrollViewProps from './types';
+
+function AnimatedActionSheetAwareScrollView({children, style, ref, ...restProps}: AnimatedActionSheetAwareScrollViewProps) {
+    const {onRef, animatedRef} = useActionSheetAwareScrollViewRef(ref);
+
+    const safeAreaPaddings = useSafeAreaPaddings();
+    const spacing = useActionSheetKeyboardSpacing(animatedRef);
+    const animatedStyle = useAnimatedStyle(() => ({
+        paddingTop: spacing.get(),
+    }));
+    return (
+        <KeyboardChatScrollView
+            {...restProps}
+            ref={onRef}
+            style={[style, animatedStyle]}
+            offset={safeAreaPaddings.paddingBottom}
+            keyboardDismissMode="interactive"
+        >
+            {children}
+        </KeyboardChatScrollView>
+    );
+}
+
+export default AnimatedActionSheetAwareScrollView;

src/components/ActionSheetAwareScrollView/AnimatedActionSheetAwareScrollView/index.tsx

@@ -0,0 +1,23 @@
+import useActionSheetAwareScrollViewRef from '@components/ActionSheetAwareScrollView/useActionSheetAwareScrollViewRef';
+
+// 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';
+import Reanimated from 'react-native-reanimated';
+
+import type AnimatedActionSheetAwareScrollViewProps from './types';
+
+function AnimatedActionSheetAwareScrollView({children, ref, ...restProps}: AnimatedActionSheetAwareScrollViewProps) {
+    const {onRef} = useActionSheetAwareScrollViewRef(ref);
+
+    return (
+        <Reanimated.ScrollView
+            {...restProps}
+            ref={onRef}
+        >
+            {children}
+        </Reanimated.ScrollView>
+    );
+}
+
+export default AnimatedActionSheetAwareScrollView;

src/components/ActionSheetAwareScrollView/AnimatedActionSheetAwareScrollView/types.ts

@@ -0,0 +1,7 @@
+import type {ActionSheetAwareScrollViewProps} from '@components/ActionSheetAwareScrollView/types';
+
+import type {KeyboardChatScrollViewProps} from 'react-native-keyboard-controller';
+
+type AnimatedActionSheetAwareScrollViewProps = ActionSheetAwareScrollViewProps & Pick<KeyboardChatScrollViewProps, 'inverted'>;
+
+export default AnimatedActionSheetAwareScrollViewProps;

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.tsx

@@ -1,37 +1,31 @@
-// 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';
-import Reanimated from 'react-native-reanimated';
 
-import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
+import type {RenderActionSheetAwareScrollViewComponent} from './types';
 
 import {Actions, ActionSheetAwareScrollViewProvider, useActionSheetAwareScrollViewActions, useActionSheetAwareScrollViewState} from './ActionSheetAwareScrollViewContext';
-import useActionSheetAwareScrollViewRef from './useActionSheetAwareScrollViewRef';
-
-function ActionSheetAwareScrollView({children, ref, ...restProps}: ActionSheetAwareScrollViewProps) {
-    const {onRef} = useActionSheetAwareScrollViewRef(ref);
-
-    return (
-        <Reanimated.ScrollView
-            {...restProps}
-            ref={onRef}
-        >
-            {children}
-        </Reanimated.ScrollView>
-    );
-}
+import AnimatedActionSheetAwareScrollView from './AnimatedActionSheetAwareScrollView';
 
 /**
- * The bottom spacing config for this action sheet is only used on Android and iOS. On other platforms,
- * this component will be a default Reanimated.ScrollView, because the onScroll handler used is from Reanimated.
- *
  * This function should be used as renderScrollComponent prop for FlatList
- * @param {Object} props - props that will be passed to the ScrollView from FlatList
- * @returns {React.ReactElement} - ActionSheetAwareScrollView
+ * @param props - props that will be passed to the ScrollView from FlatList
+ * @returns - ActionSheetAwareScrollView
  */
-
 const renderScrollComponent: RenderActionSheetAwareScrollViewComponent = (props) => {
-    return <ActionSheetAwareScrollView {...props} />;
+    return <AnimatedActionSheetAwareScrollView {...props} />;
+};
+
+/**
+ * This function should be used as renderScrollComponent prop for FlatList
+ * @param props - props that will be passed to the ScrollView from FlatList
+ * @returns - ActionSheetAwareScrollView
+ */
+const renderInvertedScrollComponent: RenderActionSheetAwareScrollViewComponent = (props) => {
+    return (
+        <AnimatedActionSheetAwareScrollView
+            inverted
+            {...props}
+        />
+    );
 };
 
-export {renderScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};
+export {renderScrollComponent, renderInvertedScrollComponent, ActionSheetAwareScrollViewProvider, Actions, useActionSheetAwareScrollViewState, useActionSheetAwareScrollViewActions};

src/components/ActionSheetAwareScrollView/types.ts

@@ -1,3 +1,3 @@
 import type {ActionWithPayload, State} from '@hooks/useWorkletStateMachine';
 
 import type {Ref} from 'react';
@@ -33,11 +33,14 @@
     ref?: Ref<ActionSheetAwareScrollViewHandle>;
 };
 
-type RenderActionSheetAwareScrollViewComponent = (props: ActionSheetAwareScrollViewProps) => React.ReactElement<ScrollViewProps>;
+type ActionSheetAwareScrollViewElement = React.ReactElement<ScrollViewProps>;
+
+type RenderActionSheetAwareScrollViewComponent = (props: ActionSheetAwareScrollViewProps) => ActionSheetAwareScrollViewElement;
 
 export type {
     ActionSheetAwareScrollViewProps,
     ActionSheetAwareScrollViewHandle,
+    ActionSheetAwareScrollViewElement,
     RenderActionSheetAwareScrollViewComponent,
     ActionSheetAwareScrollViewContextValue,
     ActionSheetAwareScrollViewStateContextValue,