Merge pull request Expensify#34356 from lukemorawski/NewChatPage_list…

…_refactor

New Chat page list refactor

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -655,9 +655,10 @@ class BaseOptionsSelector extends Component {
                     )}
                 </View>
                 {this.props.shouldShowReferralCTA && (
-                    <View style={[this.props.themeStyles.ph5, this.props.themeStyles.pb5, this.props.themeStyles.flexShrink0]}>
-                        <ReferralProgramCTA referralContentType={this.props.referralContentType} />
-                    </View>
+                    <ReferralProgramCTA
+                        referralContentType={this.props.referralContentType}
+                        style={[this.props.themeStyles.mh5, this.props.themeStyles.mb5, this.props.themeStyles.flexShrink0]}
+                    />
                 )}
 
                 {shouldShowFooter && (

src/components/ReferralProgramCTA.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
@@ -25,9 +26,11 @@ 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?: StyleProp<ViewStyle>;
 };
 
-function ReferralProgramCTA({referralContentType, dismissedReferralBanners}: ReferralProgramCTAProps) {
+function ReferralProgramCTA({referralContentType, style, dismissedReferralBanners}: ReferralProgramCTAProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -45,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.w100, 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/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/DoInteractionTask/index.ts

@@ -1,7 +1,8 @@
+import DomUtils from '@libs/DomUtils';
 import type DoInteractionTask from './types';
 
 const doInteractionTask: DoInteractionTask = (callback) => {
-    callback();
+    DomUtils.requestAnimationFrame(callback);
     return null;
 };