feat: Migrate lists to interactive keyboard dismissal

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

@@ -0,0 +1,8 @@
+# `react-native-keyboard-controller` patches
+
+### [react-native-keyboard-controller+1.20.7+001+fix-invalid-onInteractive-event-calls.patch](react-native-keyboard-controller+1.20.7+001+fix-invalid-onInteractive-event-calls.patch)
+
+- Reason: Fixes an issue where `react-native-keyboard-controller` sends invalid `onInteractive` events in `useKeyboardHandler`
+- Upstream PR/issue: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1298
+- E/App issue: 🛑
+- PR Introducing Patch: https://github.com/Expensify/App/pull/71440

patches/react-native-keyboard-controller/react-native-keyboard-controller+1.20.7+001+fix-invalid-onInteractive-event-calls.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/react-native-keyboard-controller/ios/observers/movement/observer/KeyboardMovementObserver+Interactive.swift b/node_modules/react-native-keyboard-controller/ios/observers/movement/observer/KeyboardMovementObserver+Interactive.swift
+index d1ccd45..0695b74 100644
+--- a/node_modules/react-native-keyboard-controller/ios/observers/movement/observer/KeyboardMovementObserver+Interactive.swift
++++ b/node_modules/react-native-keyboard-controller/ios/observers/movement/observer/KeyboardMovementObserver+Interactive.swift
+@@ -30,6 +30,10 @@ extension KeyboardMovementObserver {
+       return
+     }
+
++    if KeyboardEventsIgnorer.shared.shouldIgnore {
++      return
++    }
++
+     let position = keyboardTrackingView.interactive(point: changeValue)
+
+     if position == KeyboardTrackingView.invalidPosition {

src/CONST/index.ts

@@ -2225,6 +2225,8 @@ const CONST = {
         BIG_SCREEN_SUGGESTION_WIDTH: 300,
     },
     COMPOSER_MAX_HEIGHT: 125,
+    // Starts with this value to avoid a big jump while the container height is being calculated in case the screen is first rendered w/ a full size composer. It's based on the perceived concierge header height on the iPhone 16 Pro.
+    CHAT_HEADER_BASE_HEIGHT: 73,
     CHAT_FOOTER_SECONDARY_ROW_HEIGHT: 15,
     CHAT_FOOTER_SECONDARY_ROW_PADDING: 5,
     CHAT_FOOTER_MIN_HEIGHT: 65,

src/components/Composer/implementation/index.native.tsx

@@ -33,6 +33,7 @@ function Composer({
     selection,
     value,
     isGroupPolicyReport = false,
+    nativeID,
     ref,
     ...props
 }: ComposerProps) {
@@ -112,7 +113,7 @@ function Composer({
 
     return (
         <RNMarkdownTextInput
-            id={CONST.COMPOSER.NATIVE_ID}
+            id={nativeID ?? CONST.COMPOSER.NATIVE_ID}
             multiline
             autoComplete="off"
             placeholderTextColor={theme.placeholderText}

src/components/Composer/implementation/index.tsx

@@ -49,6 +49,7 @@ function Composer({
     onContentSizeChange,
     shouldContainScroll = true,
     isGroupPolicyReport = false,
+    nativeID,
     ref,
     ...props
 }: ComposerProps) {
@@ -339,7 +340,7 @@ function Composer({
 
     return (
         <RNMarkdownTextInput
-            id={CONST.COMPOSER.NATIVE_ID}
+            nativeID={nativeID ?? CONST.COMPOSER.NATIVE_ID}
             autoComplete="off"
             autoCorrect={!isMobileSafari()}
             placeholderTextColor={theme.placeholderText}

src/components/FlatList/FlatListWithScrollKey/types.ts

@@ -1,7 +1,8 @@
 import type {ForwardedRef} from 'react';
-import type {FlatListProps, ListRenderItem, FlatList as RNFlatList} from 'react-native';
+import type {ListRenderItem, FlatList as RNFlatList} from 'react-native';
+import type {CustomFlatListProps} from '@components/FlatList/types';
 
-type BaseFlatListWithScrollKeyProps<T> = Omit<FlatListProps<T>, 'data' | 'initialScrollIndex' | 'onContentSizeChange'> & {
+type BaseFlatListWithScrollKeyProps<T> = Omit<CustomFlatListProps<T>, 'data' | 'initialScrollIndex' | 'onContentSizeChange'> & {
     data: T[];
     initialScrollKey?: string | null | undefined;
     keyExtractor: (item: T, index: number) => string;
@@ -11,6 +12,6 @@ type BaseFlatListWithScrollKeyProps<T> = Omit<FlatListProps<T>, 'data' | 'initia
     ref: ForwardedRef<RNFlatList>;
 };
 
-type FlatListWithScrollKeyProps<T> = Omit<BaseFlatListWithScrollKeyProps<T>, 'onContentSizeChange'> & Pick<FlatListProps<T>, 'onContentSizeChange'>;
+type FlatListWithScrollKeyProps<T> = Omit<BaseFlatListWithScrollKeyProps<T>, 'onContentSizeChange'> & Pick<CustomFlatListProps<T>, 'onContentSizeChange'>;
 
 export type {FlatListWithScrollKeyProps, BaseFlatListWithScrollKeyProps};

src/components/FlatList/index.android.tsx

@@ -8,7 +8,7 @@ import type {CustomFlatListProps} from './types';
 
 // FlatList wrapped with the freeze component will lose its scroll state when frozen (only for Android).
 // CustomFlatList saves the offset and use it for scrollToOffset() when unfrozen.
-function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, onMomentumScrollEnd, shouldHideContent = false, ...props}: CustomFlatListProps<T>) {
+function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, onMomentumScrollEnd, shouldHideContent = false, ...restProps}: CustomFlatListProps<T>) {
     const lastScrollOffsetRef = useRef(0);
     const styles = useThemeStyles();
 
@@ -39,13 +39,13 @@ function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, onMome
         }, [onScreenFocus]),
     );
 
-    const contentContainerStyle = [props.contentContainerStyle, shouldHideContent && styles.opacity0];
+    const contentContainerStyle = [restProps.contentContainerStyle, shouldHideContent && styles.opacity0];
 
     if (enableAnimatedKeyboardDismissal) {
         return (
             <KeyboardDismissibleFlatList
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
+                {...restProps}
                 ref={ref}
                 onMomentumScrollEnd={handleScrollEnd}
                 contentContainerStyle={contentContainerStyle}
@@ -56,7 +56,7 @@ function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, onMome
     return (
         <FlatList<T>
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
+            {...restProps}
             ref={ref}
             onMomentumScrollEnd={handleScrollEnd}
             contentContainerStyle={contentContainerStyle}

src/components/FlatList/index.ios.tsx

@@ -2,7 +2,6 @@ import React, {useCallback, useState} from 'react';
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {FlatList} from 'react-native';
 import KeyboardDismissibleFlatList from '@components/KeyboardDismissibleFlatList';
-import useEmitComposerScrollEvents from '@hooks/useEmitComposerScrollEvents';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {CustomFlatListProps} from './types';
 
@@ -37,15 +36,6 @@ function CustomFlatList<T>({
         [onMomentumScrollEnd],
     );
 
-    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: !enableAnimatedKeyboardDismissal, inverted: restProps.inverted});
-    const handleScroll = useCallback(
-        (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-            onScrollProp?.(e);
-            emitComposerScrollEvents();
-        },
-        [emitComposerScrollEvents, onScrollProp],
-    );
-
     const maintainVisibleContentPosition = isScrolling || shouldDisableVisibleContentPosition ? undefined : maintainVisibleContentPositionProp;
 
     const contentContainerStyle = [restProps.contentContainerStyle, shouldHideContent && styles.opacity0];
@@ -72,7 +62,7 @@ function CustomFlatList<T>({
             {...restProps}
             ref={ref}
             maintainVisibleContentPosition={maintainVisibleContentPosition}
-            onScroll={handleScroll}
+            onScroll={onScrollProp}
             onMomentumScrollBegin={handleScrollBegin}
             onMomentumScrollEnd={handleScrollEnd}
             contentContainerStyle={contentContainerStyle}

src/components/KeyboardDismissibleFlatList/KeyboardDismissibleFlatListContext.tsx

@@ -38,16 +38,18 @@ function KeyboardDismissibleFlatListContextProvider({children}: PropsWithChildre
     const contentSizeHeight = useSharedValue(0);
     const layoutMeasurementHeight = useSharedValue(0);
 
+    const isKeyboardOpening = useSharedValue(false);
+
     useKeyboardHandler({
         onStart: (e) => {
             'worklet';
 
             const scrollYValueAtStart = scrollY.get();
             const prevHeight = height.get();
 
-            height.set(e.height);
-
             const willKeyboardOpen = e.progress === 1;
+            isKeyboardOpening.set(willKeyboardOpen);
+
 
             if (willKeyboardOpen) {
                 if (e.height > 0) {
@@ -90,6 +92,7 @@ function KeyboardDismissibleFlatListContextProvider({children}: PropsWithChildre
         onInteractive: (e) => {
             'worklet';
 
+
             height.set(e.height);
 
             if (listBehavior === CONST.LIST_BEHAVIOR.REGULAR) {
@@ -101,6 +104,12 @@ function KeyboardDismissibleFlatListContextProvider({children}: PropsWithChildre
         onMove: (e) => {
             'worklet';
 
+            // This is to fix an issue with react-native-keyboard-controller, where an `onMove` event is triggered with an invalid height value when the keyboard is opened
+            // react-native-keyboard-controller issue: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1298
+            if (isKeyboardOpening.get() && e.height < height.get()) {
+                return;
+            }
+
             height.set(e.height);
         },
         onEnd: (e) => {

src/components/KeyboardDismissibleFlatList/index.tsx

@@ -1,25 +1,19 @@
 import React from 'react';
-import {useAnimatedScrollHandler, useComposedEventHandler} from 'react-native-reanimated';
+import {useComposedEventHandler} from 'react-native-reanimated';
 import type {AnimatedFlatListWithCellRendererProps} from '@components/AnimatedFlatListWithCellRenderer';
 import AnimatedFlatListWithCellRenderer from '@components/AnimatedFlatListWithCellRenderer';
-import useEmitComposerScrollEvents from '@hooks/useEmitComposerScrollEvents';
 import {useKeyboardDismissibleFlatListActions} from './KeyboardDismissibleFlatListContext';
 
 function KeyboardDismissibleFlatList<T>({onScroll: onScrollProp, inverted, ref, ...restProps}: AnimatedFlatListWithCellRendererProps<T>) {
     const {onScroll: onScrollHandleKeyboard} = useKeyboardDismissibleFlatListActions();
 
-    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: true, inverted});
-
-    const additionalOnScroll = useAnimatedScrollHandler({
-        onScroll: emitComposerScrollEvents,
-    });
-
-    const onScroll = useComposedEventHandler([onScrollHandleKeyboard, additionalOnScroll, onScrollProp ?? null]);
+    const onScroll = useComposedEventHandler([onScrollHandleKeyboard, onScrollProp ?? null]);
 
     return (
         <AnimatedFlatListWithCellRenderer
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...restProps}
+            inverted={inverted}
             ref={ref}
             onScroll={onScroll}
         />