From 1b22f59fd874fcc4297ee8f4350ae34d02f74aeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Wed, 22 Nov 2023 17:13:22 +0100 Subject: [PATCH 1/7] refactorign/theme switching --- src/components/GrowlNotification/index.js | 36 ++++++++++--------- src/components/ScreenWrapper/index.js | 7 ++-- .../Navigation/AppNavigator/AuthScreens.js | 2 +- .../BaseCentralPaneNavigator.js | 3 +- .../Navigators/RightModalNavigator.js | 2 +- .../AppNavigator/RHPScreenOptions.js | 11 ++++-- .../getRootNavigatorScreenOptions.js | 3 +- src/libs/Navigation/NavigationRoot.js | 29 +++++++-------- src/pages/signin/SignInPageLayout/index.js | 2 +- .../signInPageStyles/index.js | 4 +-- .../signInPageStyles/index.native.js | 4 +-- src/pages/signin/Terms.js | 7 ++-- src/styles/styles.ts | 4 ++- 13 files changed, 61 insertions(+), 53 deletions(-) diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index 5fdbe205f87b..86850a8af96d 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.js @@ -7,26 +7,11 @@ import * as Pressables from '@components/Pressable'; import Text from '@components/Text'; import * as Growl from '@libs/Growl'; import useNativeDriver from '@libs/useNativeDriver'; -import styles from '@styles/styles'; -import themeColors from '@styles/themes/default'; +import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import GrowlNotificationContainer from './GrowlNotificationContainer'; -const types = { - [CONST.GROWL.SUCCESS]: { - icon: Expensicons.Checkmark, - iconColor: themeColors.success, - }, - [CONST.GROWL.ERROR]: { - icon: Expensicons.Exclamation, - iconColor: themeColors.danger, - }, - [CONST.GROWL.WARNING]: { - icon: Expensicons.Exclamation, - iconColor: themeColors.warning, - }, -}; - const INACTIVE_POSITION_Y = -255; const PressableWithoutFeedback = Pressables.PressableWithoutFeedback; @@ -36,6 +21,23 @@ function GrowlNotification(_, ref) { const [bodyText, setBodyText] = useState(''); const [type, setType] = useState('success'); const [duration, setDuration] = useState(); + const styles = useThemeStyles(); + const theme = useTheme(); + + const types = { + [CONST.GROWL.SUCCESS]: { + icon: Expensicons.Checkmark, + iconColor: theme.success, + }, + [CONST.GROWL.ERROR]: { + icon: Expensicons.Exclamation, + iconColor: theme.danger, + }, + [CONST.GROWL.WARNING]: { + icon: Expensicons.Exclamation, + iconColor: theme.warning, + }, + }; /** * Show the growl notification diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index 01c28b3b8463..338b246b1d34 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -17,7 +17,7 @@ import useKeyboardState from '@hooks/useKeyboardState'; import useNetwork from '@hooks/useNetwork'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import toggleTestToolsModal from '@userActions/TestTool'; import CONST from '@src/CONST'; import {defaultProps, propTypes} from './propTypes'; @@ -47,6 +47,7 @@ const ScreenWrapper = React.forwardRef( ) => { const {windowHeight, isSmallScreenWidth} = useWindowDimensions(); const {initialHeight} = useInitialDimensions(); + const styles = useThemeStyles(); const keyboardState = useKeyboardState(); const {isDevelopment} = useEnvironment(); const {isOffline} = useNetwork(); @@ -63,14 +64,14 @@ const ScreenWrapper = React.forwardRef( const panResponder = useRef( PanResponder.create({ - onStartShouldSetPanResponderCapture: (e, gestureState) => gestureState.numberActiveTouches === CONST.TEST_TOOL.NUMBER_OF_TAPS, + onStartShouldSetPanResponderCapture: (_e, gestureState) => gestureState.numberActiveTouches === CONST.TEST_TOOL.NUMBER_OF_TAPS, onPanResponderRelease: toggleTestToolsModal, }), ).current; const keyboardDissmissPanResponder = useRef( PanResponder.create({ - onMoveShouldSetPanResponderCapture: (e, gestureState) => { + onMoveShouldSetPanResponderCapture: (_e, gestureState) => { const isHorizontalSwipe = Math.abs(gestureState.dx) > Math.abs(gestureState.dy); const shouldDismissKeyboard = shouldDismissKeyboardBeforeClose && isKeyboardShown && Browser.isMobile(); diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index aedb2fa8d741..4c610bc12099 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -144,7 +144,7 @@ const defaultProps = { function AuthScreens({isUsingMemoryOnlyKeys, lastUpdateIDAppliedToClient, session, lastOpenedPublicRoomID, demoInfo}) { const styles = useThemeStyles(); const {isSmallScreenWidth} = useWindowDimensions(); - const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth); + const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles); const isInitialRender = useRef(true); if (isInitialRender.current) { diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js index a1646011e560..d23b03c8c73e 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js @@ -2,7 +2,7 @@ import {createStackNavigator} from '@react-navigation/stack'; import React from 'react'; import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper'; import getCurrentUrl from '@libs/Navigation/currentUrl'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import SCREENS from '@src/SCREENS'; const Stack = createStackNavigator(); @@ -11,6 +11,7 @@ const url = getCurrentUrl(); const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; function BaseCentralPaneNavigator() { + const styles = useThemeStyles(); return ( {!isSmallScreenWidth && } - + ({ headerShown: false, animationEnabled: true, gestureDirection: 'horizontal', cardStyle: styles.navigationScreenCardStyle, cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, -}; +}); export default RHPScreenOptions; diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js index 04784fb9d0e1..44fa7b6c0b09 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js @@ -1,5 +1,4 @@ import getNavigationModalCardStyle from '@styles/getNavigationModalCardStyles'; -import styles from '@styles/styles'; import variables from '@styles/variables'; import CONFIG from '@src/CONFIG'; import modalCardStyleInterpolator from './modalCardStyleInterpolator'; @@ -12,7 +11,7 @@ const commonScreenOptions = { animationTypeForReplace: 'push', }; -export default (isSmallScreenWidth) => ({ +export default (isSmallScreenWidth, styles) => ({ rightModalNavigator: { ...commonScreenOptions, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js index 2373066cf4bd..e2dac178440f 100644 --- a/src/libs/Navigation/NavigationRoot.js +++ b/src/libs/Navigation/NavigationRoot.js @@ -7,20 +7,11 @@ import useFlipper from '@hooks/useFlipper'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Log from '@libs/Log'; import StatusBar from '@libs/StatusBar'; -import themeColors from '@styles/themes/default'; +import useTheme from '@styles/themes/useTheme'; import AppNavigator from './AppNavigator'; import linkingConfig from './linkingConfig'; import Navigation, {navigationRef} from './Navigation'; -// https://reactnavigation.org/docs/themes -const navigationTheme = { - ...DefaultTheme, - colors: { - ...DefaultTheme.colors, - background: themeColors.appBG, - }, -}; - const propTypes = { /** Whether the current user is logged in with an authToken */ authenticated: PropTypes.bool.isRequired, @@ -51,6 +42,7 @@ function parseAndLogRoute(state) { } function NavigationRoot(props) { + const theme = useTheme(); useFlipper(navigationRef); const firstRenderRef = useRef(true); @@ -79,10 +71,19 @@ function NavigationRoot(props) { navigationRef.resetRoot(navigationRef.getRootState()); }, [isSmallScreenWidth, props.authenticated]); - const prevStatusBarBackgroundColor = useRef(themeColors.appBG); - const statusBarBackgroundColor = useRef(themeColors.appBG); + const prevStatusBarBackgroundColor = useRef(theme.appBG); + const statusBarBackgroundColor = useRef(theme.appBG); const statusBarAnimation = useSharedValue(0); + // https://reactnavigation.org/docs/themes + const navigationTheme = { + ...DefaultTheme, + colors: { + ...DefaultTheme.colors, + background: theme.appBG, + }, + }; + const updateStatusBarBackgroundColor = (color) => StatusBar.setBackgroundColor(color); useAnimatedReaction( () => statusBarAnimation.value, @@ -99,12 +100,12 @@ function NavigationRoot(props) { const animateStatusBarBackgroundColor = () => { const currentRoute = navigationRef.getCurrentRoute(); - const currentScreenBackgroundColor = (currentRoute.params && currentRoute.params.backgroundColor) || themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG; + const currentScreenBackgroundColor = (currentRoute.params && currentRoute.params.backgroundColor) || theme.PAGE_BACKGROUND_COLORS[currentRoute.name] || theme.appBG; prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current; statusBarBackgroundColor.current = currentScreenBackgroundColor; - if (currentScreenBackgroundColor === themeColors.appBG && prevStatusBarBackgroundColor.current === themeColors.appBG) { + if (currentScreenBackgroundColor === theme.appBG && prevStatusBarBackgroundColor.current === theme.appBG) { return; } diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index 1b5ac55c9da2..b02d48ab5be9 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -152,7 +152,7 @@ function SignInPageLayout(props) { ) : ( diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js index b058c78aca86..ac9b7b66851a 100644 --- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js +++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js @@ -1,6 +1,4 @@ -import styles from '@styles/styles'; - // On web, we can use flex to fit the content to fit the viewport within a ScrollView. -const scrollViewContentContainerStyles = styles.flex1; +const scrollViewContentContainerStyles = (styles) => styles.flex1; export default scrollViewContentContainerStyles; diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js index 76f847f638b9..1c474ab6c722 100644 --- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js +++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js @@ -1,7 +1,5 @@ -import styles from '@styles/styles'; - // Using flexGrow on mobile allows the ScrollView container to grow to fit the content. // This is necessary because making the sign-in content fit exactly the viewheight causes the scroll to stop working on mobile. -const scrollViewContentContainerStyles = styles.flexGrow1; +const scrollViewContentContainerStyles = (styles) => styles.flexGrow1; export default scrollViewContentContainerStyles; diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js index 13af9829305d..939b3d346e83 100644 --- a/src/pages/signin/Terms.js +++ b/src/pages/signin/Terms.js @@ -2,12 +2,13 @@ import React from 'react'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; -const linkStyles = [styles.textExtraSmallSupporting, styles.link]; - function Terms(props) { + const styles = useThemeStyles(); + const linkStyles = [styles.textExtraSmallSupporting, styles.link]; + return ( {props.translate('termsOfUse.phrase1')} diff --git a/src/styles/styles.ts b/src/styles/styles.ts index e597f0ec874e..12c1885463b7 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3985,5 +3985,7 @@ const styles = (theme: ThemeColors) => const stylesGenerator = styles; const defaultStyles = styles(defaultTheme); +type ThemeStyle = typeof defaultStyles; + export default defaultStyles; -export {stylesGenerator, type Styles}; +export {stylesGenerator, type Styles, type ThemeStyle}; From 8004be7475ac0c8e7e5eff39f825de5ec864c009 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Fri, 24 Nov 2023 13:33:03 +0100 Subject: [PATCH 2/7] fix/memoized navigationTheme --- src/libs/Navigation/NavigationRoot.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js index e2dac178440f..67fe495f9b40 100644 --- a/src/libs/Navigation/NavigationRoot.js +++ b/src/libs/Navigation/NavigationRoot.js @@ -1,6 +1,6 @@ import {DefaultTheme, getPathFromState, NavigationContainer} from '@react-navigation/native'; import PropTypes from 'prop-types'; -import React, {useEffect, useRef} from 'react'; +import React, {useEffect, useMemo, useRef} from 'react'; import {Easing, interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated'; import useCurrentReportID from '@hooks/useCurrentReportID'; import useFlipper from '@hooks/useFlipper'; @@ -76,13 +76,16 @@ function NavigationRoot(props) { const statusBarAnimation = useSharedValue(0); // https://reactnavigation.org/docs/themes - const navigationTheme = { - ...DefaultTheme, - colors: { - ...DefaultTheme.colors, - background: theme.appBG, - }, - }; + const navigationTheme = useMemo( + () => ({ + ...DefaultTheme, + colors: { + ...DefaultTheme.colors, + background: theme.appBG, + }, + }), + [theme], + ); const updateStatusBarBackgroundColor = (color) => StatusBar.setBackgroundColor(color); useAnimatedReaction( From 9941bb70fda110a8cd9ac132af475cf526d2d575 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Tue, 28 Nov 2023 14:12:28 +0100 Subject: [PATCH 3/7] added ModalStackNavigator --- .../AppNavigator/ModalStackNavigators.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 01573cb434b4..26bb5098cde6 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -1,15 +1,9 @@ import {CardStyleInterpolators, createStackNavigator} from '@react-navigation/stack'; import React from 'react'; import _ from 'underscore'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import SCREENS from '@src/SCREENS'; -const defaultSubRouteOptions = { - cardStyle: styles.navigationScreenCardStyle, - headerShown: false, - cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, -}; - /** * Create a modal stack navigator with an array of sub-screens. * @@ -20,6 +14,14 @@ function createModalStackNavigator(screens) { const ModalStackNavigator = createStackNavigator(); function ModalStack() { + const styles = useThemeStyles(); + + const defaultSubRouteOptions = { + cardStyle: styles.navigationScreenCardStyle, + headerShown: false, + cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, + }; + return ( {_.map(screens, (getComponent, name) => ( From fce17cdcf61daffcbf73176c3b8905d92a28ef48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Tue, 28 Nov 2023 17:06:49 +0100 Subject: [PATCH 4/7] great memoization --- .../AppNavigator/Navigators/RightModalNavigator.js | 5 +++-- src/pages/signin/SignInPageLayout/index.js | 6 ++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js index 56c690882ad2..c5786a0fcfe4 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js @@ -1,6 +1,6 @@ import {createStackNavigator} from '@react-navigation/stack'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -21,12 +21,13 @@ const propTypes = { function RightModalNavigator(props) { const styles = useThemeStyles(); const {isSmallScreenWidth} = useWindowDimensions(); + const screenOptions = useMemo(() => RHPScreenOptions(styles), [styles]); return ( {!isSmallScreenWidth && } - + scrollViewContentContainerStyles(styles), [styles]); + return ( {!props.shouldShowSmallScreen ? ( @@ -152,7 +154,7 @@ function SignInPageLayout(props) { ) : ( From a898ce01e3fed5b987c794fd2aef7e1c92311d87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Wed, 29 Nov 2023 13:04:50 +0100 Subject: [PATCH 5/7] navigation root fix --- src/libs/Navigation/NavigationRoot.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx index 6c3d30806b57..93cadc453736 100644 --- a/src/libs/Navigation/NavigationRoot.tsx +++ b/src/libs/Navigation/NavigationRoot.tsx @@ -1,5 +1,5 @@ import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} from '@react-navigation/native'; -import React, {useEffect, useRef} from 'react'; +import React, {useEffect, useMemo, useRef} from 'react'; import {ColorValue} from 'react-native'; import {interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated'; import useCurrentReportID from '@hooks/useCurrentReportID'; @@ -12,7 +12,7 @@ import AppNavigator from './AppNavigator'; import linkingConfig from './linkingConfig'; import Navigation, {navigationRef} from './Navigation'; -const propTypes = { +type NavigationRootProps = { /** Whether the current user is logged in with an authToken */ authenticated: boolean; @@ -42,11 +42,24 @@ function parseAndLogRoute(state: NavigationState) { function NavigationRoot({authenticated, onReady}: NavigationRootProps) { useFlipper(navigationRef); + const theme = useTheme(); const firstRenderRef = useRef(true); const currentReportIDValue = useCurrentReportID(); const {isSmallScreenWidth} = useWindowDimensions(); + // https://reactnavigation.org/docs/themes + const navigationTheme = useMemo( + () => ({ + ...DefaultTheme, + colors: { + ...DefaultTheme.colors, + background: theme.appBG, + }, + }), + [theme], + ); + useEffect(() => { if (firstRenderRef.current) { // we don't want to make the report back button go back to LHN if the user @@ -92,7 +105,7 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) { const backgroundColorFromRoute = currentRoute?.params && 'backgroundColor' in currentRoute.params && typeof currentRoute.params.backgroundColor === 'string' && currentRoute.params.backgroundColor; - const backgroundColorFallback = themeColors.PAGE_BACKGROUND_COLORS[currentRoute?.name as keyof typeof themeColors.PAGE_BACKGROUND_COLORS] || themeColors.appBG; + const backgroundColorFallback = theme.PAGE_BACKGROUND_COLORS[currentRoute?.name!] || theme.appBG; // It's possible for backgroundColorFromRoute to be empty string, so we must use "||" to fallback to backgroundColorFallback. // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing From f5d38a51c46e9034e737544924755395c4a57f8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Wed, 29 Nov 2023 13:17:46 +0100 Subject: [PATCH 6/7] more memoization --- .../AppNavigator/ModalStackNavigators.js | 15 +++++++++------ src/pages/signin/Terms.js | 12 +++++++++--- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 26bb5098cde6..be803e62a98b 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -1,5 +1,5 @@ import {CardStyleInterpolators, createStackNavigator} from '@react-navigation/stack'; -import React from 'react'; +import React, {useMemo} from 'react'; import _ from 'underscore'; import useThemeStyles from '@styles/useThemeStyles'; import SCREENS from '@src/SCREENS'; @@ -16,11 +16,14 @@ function createModalStackNavigator(screens) { function ModalStack() { const styles = useThemeStyles(); - const defaultSubRouteOptions = { - cardStyle: styles.navigationScreenCardStyle, - headerShown: false, - cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, - }; + const defaultSubRouteOptions = useMemo( + () => ({ + cardStyle: styles.navigationScreenCardStyle, + headerShown: false, + cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, + }), + [styles], + ); return ( diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js index 939b3d346e83..44e024208fc8 100644 --- a/src/pages/signin/Terms.js +++ b/src/pages/signin/Terms.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; @@ -7,10 +7,16 @@ import CONST from '@src/CONST'; function Terms(props) { const styles = useThemeStyles(); - const linkStyles = [styles.textExtraSmallSupporting, styles.link]; + const [linkStyles, containerStyles] = useMemo( + () => [ + [styles.textExtraSmallSupporting, styles.link], + [styles.textExtraSmallSupporting, styles.mb4], + ], + [styles], + ); return ( - + {props.translate('termsOfUse.phrase1')} Date: Wed, 29 Nov 2023 13:21:03 +0100 Subject: [PATCH 7/7] linting --- src/libs/Navigation/NavigationRoot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx index 93cadc453736..cbb2e62161f3 100644 --- a/src/libs/Navigation/NavigationRoot.tsx +++ b/src/libs/Navigation/NavigationRoot.tsx @@ -105,7 +105,7 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) { const backgroundColorFromRoute = currentRoute?.params && 'backgroundColor' in currentRoute.params && typeof currentRoute.params.backgroundColor === 'string' && currentRoute.params.backgroundColor; - const backgroundColorFallback = theme.PAGE_BACKGROUND_COLORS[currentRoute?.name!] || theme.appBG; + const backgroundColorFallback = currentRoute?.name ? theme.PAGE_BACKGROUND_COLORS[currentRoute.name] || theme.appBG : theme.appBG; // It's possible for backgroundColorFromRoute to be empty string, so we must use "||" to fallback to backgroundColorFallback. // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing