Merge pull request #38039 from lukemorawski/36038-fix-selection_list_…

…footer_extra_padding_2

36038 fix selection list footer extra padding 2

src/components/FixedFooter.tsx

@@ -2,6 +2,8 @@ import type {ReactNode} from 'react';
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import useKeyboardState from '@hooks/useKeyboardState';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 type FixedFooterProps = {
@@ -13,8 +15,17 @@ type FixedFooterProps = {
 };
 
 function FixedFooter({style, children}: FixedFooterProps) {
+    const {isKeyboardShown} = useKeyboardState();
+    const insets = useSafeAreaInsets();
     const styles = useThemeStyles();
-    return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, style]}>{children}</View>;
+
+    if (!children) {
+        return null;
+    }
+
+    const shouldAddBottomPadding = isKeyboardShown || !insets.bottom;
+
+    return <View style={[styles.ph5, shouldAddBottomPadding && styles.pb5, styles.flexShrink0, style]}>{children}</View>;
 }
 
 FixedFooter.displayName = 'FixedFooter';

src/components/FormAlertWithSubmitButton.tsx

@@ -79,7 +79,7 @@ function FormAlertWithSubmitButton({
 
     return (
         <FormAlertWrapper
-            containerStyles={[styles.mh5, styles.mb5, styles.justifyContentEnd, containerStyles]}
+            containerStyles={[styles.justifyContentEnd, containerStyles]}
             isAlertVisible={isAlertVisible}
             isMessageHtml={isMessageHtml}
             message={message}

src/components/OnyxProvider.tsx

@@ -16,6 +16,7 @@ const [withPreferredTheme, PreferredThemeProvider, PreferredThemeContext] = crea
 const [withFrequentlyUsedEmojis, FrequentlyUsedEmojisProvider, , useFrequentlyUsedEmojis] = createOnyxContext(ONYXKEYS.FREQUENTLY_USED_EMOJIS);
 const [withPreferredEmojiSkinTone, PreferredEmojiSkinToneProvider, PreferredEmojiSkinToneContext] = createOnyxContext(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE);
 const [, SessionProvider, , useSession] = createOnyxContext(ONYXKEYS.SESSION);
+const [, AccountProvider, , useAccount] = createOnyxContext(ONYXKEYS.ACCOUNT);
 
 type OnyxProviderProps = {
     /** Rendered child component */
@@ -37,6 +38,7 @@ function OnyxProvider(props: OnyxProviderProps) {
                 FrequentlyUsedEmojisProvider,
                 PreferredEmojiSkinToneProvider,
                 SessionProvider,
+                AccountProvider,
             ]}
         >
             {props.children}
@@ -69,4 +71,5 @@ export {
     useBlockedFromConcierge,
     useReportActionsDrafts,
     useSession,
+    useAccount,
 };

src/components/ReferralProgramCTA.tsx

@@ -1,43 +1,49 @@
-import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import React, {useEffect} from 'react';
+import type {ViewStyle} from 'react-native';
+import useDismissedReferralBanners from '@hooks/useDismissedReferralBanners';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import Navigation from '@src/libs/Navigation/Navigation';
-import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type * as OnyxTypes from '@src/types/onyx';
 import Icon from './Icon';
 import {Close} from './Icon/Expensicons';
 import {PressableWithoutFeedback} from './Pressable';
 import Text from './Text';
 import Tooltip from './Tooltip';
 
-type ReferralProgramCTAOnyxProps = {
-    dismissedReferralBanners: OnyxEntry<OnyxTypes.DismissedReferralBanners>;
-};
-
-type ReferralProgramCTAProps = ReferralProgramCTAOnyxProps & {
+type ReferralProgramCTAProps = {
     referralContentType:
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST
         | 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;
+    onDismiss?: () => void;
 };
 
-function ReferralProgramCTA({referralContentType, dismissedReferralBanners}: ReferralProgramCTAProps) {
+function ReferralProgramCTA({referralContentType, style, onDismiss}: ReferralProgramCTAProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
+    const {isDismissed, setAsDismissed} = useDismissedReferralBanners({referralContentType});
 
     const handleDismissCallToAction = () => {
-        User.dismissReferralBanner(referralContentType);
+        setAsDismissed();
+        onDismiss?.();
     };
 
-    if (!referralContentType || dismissedReferralBanners?.[referralContentType]) {
+    const shouldShowBanner = referralContentType && !isDismissed;
+
+    useEffect(() => {
+        if (shouldShowBanner) {
+            return;
+        }
+        onDismiss?.();
+    }, [onDismiss, shouldShowBanner]);
+
+    if (!shouldShowBanner) {
         return null;
     }
 
@@ -46,7 +52,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}
         >
@@ -81,8 +87,4 @@ function ReferralProgramCTA({referralContentType, dismissedReferralBanners}: Ref
     );
 }
 
-export default withOnyx<ReferralProgramCTAProps, ReferralProgramCTAOnyxProps>({
-    dismissedReferralBanners: {
-        key: ONYXKEYS.NVP_DISMISSED_REFERRAL_BANNERS,
-    },
-})(ReferralProgramCTA);
+export default ReferralProgramCTA;

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,4 +286,5 @@ function ScreenWrapper(
 ScreenWrapper.displayName = 'ScreenWrapper';
 
 export default withNavigationFallback(forwardRef(ScreenWrapper));
+export {ScreenWrapperStatusContext};
 export type {ScreenWrapperChildrenProps};

src/components/SelectionList/BaseSelectionList.tsx

@@ -17,6 +17,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useActiveElementRole from '@hooks/useActiveElementRole';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -56,7 +57,6 @@ function BaseSelectionList<TItem extends ListItem>(
         showConfirmButton = false,
         shouldPreventDefaultFocusOnSelectRow = false,
         containerStyle,
-        isKeyboardShown = false,
         disableKeyboardShortcuts = false,
         children,
         shouldStopPropagation = false,
@@ -88,6 +88,7 @@ function BaseSelectionList<TItem extends ListItem>(
     const isFocused = useIsFocused();
     const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
     const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true);
+    const {isKeyboardShown} = useKeyboardState();
     const [itemsToHighlight, setItemsToHighlight] = useState<Set<string> | null>(null);
     const itemFocusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const [currentPage, setCurrentPage] = useState(1);

src/components/SelectionList/types.ts

@@ -284,8 +284,8 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Styles to apply to SelectionList container */
     containerStyle?: StyleProp<ViewStyle>;
 
-    /** Whether keyboard is visible on the screen */
-    isKeyboardShown?: boolean;
+    /** Whether focus event should be delayed */
+    shouldDelayFocus?: boolean;
 
     /** Component to display on the right side of each child */
     rightHandSideComponent?: ((item: ListItem) => ReactElement<ListItem> | null) | ReactElement | null;

src/hooks/useDismissedReferralBanners.ts

@@ -0,0 +1,29 @@
+import {useOnyx} from 'react-native-onyx';
+import * as User from '@userActions/User';
+import type CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type UseDismissedReferralBannersProps = {
+    referralContentType:
+        | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST
+        | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT
+        | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY
+        | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND;
+};
+
+function useDismissedReferralBanners({referralContentType}: UseDismissedReferralBannersProps): {isDismissed: boolean; setAsDismissed: () => void} {
+    const [dismissedReferralBanners] = useOnyx(ONYXKEYS.NVP_DISMISSED_REFERRAL_BANNERS);
+    const isDismissed = dismissedReferralBanners?.[referralContentType] ?? false;
+
+    const setAsDismissed = () => {
+        if (!referralContentType) {
+            return;
+        }
+        // Set the banner as dismissed
+        User.dismissReferralBanner(referralContentType);
+    };
+
+    return {isDismissed, setAsDismissed};
+}
+
+export default useDismissedReferralBanners;

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/pages/RoomInvitePage.tsx

@@ -192,6 +192,7 @@ function RoomInvitePage({betas, report, policies}: RoomInvitePageProps) {
         <ScreenWrapper
             shouldEnableMaxHeight
             testID={RoomInvitePage.displayName}
+            includeSafeAreaPaddingBottom={false}
         >
             <FullPageNotFoundView
                 shouldShow={isEmptyObject(report)}

src/pages/SearchPage/SearchPageFooter.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {View} from 'react-native';
 import ReferralProgramCTA from '@components/ReferralProgramCTA';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -8,9 +7,10 @@ function SearchPageFooter() {
     const themeStyles = useThemeStyles();
 
     return (
-        <View style={[themeStyles.flexShrink0]}>
-            <ReferralProgramCTA referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND} />
-        </View>
+        <ReferralProgramCTA
+            referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}
+            style={themeStyles.flexShrink0}
+        />
     );
 }