Replace usages of isInModal and shouldShowSmallScreen props in components

src/hooks/useResponsiveLayout.ts

@@ -12,7 +12,7 @@ type ResponsiveLayoutResult = {
  */
 export default function useResponsiveLayout(): ResponsiveLayoutResult {
  const {isSmallScreenWidth} = useWindowDimensions();
- const state = navigationRef?.getRootState();
+ const state = navigationRef?.current?.getRootState?.();
  const lastRoute = state?.routes?.at(-1);
  const lastRouteName = lastRoute?.name;
  const isInModal = lastRouteName === NAVIGATORS.LEFT_MODAL_NAVIGATOR || lastRouteName === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;

src/pages/signin/LoginForm/BaseLoginForm.js

@@ -15,8 +15,8 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withToggleVisibilityView from '@components/withToggleVisibilityView';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
@@ -71,13 +71,8 @@ const propTypes = {
  /** Props to detect online status */
  network: networkPropTypes.isRequired,
 
- /** Whether or not the sign in page is being rendered in the RHP modal */
- isInModal: PropTypes.bool,
-
  isVisible: PropTypes.bool.isRequired,
 
- ...windowDimensionsPropTypes,
-
  ...withLocalizePropTypes,
 };
 
@@ -89,7 +84,6 @@ const defaultProps = {
  closeAccount: {},
  blurOnSubmit: false,
  innerRef: () => {},
- isInModal: false,
 };
 
 const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc();
@@ -103,6 +97,7 @@ function LoginForm(props) {
  const firstBlurred = useRef(false);
  const isFocused = useIsFocused();
  const isLoading = useRef(false);
+ const {shouldUseNarrowLayout, isInModal} = useResponsiveLayout();
 
  const {translate} = props;
 
@@ -162,7 +157,7 @@ function LoginForm(props) {
  );
 
  function getSignInWithStyles() {
- return props.isSmallScreenWidth ? [styles.mt1] : [styles.mt5, styles.mb5];
+ return shouldUseNarrowLayout ? [styles.mt1] : [styles.mt5, styles.mb5];
  }
 
  /**
@@ -216,7 +211,7 @@ function LoginForm(props) {
  return;
  }
  let focusTimeout;
- if (props.isInModal) {
+ if (isInModal) {
  focusTimeout = setTimeout(() => input.current.focus(), CONST.ANIMATED_TRANSITION);
  } else {
  input.current.focus();
@@ -345,7 +340,7 @@ function LoginForm(props) {
  {props.translate('common.signInWith')}
  </Text>
 
- <View style={props.isSmallScreenWidth ? styles.loginButtonRowSmallScreen : styles.loginButtonRow}>
+ <View style={shouldUseNarrowLayout ? styles.loginButtonRowSmallScreen : styles.loginButtonRow}>
  <View>
  <AppleSignIn />
  </View>
@@ -383,7 +378,6 @@ export default compose(
  credentials: {key: ONYXKEYS.CREDENTIALS},
  closeAccount: {key: ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM},
  }),
- withWindowDimensions,
  withLocalize,
  withToggleVisibilityView,
  withNetwork(),

src/pages/signin/SignInHeroImage.js

@@ -1,30 +1,22 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Lottie from '@components/Lottie';
 import LottieAnimations from '@components/LottieAnimations';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
 
-const propTypes = {
- ...windowDimensionsPropTypes,
-
- shouldShowSmallScreen: PropTypes.bool,
-};
-
-const defaultProps = {
- shouldShowSmallScreen: false,
-};
-
-function SignInHeroImage(props) {
+function SignInHeroImage() {
  const styles = useThemeStyles();
+ const {isMediumScreenWidth} = useWindowDimensions();
+ const {shouldUseNarrowLayout} = useResponsiveLayout();
  let imageSize;
- if (props.isSmallScreenWidth || props.shouldShowSmallScreen) {
+ if (shouldUseNarrowLayout) {
  imageSize = {
  height: variables.signInHeroImageMobileHeight,
  width: variables.signInHeroImageMobileWidth,
  };
- } else if (props.isMediumScreenWidth) {
+ } else if (isMediumScreenWidth) {
  imageSize = {
  height: variables.signInHeroImageTabletHeight,
  width: variables.signInHeroImageTabletWidth,
@@ -48,7 +40,5 @@ function SignInHeroImage(props) {
 }
 
 SignInHeroImage.displayName = 'SignInHeroImage';
-SignInHeroImage.propTypes = propTypes;
-SignInHeroImage.defaultProps = defaultProps;
 
-export default withWindowDimensions(SignInHeroImage);
+export default SignInHeroImage;

src/pages/signin/SignInModal.js

@@ -30,7 +30,7 @@ function SignInModal() {
  testID={SignInModal.displayName}
  >
  <HeaderWithBackButton onBackButtonPress={() => Navigation.goBack()} />
- <SignInPage isInModal />
+ <SignInPage />
  </ScreenWrapper>
  );
 }

src/pages/signin/SignInPage.js

@@ -9,10 +9,10 @@ import CustomStatusBarAndBackground from '@components/CustomStatusBarAndBackgrou
 import ThemeProvider from '@components/ThemeProvider';
 import ThemeStylesProvider from '@components/ThemeStylesProvider';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import * as Localize from '@libs/Localize';
 import Log from '@libs/Log';
@@ -72,17 +72,13 @@ const propTypes = {
  /** Active Clients connected to ONYX Database */
  activeClients: PropTypes.arrayOf(PropTypes.string),
 
- /** Whether or not the sign in page is being rendered in the RHP modal */
- isInModal: PropTypes.bool,
-
  /** The user's preferred locale */
  preferredLocale: PropTypes.string,
 };
 
 const defaultProps = {
  account: {},
  credentials: {},
- isInModal: false,
  activeClients: [],
  preferredLocale: '',
 };
@@ -133,12 +129,11 @@ function getRenderOptions({hasLogin, hasValidateCode, account, isPrimaryLogin, i
  };
 }
 
-function SignInPageInner({credentials, account, isInModal, activeClients, preferredLocale}) {
+function SignInPageInner({credentials, account, activeClients, preferredLocale}) {
  const styles = useThemeStyles();
  const StyleUtils = useStyleUtils();
  const {translate, formatPhoneNumber} = useLocalize();
- const {isSmallScreenWidth} = useWindowDimensions();
- const shouldShowSmallScreen = isSmallScreenWidth || isInModal;
+ const {shouldUseNarrowLayout} = useResponsiveLayout();
  const safeAreaInsets = useSafeAreaInsets();
  const signInPageLayoutRef = useRef();
  const loginFormRef = useRef();
@@ -212,32 +207,32 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
  welcomeHeader = translate('welcomeText.anotherLoginPageIsOpen');
  welcomeText = translate('welcomeText.anotherLoginPageIsOpenExplanation');
  } else if (shouldShowLoginForm) {
- welcomeHeader = isSmallScreenWidth ? headerText : translate('welcomeText.getStarted');
- welcomeText = isSmallScreenWidth ? translate('welcomeText.getStarted') : '';
+ welcomeHeader = shouldUseNarrowLayout ? headerText : translate('welcomeText.getStarted');
+ welcomeText = shouldUseNarrowLayout ? translate('welcomeText.getStarted') : '';
  } else if (shouldShowValidateCodeForm) {
  if (account.requiresTwoFactorAuth) {
  // We will only know this after a user signs in successfully, without their 2FA code
- welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack');
+ welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcomeBack');
  welcomeText = isUsingRecoveryCode ? translate('validateCodeForm.enterRecoveryCode') : translate('validateCodeForm.enterAuthenticatorCode');
  } else {
  const userLogin = Str.removeSMSDomain(credentials.login || '');
 
  // replacing spaces with "hard spaces" to prevent breaking the number
  const userLoginToDisplay = Str.isSMSLogin(userLogin) ? formatPhoneNumber(userLogin).replace(/ /g, '\u00A0') : userLogin;
  if (account.validated) {
- welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcomeBack');
- welcomeText = shouldShowSmallScreen
+ welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcomeBack');
+ welcomeText = shouldUseNarrowLayout
  ? `${translate('welcomeText.welcomeBack')} ${translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay})}`
  : translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay});
  } else {
- welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcome');
- welcomeText = shouldShowSmallScreen
+ welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcome');
+ welcomeText = shouldUseNarrowLayout
  ? `${translate('welcomeText.welcome')} ${translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay})}`
  : translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay});
  }
  }
  } else if (shouldShowUnlinkLoginForm || shouldShowEmailDeliveryFailurePage || shouldShowChooseSSOOrMagicCode) {
- welcomeHeader = shouldShowSmallScreen ? headerText : translate('welcomeText.welcomeBack');
+ welcomeHeader = shouldUseNarrowLayout ? headerText : translate('welcomeText.welcomeBack');
 
  // Don't show any welcome text if we're showing the user the email delivery failed view
  if (shouldShowEmailDeliveryFailurePage || shouldShowChooseSSOOrMagicCode) {
@@ -256,23 +251,21 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
  // Bottom SafeAreaView is removed so that login screen svg displays correctly on mobile.
  // The SVG should flow under the Home Indicator on iOS.
  <View
- style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: isInModal ? 0 : safeAreaInsets.top}, 1)]}
+ style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: shouldUseNarrowLayout ? 0 : safeAreaInsets.top}, 1)]}
  testID={SignInPageInner.displayName}
  >
  <SignInPageLayout
  welcomeHeader={welcomeHeader}
  welcomeText={welcomeText}
- shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth || !isInModal}
+ shouldShowWelcomeHeader={shouldShowWelcomeHeader || !shouldUseNarrowLayout}
  shouldShowWelcomeText={shouldShowWelcomeText}
  ref={signInPageLayoutRef}
- shouldShowSmallScreen={shouldShowSmallScreen}
  navigateFocus={navigateFocus}
  >
  {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden
  so that password managers can access the values. Conditionally rendering this component will break this feature. */}
  <LoginForm
  ref={loginFormRef}
- isInModal={isInModal}
  isVisible={shouldShowLoginForm}
  blurOnSubmit={account.validated === false}
  scrollPageToTop={signInPageLayoutRef.current && signInPageLayoutRef.current.scrollPageToTop}

src/pages/signin/SignInPageLayout/Footer.js

@@ -9,6 +9,7 @@ import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -20,11 +21,6 @@ import CONST from '@src/CONST';
 const propTypes = {
  ...withLocalizePropTypes,
  navigateFocus: PropTypes.func.isRequired,
- shouldShowSmallScreen: PropTypes.bool,
-};
-
-const defaultProps = {
- shouldShowSmallScreen: false,
 };
 
 const columns = ({navigateFocus}) => [
@@ -142,7 +138,8 @@ function Footer(props) {
  const theme = useTheme();
  const styles = useThemeStyles();
  const StyleUtils = useStyleUtils();
- const isVertical = props.shouldShowSmallScreen;
+ const {shouldUseNarrowLayout} = useResponsiveLayout();
+ const isVertical = shouldUseNarrowLayout;
  const imageDirection = isVertical ? styles.flexRow : styles.flexColumn;
  const imageStyle = isVertical ? styles.pr0 : styles.alignSelfCenter;
  const columnDirection = isVertical ? styles.flexColumn : styles.flexRow;
@@ -219,6 +216,5 @@ function Footer(props) {
 
 Footer.propTypes = propTypes;
 Footer.displayName = 'Footer';
-Footer.defaultProps = defaultProps;
 
 export default withLocalize(Footer);

src/pages/signin/SignInPageLayout/SignInPageContent.js

@@ -7,9 +7,9 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import SignInPageForm from '@components/SignInPageForm';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInHeroImage from '@pages/signin/SignInHeroImage';
 import variables from '@styles/variables';
@@ -32,25 +32,22 @@ const propTypes = {
  /** Whether to show welcome header on a particular page */
  shouldShowWelcomeHeader: PropTypes.bool.isRequired,
 
- /** Whether to show signIn hero image on a particular page */
- shouldShowSmallScreen: PropTypes.bool.isRequired,
-
  ...withLocalizePropTypes,
 };
 
 function SignInPageContent(props) {
- const {isSmallScreenWidth} = useWindowDimensions();
+ const {shouldUseNarrowLayout} = useResponsiveLayout();
  const styles = useThemeStyles();
  const StyleUtils = useStyleUtils();
 
  return (
  <View style={[styles.flex1, styles.signInPageLeftContainer]}>
  <View style={[styles.flex1, styles.alignSelfCenter, styles.signInPageWelcomeFormContainer]}>
  {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */}
- <View style={[styles.flexGrow1, isSmallScreenWidth ? styles.signInPageContentTopSpacerSmallScreens : styles.signInPageContentTopSpacer]} />
+ <View style={[styles.flexGrow1, shouldUseNarrowLayout ? styles.signInPageContentTopSpacerSmallScreens : styles.signInPageContentTopSpacer]} />
  <View style={[styles.flexGrow2, styles.mb8]}>
  <SignInPageForm style={[styles.alignSelfStretch]}>
- <View style={[isSmallScreenWidth ? styles.mb8 : styles.mb15, isSmallScreenWidth ? styles.alignItemsCenter : styles.alignSelfStart]}>
+ <View style={[shouldUseNarrowLayout ? styles.mb8 : styles.mb15, shouldUseNarrowLayout ? styles.alignItemsCenter : styles.alignSelfStart]}>
  <ExpensifyWordmark />
  </View>
  <View style={[styles.signInPageWelcomeTextContainer]}>
@@ -61,25 +58,25 @@ function SignInPageContent(props) {
  StyleUtils.getLineHeightStyle(variables.lineHeightSignInHeroXSmall),
  StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroXSmall),
  !props.welcomeText ? styles.mb5 : {},
- !isSmallScreenWidth ? styles.textAlignLeft : {},
+ !shouldUseNarrowLayout ? styles.textAlignLeft : {},
  styles.mb5,
  ]}
  >
  {props.welcomeHeader}
  </Text>
  ) : null}
  {props.shouldShowWelcomeText && props.welcomeText ? (
- <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{props.welcomeText}</Text>
+ <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !shouldUseNarrowLayout ? styles.textAlignLeft : {}]}>{props.welcomeText}</Text>
  ) : null}
  </View>
  {props.children}
  </SignInPageForm>
  <View style={[styles.mb8, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
  <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
  </View>
- {props.shouldShowSmallScreen ? (
+ {shouldUseNarrowLayout ? (
  <View style={[styles.mt8]}>
- <SignInHeroImage shouldShowSmallScreen />
+ <SignInHeroImage />
  </View>
  ) : null}
  </View>