feat: interactive keyboard dismissal

jest/setup.ts

@@ -161,6 +161,8 @@ jest.mock('react-native-nitro-sqlite', () => ({
     open: jest.fn(),
 }));
 
+jest.mock('@src/hooks/useKeyboardDismissibleFlatListValues/index.ts');
+
 // Provide a default global fetch mock for tests that do not explicitly set it up
 // This avoids ReferenceError: fetch is not defined in CI when coverage is enabled
 const globalWithOptionalFetch: typeof globalThis & {fetch?: unknown} = globalThis as typeof globalThis & {fetch?: unknown};

src/App.tsx

@@ -19,6 +19,7 @@ import FullScreenLoaderContextProvider from './components/FullScreenLoaderContex
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import InitialURLContextProvider from './components/InitialURLContextProvider';
 import {InputBlurContextProvider} from './components/InputBlurContext';
+import {KeyboardDismissibleFlatListContextProvider} from './components/KeyboardDismissibleFlatList/KeyboardDismissibleFlatListContext';
 import KeyboardProvider from './components/KeyboardProvider';
 import {LocaleContextProvider} from './components/LocaleContextProvider';
 import NavigationBar from './components/NavigationBar';
@@ -115,6 +116,7 @@ function App() {
                                         VideoPopoverMenuContextProvider,
                                         KeyboardProvider,
                                         KeyboardStateProvider,
+                                        KeyboardDismissibleFlatListContextProvider,
                                         SearchRouterContextProvider,
                                         ProductTrainingContextProvider,
                                         InputBlurContextProvider,

src/CONST/index.ts

@@ -2045,6 +2045,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,
@@ -7261,6 +7263,11 @@ const CONST = {
         REVIEW_WORKSPACE_SETTINGS: 'reviewWorkspaceSettings',
         INVITE_ACCOUNTANT: 'inviteAccountant',
     },
+
+    LIST_BEHAVIOR: {
+        REGULAR: 'regular',
+        INVERTED: 'inverted',
+    },
 } as const;
 
 const CONTINUATION_DETECTION_SEARCH_FILTER_KEYS = [

src/components/ActionSheetAwareScrollView/index.ios.tsx → src/components/ActionSheetAwareScrollView/index.native.tsx

@@ -1,12 +1,13 @@
 import React, {forwardRef, useCallback} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import type {ScrollView} from 'react-native';
 import Reanimated, {useAnimatedRef, useAnimatedStyle} from 'react-native-reanimated';
+import type {AnimatedScrollView} from 'react-native-reanimated/lib/typescript/component/ScrollView';
 import {Actions, ActionSheetAwareScrollViewContext, ActionSheetAwareScrollViewProvider} from './ActionSheetAwareScrollViewContext';
-import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
+import type {ActionSheetAwareScrollViewProps} from './types';
 import useActionSheetKeyboardSpacing from './useActionSheetKeyboardSpacing';
+import usePreventScrollOnKeyboardInteraction from './usePreventScrollOnKeyboardInteraction';
 
-const ActionSheetAwareScrollView = forwardRef<ScrollView, ActionSheetAwareScrollViewProps>(({style, children, ...props}, ref) => {
+const ActionSheetAwareScrollView = forwardRef<AnimatedScrollView, ActionSheetAwareScrollViewProps>(({style, children, onScroll: onScrollProp, ...props}, ref) => {
     const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
 
     const onRef = useCallback(
@@ -28,11 +29,14 @@ const ActionSheetAwareScrollView = forwardRef<ScrollView, ActionSheetAwareScroll
         paddingTop: spacing.get(),
     }));
 
+    const {onScroll} = usePreventScrollOnKeyboardInteraction({scrollViewRef: scrollViewAnimatedRef, onScroll: onScrollProp});
+
     return (
         <Reanimated.ScrollView
-            ref={onRef}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
+            ref={onRef}
+            onScroll={onScroll}
             style={[style, animatedStyle]}
         >
             {children}
@@ -47,7 +51,7 @@ export default ActionSheetAwareScrollView;
  * @param props - props that will be passed to the ScrollView from FlatList
  * @returns - ActionSheetAwareScrollView
  */
-const renderScrollComponent: RenderActionSheetAwareScrollViewComponent = (props) => {
+const renderScrollComponent = (props: ActionSheetAwareScrollViewProps) => {
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <ActionSheetAwareScrollView {...props} />;
 };

src/components/ActionSheetAwareScrollView/index.tsx

@@ -1,30 +1,45 @@
-// this whole file is just for other platforms
-// iOS version has everything implemented
 import React, {forwardRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import {ScrollView} from 'react-native';
+import type {AnimatedRef} from 'react-native-reanimated';
+import Animated, {useAnimatedRef} from 'react-native-reanimated';
+import type Reanimated from 'react-native-reanimated';
+import type {AnimatedScrollView} from 'react-native-reanimated/lib/typescript/component/ScrollView';
 import {Actions, ActionSheetAwareScrollViewContext, ActionSheetAwareScrollViewProvider} from './ActionSheetAwareScrollViewContext';
-import type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent} from './types';
+import type {ActionSheetAwareScrollViewProps} from './types';
+import usePreventScrollOnKeyboardInteraction from './usePreventScrollOnKeyboardInteraction';
 
-const ActionSheetAwareScrollView = forwardRef<ScrollView, ActionSheetAwareScrollViewProps>((props, ref) => (
-    <ScrollView
-        ref={ref}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {props.children}
-    </ScrollView>
-));
+const ActionSheetAwareScrollView = forwardRef<AnimatedScrollView, ActionSheetAwareScrollViewProps>(({onScroll: onScrollProp, ...props}, ref) => {
+    const fallbackRef = useAnimatedRef<Reanimated.ScrollView>();
+    const combinedRef = ref ?? fallbackRef;
+
+    const {onScroll} = usePreventScrollOnKeyboardInteraction({scrollViewRef: combinedRef as AnimatedRef<Reanimated.ScrollView>, onScroll: onScrollProp});
+
+    return (
+        <Animated.ScrollView
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={combinedRef}
+            onScroll={onScroll}
+        >
+            {props.children}
+        </Animated.ScrollView>
+    );
+});
 
 export default ActionSheetAwareScrollView;
 
 /**
- * This is only used on iOS. On other platforms it's just undefined to be pass a prop to FlatList
+ * The bottom spacing config for this action sheet is only used on Android and iOS. On other platforms,
+ * this component will be a default Animated.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
  */
-const renderScrollComponent: RenderActionSheetAwareScrollViewComponent = undefined;
+
+function renderScrollComponent(props: ActionSheetAwareScrollViewProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <ActionSheetAwareScrollView {...props} />;
+}
 
 export {renderScrollComponent, ActionSheetAwareScrollViewContext, ActionSheetAwareScrollViewProvider, Actions};

src/components/ActionSheetAwareScrollView/types.ts

@@ -1,6 +1,10 @@
-import type {PropsWithChildren} from 'react';
-import type {ScrollViewProps} from 'react-native';
+import type {ReactNode} from 'react';
+import type {AnimatedScrollViewProps, ScrollHandlerProcessed, SharedValue} from 'react-native-reanimated';
 
-type ActionSheetAwareScrollViewProps = PropsWithChildren<ScrollViewProps>;
-type RenderActionSheetAwareScrollViewComponent = ((props: ActionSheetAwareScrollViewProps) => React.ReactElement<ScrollViewProps>) | undefined;
-export type {ActionSheetAwareScrollViewProps, RenderActionSheetAwareScrollViewComponent};
+type ActionSheetAwareScrollViewProps = Omit<AnimatedScrollViewProps, 'onScroll'> & {
+    children?: ReactNode | SharedValue<ReactNode>;
+    onScroll?: ScrollHandlerProcessed<Record<string, unknown>>;
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export type {ActionSheetAwareScrollViewProps};

src/components/ActionSheetAwareScrollView/usePreventScrollOnKeyboardInteraction.ts

@@ -0,0 +1,34 @@
+import {useKeyboardHandler} from 'react-native-keyboard-controller';
+import type {AnimatedRef, ScrollHandlerProcessed} from 'react-native-reanimated';
+import {scrollTo, useAnimatedScrollHandler, useComposedEventHandler, useSharedValue} from 'react-native-reanimated';
+import type Reanimated from 'react-native-reanimated';
+
+function usePreventScrollOnKeyboardInteraction({
+    scrollViewRef,
+    onScroll: onScrollProp,
+}: {
+    scrollViewRef: AnimatedRef<Reanimated.ScrollView>;
+    onScroll?: ScrollHandlerProcessed<Record<string, unknown>>;
+}) {
+    // Receive the latest scroll position whenever the content is scrolled
+    const scroll = useSharedValue(0);
+    const onScrollInternal = useAnimatedScrollHandler({
+        onScroll: (e) => {
+            scroll.set(e.contentOffset.y);
+        },
+    });
+
+    // Scroll to the latest scroll position whenever the keyboard is interacted with,
+    // to prevent additional scrolling when the keyboard is interactively dismissed.
+    useKeyboardHandler({
+        onInteractive: () => {
+            scrollTo(scrollViewRef, 0, scroll.get(), false);
+        },
+    });
+
+    const onScroll = useComposedEventHandler([onScrollInternal, onScrollProp ?? null]);
+
+    return {onScroll};
+}
+
+export default usePreventScrollOnKeyboardInteraction;

src/components/AnimatedFlatListWithCellRenderer.tsx

@@ -0,0 +1,122 @@
+/**
+ * This is a copy of the FlatList 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/FlatList.tsx
+ */
+import React, {forwardRef, useRef} from 'react';
+import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent, CellRendererProps as RNCellRendererProps} from 'react-native';
+import {FlatList} from 'react-native';
+import type {AnimatedProps, ILayoutAnimationBuilder, ScrollHandlerProcessed} from 'react-native-reanimated';
+import Animated, {LayoutAnimationConfig} from 'react-native-reanimated';
+
+// eslint-disable-next-line deprecation/deprecation
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+
+type CellRendererComponentProps<T> = React.ComponentType<RNCellRendererProps<T>> | null | undefined;
+
+const createCellRendererComponent = <Item,>(CellRendererComponentProp?: CellRendererComponentProps<Item>, itemLayoutAnimationRef?: React.RefObject<ILayoutAnimationBuilder | undefined>) => {
+    // Make CellRendererComponent specifically use the 'Item' type from its parent scope
+    function CellRendererComponent(props: RNCellRendererProps<Item>) {
+        return (
+            <Animated.View
+                // TODO TYPESCRIPT This is temporary cast is to get rid of .d.ts file.
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+                layout={itemLayoutAnimationRef?.current as any}
+                onLayout={props.onLayout}
+                style={CellRendererComponentProp ? undefined : props.style}
+            >
+                {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                {CellRendererComponentProp ? <CellRendererComponentProp {...props}>{props.children}</CellRendererComponentProp> : props.children}
+            </Animated.View>
+        );
+    }
+
+    return CellRendererComponent;
+};
+type ReanimatedFlatListPropsWithLayout<T> = {
+    /**
+     * Lets you pass layout animation directly to the FlatList item.
+     */
+    itemLayoutAnimation?: ILayoutAnimationBuilder;
+    /**
+     * Lets you skip entering and exiting animations of FlatList items when on FlatList mount or unmount.
+     */
+    skipEnteringExitingAnimations?: boolean;
+} & AnimatedProps<FlatListProps<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.
+type AnimatedFlatListComplement<T> = {
+    getNode(): FlatList<T>;
+} & FlatList<T>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnimatedFlatListWithCellRendererProps<Item = any> = Omit<ReanimatedFlatListPropsWithLayout<Item>, 'CellRendererComponent' | 'onScroll'> & {
+    CellRendererComponent?: CellRendererComponentProps<Item>;
+    onScroll?: ScrollHandlerProcessed<Record<string, unknown>>;
+    additionalOnScrollHandler?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+
+// 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 FlatListForwardRefRender<Item = any>(props: AnimatedFlatListWithCellRendererProps<Item>, ref: React.ForwardedRef<FlatList>) {
+    const {itemLayoutAnimation, skipEnteringExitingAnimations, ...restProps} = props;
+
+    // Set default scrollEventThrottle, because user expects
+    // to have continuous scroll events and
+    // react-native defaults it to 50 for FlatLists.
+    // We set it to 1, so we have peace until
+    // there are 960 fps screens.
+    if (!('scrollEventThrottle' in restProps)) {
+        // eslint-disable-next-line react-compiler/react-compiler
+        restProps.scrollEventThrottle = 1;
+    }
+
+    const itemLayoutAnimationRef = useRef(itemLayoutAnimation);
+    itemLayoutAnimationRef.current = itemLayoutAnimation;
+
+    const CellRendererComponent = React.useMemo(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        () => createCellRendererComponent<any>(props.CellRendererComponent, itemLayoutAnimationRef),
+        [itemLayoutAnimationRef, props.CellRendererComponent],
+    );
+
+    const animatedFlatList = (
+        // @ts-expect-error In its current type state, createAnimatedComponent cannot create generic components.
+        <AnimatedFlatList
+            ref={ref}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...restProps}
+            CellRendererComponent={CellRendererComponent}
+        />
+    );
+
+    if (skipEnteringExitingAnimations === undefined) {
+        return animatedFlatList;
+    }
+
+    return (
+        <LayoutAnimationConfig
+            skipEntering
+            skipExiting
+        >
+            {animatedFlatList}
+        </LayoutAnimationConfig>
+    );
+}
+
+const AnimatedFlatListWithCellRenderer = forwardRef(FlatListForwardRefRender) 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: AnimatedFlatListWithCellRendererProps<ItemT> & {
+        ref?: React.ForwardedRef<FlatList>;
+    },
+) => React.ReactElement;
+
+type ReanimatedFlatList<T> = typeof AnimatedFlatList & AnimatedFlatListComplement<T>;
+
+export type {ReanimatedFlatList, AnimatedFlatListWithCellRendererProps};
+
+export default AnimatedFlatListWithCellRenderer;

src/components/FlatList/index.android.tsx

@@ -2,11 +2,12 @@ import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useRef} from 'react';
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {FlatList} from 'react-native';
-import type {CustomFlatListProps} from './index';
+import KeyboardDismissibleFlatList from '@components/KeyboardDismissibleFlatList';
+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, ...props}: CustomFlatListProps<T>) {
+function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, ...props}: CustomFlatListProps<T>) {
     const lastScrollOffsetRef = useRef(0);
 
     const onScreenFocus = useCallback(() => {
@@ -32,6 +33,17 @@ function CustomFlatList<T>({ref, ...props}: CustomFlatListProps<T>) {
         }, [onScreenFocus]),
     );
 
+    if (enableAnimatedKeyboardDismissal) {
+        return (
+            <KeyboardDismissibleFlatList
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={ref}
+                onMomentumScrollEnd={onMomentumScrollEnd}
+            />
+        );
+    }
+
     return (
         <FlatList<T>
             // eslint-disable-next-line react/jsx-props-no-spreading