[HOLD] feat: Migrate lists to interactive keyboard dismissal

config/eslint/eslint.seatbelt.tsv

@@ -61,6 +61,9 @@
 "../../src/components/AnchorForCommentsOnly/index.tsx"	"no-restricted-syntax"	1
 "../../src/components/AnimatedFlatListWithCellRenderer.tsx"	"@typescript-eslint/no-deprecated/Animated.createAnimatedComponent"	1
 "../../src/components/AnimatedFlatListWithCellRenderer.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	2
+"../../src/components/AnimatedFlashListWithCellRenderer.tsx"	"@typescript-eslint/no-deprecated/Animated.createAnimatedComponent"	1
+"../../src/components/AnimatedFlashListWithCellRenderer.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
+"../../src/components/AnimatedFlashListWithCellRenderer.tsx"	"react-hooks/refs"	2
 "../../src/components/AnimatedSubmitButton/index.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/components/AnimatedSubmitButton/index.tsx"	"react-hooks/refs"	4
 "../../src/components/AnimatedSubmitButton/index.tsx"	"react-hooks/set-state-in-effect"	1
@@ -347,7 +350,6 @@
 "../../src/components/SubStepForms/FullNameStep.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	3
 "../../src/components/SubStepForms/PushRowFieldsStep.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/components/SubStepForms/RegistrationNumberStep.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	3
-"../../src/components/SwipeableView/index.native.tsx"	"react-hooks/refs"	2
 "../../src/components/SymbolButton.tsx"	"no-restricted-syntax"	1
 "../../src/components/Table/middlewares/filtering.ts"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/components/Table/Table.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	4

src/CONST/index.ts

@@ -2998,6 +2998,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/AnimatedFlashListWithCellRenderer.tsx

@@ -0,0 +1,116 @@
+import type {FlashListRef, FlashListProps} from '@shopify/flash-list';
+/**
+ * This is a copy of the FlashList implementation from 'react-native-reanimated' in order to implement a custom CellRendererComponent.
+ * This should be updated when the original implementation updates
+ * Taken from: https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-reanimated/src/component/FlashList.tsx
+ */
+import type {Ref} from 'react';
+import type {CellRendererProps} from 'react-native';
+import type {AnimatedProps, ILayoutAnimationBuilder} from 'react-native-reanimated';
+
+import {FlashList} from '@shopify/flash-list';
+import React, {createContext, useContext} from 'react';
+import Animated, {LayoutAnimationConfig} from 'react-native-reanimated';
+
+const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
+
+type CellRendererComponentType<Item> = React.ComponentType<CellRendererProps<Item>> | null | undefined;
+
+type CellRendererConfig = {
+    itemLayoutAnimation?: ILayoutAnimationBuilder;
+    outerCellRenderer?: CellRendererComponentType<unknown>;
+};
+
+const CellRendererConfigContext = createContext<CellRendererConfig>({});
+
+function CellRendererComponentImpl(props: CellRendererProps<unknown> & {children: React.ReactNode}) {
+    const {itemLayoutAnimation, outerCellRenderer: OuterCellRenderer} = useContext(CellRendererConfigContext);
+
+    return (
+        <Animated.View
+            // @ts-expect-error TODO TYPESCRIPT This is temporary cast is to get rid of .d.ts file.
+            layout={itemLayoutAnimation as unknown}
+            onLayout={props.onLayout}
+            style={OuterCellRenderer ? undefined : props.style}
+        >
+            {OuterCellRenderer ? <OuterCellRenderer {...props}>{props.children}</OuterCellRenderer> : props.children}
+        </Animated.View>
+    );
+}
+type ReanimatedFlashListPropsWithLayout<T> = {
+    /**
+     * Lets you pass layout animation directly to the FlashList item.
+     */
+    itemLayoutAnimation?: ILayoutAnimationBuilder;
+    /**
+     * Lets you skip entering and exiting animations of FlashList items when on FlashList mount or unmount.
+     */
+    skipEnteringExitingAnimations?: boolean;
+} & AnimatedProps<FlashListProps<T>>;
+
+// Since createAnimatedComponent return type is ComponentClass that has the props of the argument,
+// but not things like NativeMethods, etc. we need to add them manually by extending the type.
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnimatedFlashListWithCellRendererProps<Item = any> = Omit<ReanimatedFlashListPropsWithLayout<Item>, 'CellRendererComponent' | 'onScroll' | 'inverted'> & {
+    CellRendererComponent?: CellRendererComponentType<Item>;
+    onScroll?: FlashListProps<Item>['onScroll'];
+    inverted?: boolean | null | undefined;
+    ref?: Ref<FlashListRef<Item>>;
+};
+
+function FlashListRenderImpl(props: AnimatedFlashListWithCellRendererProps<unknown>) {
+    const {itemLayoutAnimation, skipEnteringExitingAnimations, ref, CellRendererComponent: outerCellRenderer, ...restProps} = props;
+
+    // Set default scrollEventThrottle, because user expects
+    // to have continuous scroll events and
+    // react-native defaults it to 50 for FlashLists.
+    // We set it to 1, so we have peace until
+    // there are 960 fps screens.
+    if (!('scrollEventThrottle' in restProps)) {
+        restProps.scrollEventThrottle = 1;
+    }
+
+    const cellRendererConfig: CellRendererConfig = {itemLayoutAnimation, outerCellRenderer};
+
+    const animatedFlashList = (
+        <CellRendererConfigContext.Provider value={cellRendererConfig}>
+            <AnimatedFlashList
+                {...restProps}
+                ref={ref}
+                CellRendererComponent={CellRendererComponentImpl}
+            />
+        </CellRendererConfigContext.Provider>
+    );
+
+    if (skipEnteringExitingAnimations === undefined) {
+        return animatedFlashList;
+    }
+
+    return (
+        <LayoutAnimationConfig
+            skipEntering
+            skipExiting
+        >
+            {animatedFlashList}
+        </LayoutAnimationConfig>
+    );
+}
+
+// We need explicit any here, because this is the exact same type that is used in React Native types.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function FlashListRender<Item = any>(props: AnimatedFlashListWithCellRendererProps<Item>) {
+    return <FlashListRenderImpl {...(props as AnimatedFlashListWithCellRendererProps<unknown>)} />;
+}
+
+const AnimatedFlashListWithCellRenderer = FlashListRender as <
+    // We need explicit any here, because this is the exact same type that is used in React Native types.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ItemT = any,
+>(
+    props: AnimatedFlashListWithCellRendererProps<ItemT>,
+) => React.ReactElement;
+
+export type {AnimatedFlashListWithCellRendererProps};
+
+export default AnimatedFlashListWithCellRenderer;

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

@@ -42,6 +42,7 @@ function Composer({
     selection,
     value,
     isGroupPolicyReport = false,
+    nativeID,
     ref,
     ...props
 }: ComposerProps) {
@@ -132,7 +133,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

@@ -54,6 +54,7 @@ function Composer({
     onContentSizeChange,
     shouldContainScroll = true,
     isGroupPolicyReport = false,
+    nativeID,
     ref,
     ...props
 }: ComposerProps) {
@@ -362,7 +363,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/FlashList/InvertedFlashList/index.tsx

@@ -1,21 +1,11 @@
-import type FlatListRefType from '@components/FlashList/types';
-
-import type {FlashListProps} from '@shopify/flash-list';
+import type {CustomFlashListProps} from '@components/FlashList/types';
 
 import React from 'react';
 
 import FlashList from '..';
 import CellRendererComponent from './CellRendererComponent';
 
-type InvertedFlashListProps<T> = FlashListProps<T> & {
-    data: T[];
-    keyExtractor: (item: T, index: number) => string;
-
-    /** Ref to the underlying list instance. */
-    ref: FlatListRefType;
-};
-
-function InvertedFlashList<T>(props: InvertedFlashListProps<T>) {
+function InvertedFlashList<T>(props: CustomFlashListProps<T>) {
     return (
         <FlashList<T>
             {...props}

src/components/FlashList/index.tsx

@@ -1,12 +1,15 @@
+import KeyboardDismissibleFlashList from '@components/KeyboardDismissibleFlashList';
+
 import useEmitComposerScrollEvents from '@hooks/useEmitComposerScrollEvents';
 
-import type {FlashListProps} from '@shopify/flash-list';
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 
 import {FlashList as ShopifyFlashList} from '@shopify/flash-list';
 import React from 'react';
 
-function FlashList<T>({onScroll: onScrollProp, inverted, ...restProps}: FlashListProps<T>) {
+import type {CustomFlashListProps} from './types';
+
+function FlashList<T>({enableAnimatedKeyboardDismissal, onScroll: onScrollProp, inverted, ...restProps}: CustomFlashListProps<T>) {
     const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: true, inverted});
 
     const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -15,6 +18,17 @@ function FlashList<T>({onScroll: onScrollProp, inverted, ...restProps}: FlashLis
         emitComposerScrollEvents();
     };
 
+    if (enableAnimatedKeyboardDismissal) {
+        return (
+            <KeyboardDismissibleFlashList
+                {...restProps}
+                inverted={inverted}
+                // Composer scroll events are emitted in `KeyboardDismissibleFlatList` separately, therefore we pass the `onScroll` prop instead of the `handleScroll` callback.
+                onScroll={onScrollProp}
+            />
+        );
+    }
+
     return (
         <ShopifyFlashList<T>
             {...restProps}

src/components/FlashList/types.ts

@@ -1,7 +1,41 @@
+import type {FlashListProps, FlashListRef} from '@shopify/flash-list';
 import type {RefObject} from 'react';
-import type {FlatList} from 'react-native';
+import type {CellRendererProps, FlatList} from 'react-native';
 
 /** Ref to the underlying list instance attached via `ref={}`. */
-type FlatListRefType = RefObject<FlatList<unknown> | null> | null;
+type FlatListRefType<T = unknown> = RefObject<FlatList<T> | null> | null;
 
+/** Ref to the underlying list instance attached via `ref={}`. */
+type FlashListRefType<T = unknown> = RefObject<FlashListRef<T> | null> | null;
+
+/** Ref shape shared by report lists and the report scroll manager. */
+type ActionListRefType = RefObject<{
+    getNativeScrollRef?: () => unknown;
+    scrollToEnd: (params?: {animated?: boolean}) => void;
+    scrollToIndex: (params: {animated?: boolean; index: number; viewOffset?: number; viewPosition?: number}) => void;
+    scrollToOffset: (params: {animated?: boolean; offset: number}) => void;
+} | null> | null;
+
+type CustomFlashListProps<T> = Omit<FlashListProps<T>, 'CellRendererComponent'> & {
+    /** Ref to the underlying list instance. */
+    ref?: FlashListRefType<T>;
+
+    /**
+     * Whether to use the animated keyboard handler capabilities on native (iOS and Android)
+     * Allows for interactive keyboard dismissal when the user drags the keyboard down
+     */
+    enableAnimatedKeyboardDismissal?: boolean;
+
+    /**
+     * Custom cell renderer component
+     */
+    CellRendererComponent?: React.ComponentType<CellRendererProps<T>>;
+
+    /** The array of items to render in the list. */
+    data: T[];
+
+    /** Function that extracts a unique key for each item in the list. */
+    keyExtractor: (item: T, index: number) => string;
+};
 export default FlatListRefType;
+export type {ActionListRefType, FlashListRefType, CustomFlashListProps};

src/components/FlatList/FlatList/index.android.tsx

@@ -12,7 +12,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, onScroll, shouldHideContent = false, ...props}: CustomFlatListProps<T>) {
+function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, onMomentumScrollEnd, onScroll, shouldHideContent = false, ...restProps}: CustomFlatListProps<T>) {
     const lastScrollOffsetRef = useRef(0);
     const styles = useThemeStyles();
 
@@ -47,12 +47,12 @@ 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
-                {...props}
+                {...restProps}
                 ref={ref}
                 onScroll={handleScroll}
                 onMomentumScrollEnd={handleScrollEnd}
@@ -63,7 +63,7 @@ function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, onMome
 
     return (
         <FlatList<T>
-            {...props}
+            {...restProps}
             ref={ref}
             onScroll={handleScroll}
             onMomentumScrollEnd={handleScrollEnd}

src/components/FlatList/FlatList/index.ios.tsx

@@ -2,7 +2,6 @@ import useFlatListHandle from '@components/FlatList/hooks/useFlatListHandle';
 import type {FlatListInnerRefType} from '@components/FlatList/hooks/useFlatListHandle';
 import KeyboardDismissibleFlatList from '@components/KeyboardDismissibleFlatList';
 
-import useEmitComposerScrollEvents from '@hooks/useEmitComposerScrollEvents';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
@@ -42,15 +41,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 listRef = useRef<FlatListInnerRefType<T> | null>(null);
     useFlatListHandle<T>({
         ref,
@@ -84,7 +74,7 @@ function CustomFlatList<T>({
             {...restProps}
             ref={listRef}
             maintainVisibleContentPosition={maintainVisibleContentPosition}
-            onScroll={handleScroll}
+            onScroll={onScrollProp}
             onMomentumScrollBegin={handleScrollBegin}
             onMomentumScrollEnd={handleScrollEnd}
             contentContainerStyle={contentContainerStyle}