New chat page list refactor 2

src/components/ReferralProgramCTA.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type {ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
@@ -26,9 +27,10 @@ type ReferralProgramCTAProps = ReferralProgramCTAOnyxProps & {
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND;
+    style?: ViewStyle;
 };
 
-function ReferralProgramCTA({referralContentType, dismissedReferralBanners}: ReferralProgramCTAProps) {
+function ReferralProgramCTA({referralContentType, dismissedReferralBanners, style}: ReferralProgramCTAProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -46,7 +48,7 @@ function ReferralProgramCTA({referralContentType, dismissedReferralBanners}: Ref
             onPress={() => {
                 Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(referralContentType, Navigation.getActiveRouteWithoutParams()));
             }}
-            style={[styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5]}
+            style={[styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5, style]}
             accessibilityLabel="referral"
             role={CONST.ACCESSIBILITY_ROLE.BUTTON}
         >

src/components/ScreenWrapper.tsx

@@ -1,7 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
 import type {ForwardedRef, ReactNode} from 'react';
-import React, {forwardRef, useEffect, useRef, useState} from 'react';
+import React, {createContext, forwardRef, useEffect, useMemo, useRef, useState} from 'react';
 import type {DimensionValue, StyleProp, ViewStyle} from 'react-native';
 import {Keyboard, PanResponder, View} from 'react-native';
 import {PickerAvoidingView} from 'react-native-picker-select';
@@ -99,6 +99,8 @@ type ScreenWrapperProps = {
     shouldShowOfflineIndicatorInWideScreen?: boolean;
 };
 
+const ScreenWrapperStatusContext = createContext({didScreenTransitionEnd: false});
+
 function ScreenWrapper(
     {
         shouldEnableMaxHeight = false,
@@ -201,6 +203,7 @@ function ScreenWrapper(
     }, []);
 
     const isAvoidingViewportScroll = useTackInputFocus(shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileSafari());
+    const contextValue = useMemo(() => ({didScreenTransitionEnd}), [didScreenTransitionEnd]);
 
     return (
         <SafeAreaConsumer>
@@ -251,16 +254,18 @@ function ScreenWrapper(
                                     <HeaderGap styles={headerGapStyles} />
                                     <TestToolsModal />
                                     {isDevelopment && <CustomDevMenu />}
-                                    {
-                                        // If props.children is a function, call it to provide the insets to the children.
-                                        typeof children === 'function'
-                                            ? children({
-                                                  insets,
-                                                  safeAreaPaddingBottomStyle,
-                                                  didScreenTransitionEnd,
-                                              })
-                                            : children
-                                    }
+                                    <ScreenWrapperStatusContext.Provider value={contextValue}>
+                                        {
+                                            // If props.children is a function, call it to provide the insets to the children.
+                                            typeof children === 'function'
+                                                ? children({
+                                                      insets,
+                                                      safeAreaPaddingBottomStyle,
+                                                      didScreenTransitionEnd,
+                                                  })
+                                                : children
+                                        }
+                                    </ScreenWrapperStatusContext.Provider>
                                     {isSmallScreenWidth && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
                                     {!isSmallScreenWidth && shouldShowOfflineIndicatorInWideScreen && (
                                         <OfflineIndicator
@@ -281,3 +286,5 @@ function ScreenWrapper(
 ScreenWrapper.displayName = 'ScreenWrapper';
 
 export default withNavigationFallback(forwardRef(ScreenWrapper));
+
+export {ScreenWrapperStatusContext};

src/hooks/useScreenWrapperTransitionStatus.ts

@@ -0,0 +1,17 @@
+import {useContext} from 'react';
+import {ScreenWrapperStatusContext} from '@components/ScreenWrapper';
+
+/**
+ * Hook to get the transition status of a screen inside a ScreenWrapper.
+ * Use this hook if you can't get the transition status from the ScreenWrapper itself. Usually when ScreenWrapper is used inside TopTabNavigator.
+ * @returns `didScreenTransitionEnd` flag to indicate if navigation transition ended.
+ */
+export default function useScreenWrapperTranstionStatus() {
+    const value = useContext(ScreenWrapperStatusContext);
+
+    if (value === undefined) {
+        throw new Error("Couldn't find values for screen ScreenWrapper transition status. Are you inside a screen in ScreenWrapper?");
+    }
+
+    return value;
+}

src/hooks/useStyledSafeAreaInsets.ts

@@ -0,0 +1,37 @@
+// eslint-disable-next-line no-restricted-imports
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import useStyleUtils from './useStyleUtils';
+
+/**
+ * Custom hook to get the styled safe area insets.
+ * This hook utilizes the `SafeAreaInsetsContext` to retrieve the current safe area insets
+ * and applies styling adjustments using the `useStyleUtils` hook.
+ *
+ * @returns  An object containing the styled safe area insets and additional styles.
+ * @returns  .paddingTop The top padding adjusted for safe area.
+ * @returns  .paddingBottom The bottom padding adjusted for safe area.
+ * @returns  .insets The safe area insets object or undefined if not available.
+ * @returns  .safeAreaPaddingBottomStyle An object containing the bottom padding style adjusted for safe area.
+ *
+ * @example
+ * // How to use this hook in a component
+ * function MyComponent() {
+ *     const { paddingTop, paddingBottom, safeAreaPaddingBottomStyle } = useStyledSafeAreaInsets();
+ *
+ *     // Use these values to style your component accordingly
+ * }
+ */
+function useStyledSafeAreaInsets() {
+    const StyleUtils = useStyleUtils();
+    const insets = useSafeAreaInsets();
+
+    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+    return {
+        paddingTop,
+        paddingBottom,
+        insets: insets ?? undefined,
+        safeAreaPaddingBottomStyle: {paddingBottom},
+    };
+}
+
+export default useStyledSafeAreaInsets;

src/libs/OptionsListUtils.ts

@@ -2100,6 +2100,19 @@ function formatSectionsFromSearchTerm(
     };
 }
 
+/**
+ * Helper method to get the `keyForList` for the first option in the OptionsList
+ */
+function getFirstKeyForList(data?: Option[] | null) {
+    if (!data?.length) {
+        return '';
+    }
+
+    const firstNonEmptyDataObj = data[0];
+
+    return firstNonEmptyDataObj.keyForList ? firstNonEmptyDataObj.keyForList : '';
+}
+
 export {
     getAvatarsForAccountIDs,
     isCurrentUser,
@@ -2136,6 +2149,7 @@ export {
     createOptionFromReport,
     getReportOption,
     getTaxRatesSection,
+    getFirstKeyForList,
 };
 
-export type {MemberForList, CategorySection, CategoryTreeSection, GetOptions, OptionList, SearchOption, PayeePersonalDetails, Category, TaxRatesOption};
+export type {MemberForList, CategorySection, CategoryTreeSection, GetOptions, OptionList, SearchOption, PayeePersonalDetails, Category, TaxRatesOption, Option};