Duplicated "Total" amount field briefly appear before the report loads

src/components/FlatList/index.android.tsx

@@ -3,12 +3,14 @@ import React, {useCallback, useRef} from 'react';
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {FlatList} from 'react-native';
 import KeyboardDismissibleFlatList from '@components/KeyboardDismissibleFlatList';
+import useThemeStyles from '@hooks/useThemeStyles';
 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, ...props}: CustomFlatListProps<T>) {
+function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, onMomentumScrollEnd, shouldHideContent = false, ...props}: CustomFlatListProps<T>) {
     const lastScrollOffsetRef = useRef(0);
+    const styles = useThemeStyles();
 
     const onScreenFocus = useCallback(() => {
         if (typeof ref === 'function') {
@@ -37,13 +39,16 @@ function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, onMome
         }, [onScreenFocus]),
     );
 
+    const contentContainerStyle = [props.contentContainerStyle, shouldHideContent && styles.opacity0];
+
     if (enableAnimatedKeyboardDismissal) {
         return (
             <KeyboardDismissibleFlatList
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
                 ref={ref}
                 onMomentumScrollEnd={handleScrollEnd}
+                contentContainerStyle={contentContainerStyle}
             />
         );
     }
@@ -54,6 +59,7 @@ function CustomFlatList<T>({ref, enableAnimatedKeyboardDismissal = false, onMome
             {...props}
             ref={ref}
             onMomentumScrollEnd={handleScrollEnd}
+            contentContainerStyle={contentContainerStyle}
         />
     );
 }

src/components/FlatList/index.ios.tsx

@@ -3,6 +3,7 @@ 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';
 
 // On iOS, we have to unset maintainVisibleContentPosition while the user is scrolling to prevent jumping to the beginning issue
@@ -14,9 +15,11 @@ function CustomFlatList<T>({
     onMomentumScrollBegin,
     onMomentumScrollEnd,
     onScroll: onScrollProp,
+    shouldHideContent = false,
     ...restProps
 }: CustomFlatListProps<T>) {
     const [isScrolling, setIsScrolling] = useState(false);
+    const styles = useThemeStyles();
 
     const handleScrollBegin = useCallback(
         (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -45,6 +48,8 @@ function CustomFlatList<T>({
 
     const maintainVisibleContentPosition = isScrolling || shouldDisableVisibleContentPosition ? undefined : maintainVisibleContentPositionProp;
 
+    const contentContainerStyle = [restProps.contentContainerStyle, shouldHideContent && styles.opacity0];
+
     if (enableAnimatedKeyboardDismissal) {
         return (
             <KeyboardDismissibleFlatList
@@ -56,6 +61,7 @@ function CustomFlatList<T>({
                 onScroll={onScrollProp}
                 onMomentumScrollBegin={handleScrollBegin}
                 onMomentumScrollEnd={handleScrollEnd}
+                contentContainerStyle={contentContainerStyle}
             />
         );
     }
@@ -69,6 +75,7 @@ function CustomFlatList<T>({
             onScroll={handleScroll}
             onMomentumScrollBegin={handleScrollBegin}
             onMomentumScrollEnd={handleScrollEnd}
+            contentContainerStyle={contentContainerStyle}
         />
     );
 }

src/components/FlatList/index.tsx

@@ -4,6 +4,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {FlatList} from 'react-native';
 import useEmitComposerScrollEvents from '@hooks/useEmitComposerScrollEvents';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {isMobileSafari} from '@libs/Browser';
 import type {CustomFlatListProps} from './types';
 
@@ -43,7 +44,16 @@ function getScrollableNode(flatList: FlatList | null): HTMLElement | undefined {
     return flatList?.getScrollableNode() as HTMLElement | undefined;
 }
 
-function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false, onScroll: onScrollProp, initialNumToRender, ref, ...restProps}: CustomFlatListProps<TItem>) {
+function MVCPFlatList<TItem>({
+    maintainVisibleContentPosition,
+    horizontal = false,
+    onScroll: onScrollProp,
+    initialNumToRender,
+    shouldHideContent = false,
+    ref,
+    ...restProps
+}: CustomFlatListProps<TItem>) {
+    const styles = useThemeStyles();
     const {minIndexForVisible: mvcpMinIndexForVisible, autoscrollToTopThreshold: mvcpAutoscrollToTopThreshold} = maintainVisibleContentPosition ?? {};
     const scrollRef = useRef<FlatList | null>(null);
     const prevFirstVisibleOffsetRef = useRef(0);
@@ -251,6 +261,7 @@ function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false
                 }
                 restProps.onLayout?.(e);
             }}
+            contentContainerStyle={[restProps.contentContainerStyle, shouldHideContent && styles.visibilityHidden]}
         />
     );
 }

src/components/FlatList/types.ts

@@ -22,6 +22,11 @@ type CustomFlatListProps<T> = Omit<FlatListProps<T>, 'CellRendererComponent'> &
      * Custom cell renderer component
      */
     CellRendererComponent?: React.ComponentType<CellRendererProps<T>> | null;
+
+    /**
+     * Whether to hide the content (e.g. when first displaying the report actions list, we initially show only the top report actions. We then show the full report actions list after the user scrolls)
+     */
+    shouldHideContent?: boolean;
 };
 
 // eslint-disable-next-line import/prefer-default-export

src/pages/home/report/ReportActionsList.tsx

@@ -871,11 +871,8 @@ function ReportActionsList({
                     data={sortedVisibleReportActions}
                     renderItem={renderItem}
                     renderScrollComponent={renderActionSheetAwareScrollView}
-                    contentContainerStyle={[
-                        styles.chatContentScrollView,
-                        shouldScrollToEndAfterLayout ? styles.visibilityHidden : styles.visibilityVisible,
-                        shouldFocusToTopOnMount ? styles.justifyContentEnd : undefined,
-                    ]}
+                    contentContainerStyle={[styles.chatContentScrollView, shouldFocusToTopOnMount ? styles.justifyContentEnd : undefined]}
+                    shouldHideContent={shouldScrollToEndAfterLayout}
                     shouldDisableVisibleContentPosition={shouldScrollToEndAfterLayout}
                     showsVerticalScrollIndicator={!shouldScrollToEndAfterLayout}
                     keyExtractor={keyExtractor}