fix: The continue button has some extra bottom padding

src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

@@ -1,16 +1,18 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import OfflineIndicator from '@components/OfflineIndicator';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -23,21 +25,18 @@ import * as OnboardingFlow from '@userActions/Welcome/OnboardingFlow';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/DisplayNameForm';
-import type {BaseOnboardingPersonalDetailsOnyxProps, BaseOnboardingPersonalDetailsProps} from './types';
-
-function BaseOnboardingPersonalDetails({
-    currentUserPersonalDetails,
-    shouldUseNativeStyles,
-    onboardingPurposeSelected,
-    onboardingAdminsChatReportID,
-    onboardingPolicyID,
-    route,
-}: BaseOnboardingPersonalDetailsProps) {
+import type {BaseOnboardingPersonalDetailsProps} from './types';
+
+function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNativeStyles, route}: BaseOnboardingPersonalDetailsProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
+    const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED);
+    const [onboardingAdminsChatReportID] = useOnyx(ONYXKEYS.ONBOARDING_ADMINS_CHAT_REPORT_ID);
+    const [onboardingPolicyID] = useOnyx(ONYXKEYS.ONBOARDING_POLICY_ID);
+    const {shouldUseNarrowLayout, isSmallScreenWidth, onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
     const {inputCallbackRef} = useAutoFocusInput();
     const [shouldValidateOnChange, setShouldValidateOnChange] = useState(false);
+    const {isOffline} = useNetwork();
 
     useEffect(() => {
         Welcome.setOnboardingErrorMessage('');
@@ -114,8 +113,9 @@ function BaseOnboardingPersonalDetails({
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            shouldShowOfflineIndicator={false}
+            includeSafeAreaPaddingBottom={isOffline}
             testID="BaseOnboardingPersonalDetails"
             style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
         >
@@ -169,22 +169,11 @@ function BaseOnboardingPersonalDetails({
                     />
                 </View>
             </FormProvider>
+            {isSmallScreenWidth && <OfflineIndicator />}
         </ScreenWrapper>
     );
 }
 
 BaseOnboardingPersonalDetails.displayName = 'BaseOnboardingPersonalDetails';
 
-export default withCurrentUserPersonalDetails(
-    withOnyx<BaseOnboardingPersonalDetailsProps, BaseOnboardingPersonalDetailsOnyxProps>({
-        onboardingPurposeSelected: {
-            key: ONYXKEYS.ONBOARDING_PURPOSE_SELECTED,
-        },
-        onboardingAdminsChatReportID: {
-            key: ONYXKEYS.ONBOARDING_ADMINS_CHAT_REPORT_ID,
-        },
-        onboardingPolicyID: {
-            key: ONYXKEYS.ONBOARDING_POLICY_ID,
-        },
-    })(BaseOnboardingPersonalDetails),
-);
+export default withCurrentUserPersonalDetails(BaseOnboardingPersonalDetails);

src/pages/OnboardingPersonalDetails/types.ts

@@ -1,30 +1,16 @@
 import type {RouteProp} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import type {OnyxEntry} from 'react-native-onyx';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types';
-import type {OnboardingPurposeType} from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
 
 type OnboardingPersonalDetailsProps = Record<string, unknown> & StackScreenProps<OnboardingModalNavigatorParamList, typeof SCREENS.ONBOARDING.PERSONAL_DETAILS>;
 
-type BaseOnboardingPersonalDetailsOnyxProps = {
-    /** Saved onboarding purpose selected by the user */
-    onboardingPurposeSelected: OnyxEntry<OnboardingPurposeType>;
+type BaseOnboardingPersonalDetailsProps = WithCurrentUserPersonalDetailsProps & {
+    /* Whether to use native styles tailored for native devices */
+    shouldUseNativeStyles: boolean;
 
-    /** Saved onboarding admin chat report ID */
-    onboardingAdminsChatReportID: OnyxEntry<string>;
-
-    /** Saved onboarding policy ID */
-    onboardingPolicyID: OnyxEntry<string>;
+    route: RouteProp<OnboardingModalNavigatorParamList, typeof SCREENS.ONBOARDING.PERSONAL_DETAILS>;
 };
 
-type BaseOnboardingPersonalDetailsProps = WithCurrentUserPersonalDetailsProps &
-    BaseOnboardingPersonalDetailsOnyxProps & {
-        /* Whether to use native styles tailored for native devices */
-        shouldUseNativeStyles: boolean;
-
-        route: RouteProp<OnboardingModalNavigatorParamList, typeof SCREENS.ONBOARDING.PERSONAL_DETAILS>;
-    };
-
-export type {OnboardingPersonalDetailsProps, BaseOnboardingPersonalDetailsOnyxProps, BaseOnboardingPersonalDetailsProps};
+export type {OnboardingPersonalDetailsProps, BaseOnboardingPersonalDetailsProps};

src/pages/OnboardingWork/BaseOnboardingWork.tsx

@@ -1,15 +1,17 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import OfflineIndicator from '@components/OfflineIndicator';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -22,13 +24,16 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import INPUT_IDS from '@src/types/form/WorkForm';
-import type {BaseOnboardingWorkOnyxProps, BaseOnboardingWorkProps} from './types';
+import type {BaseOnboardingWorkProps} from './types';
 
-function BaseOnboardingWork({shouldUseNativeStyles, onboardingPurposeSelected, onboardingPolicyID, route}: BaseOnboardingWorkProps) {
+function BaseOnboardingWork({shouldUseNativeStyles, route}: BaseOnboardingWorkProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
+    const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED);
+    const [onboardingPolicyID] = useOnyx(ONYXKEYS.ONBOARDING_POLICY_ID);
+    const {isSmallScreenWidth, onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
     const {inputCallbackRef} = useAutoFocusInput();
+    const {isOffline} = useNetwork();
 
     const completeEngagement = useCallback(
         (values: FormOnyxValues<'onboardingWorkForm'>) => {
@@ -66,9 +71,10 @@ function BaseOnboardingWork({shouldUseNativeStyles, onboardingPurposeSelected, o
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             shouldEnableKeyboardAvoidingView
+            shouldShowOfflineIndicator={false}
+            includeSafeAreaPaddingBottom={isOffline}
             testID="BaseOnboardingWork"
             style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
         >
@@ -107,17 +113,11 @@ function BaseOnboardingWork({shouldUseNativeStyles, onboardingPurposeSelected, o
                     />
                 </View>
             </FormProvider>
+            {isSmallScreenWidth && <OfflineIndicator />}
         </ScreenWrapper>
     );
 }
 
 BaseOnboardingWork.displayName = 'BaseOnboardingWork';
 
-export default withOnyx<BaseOnboardingWorkProps, BaseOnboardingWorkOnyxProps>({
-    onboardingPurposeSelected: {
-        key: ONYXKEYS.ONBOARDING_PURPOSE_SELECTED,
-    },
-    onboardingPolicyID: {
-        key: ONYXKEYS.ONBOARDING_POLICY_ID,
-    },
-})(BaseOnboardingWork);
+export default BaseOnboardingWork;

src/pages/OnboardingWork/index.native.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import BaseOnboardingWork from './BaseOnboardingWork';
 import type {OnboardingWorkProps} from './types';
 
-function OnboardingWork({...rest}: Omit<OnboardingWorkProps, 'shouldUseNativeStyles'>) {
+function OnboardingWork(props: OnboardingWorkProps) {
     return (
         <BaseOnboardingWork
             shouldUseNativeStyles
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...rest}
+            {...props}
         />
     );
 }

src/pages/OnboardingWork/index.tsx

@@ -5,15 +5,15 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import BaseOnboardingWork from './BaseOnboardingWork';
 import type {OnboardingWorkProps} from './types';
 
-function OnboardingWork({...rest}: Omit<OnboardingWorkProps, 'shouldUseNativeStyles'>) {
+function OnboardingWork(props: OnboardingWorkProps) {
     const styles = useThemeStyles();
     return (
         <FocusTrapForScreens>
             <View style={styles.h100}>
                 <BaseOnboardingWork
                     shouldUseNativeStyles={false}
                     // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...rest}
+                    {...props}
                 />
             </View>
         </FocusTrapForScreens>

src/pages/OnboardingWork/types.ts

@@ -1,23 +1,12 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import type {OnyxEntry} from 'react-native-onyx';
 import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types';
-import type {OnboardingPurposeType} from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
 
 type OnboardingWorkProps = Record<string, unknown> & StackScreenProps<OnboardingModalNavigatorParamList, typeof SCREENS.ONBOARDING.WORK>;
 
-type BaseOnboardingWorkOnyxProps = {
-    /** Saved onboarding purpose selected by the user */
-    onboardingPurposeSelected: OnyxEntry<OnboardingPurposeType>;
-
-    /** Saved onboarding purpose selected by the user */
-    onboardingPolicyID: OnyxEntry<string>;
+type BaseOnboardingWorkProps = OnboardingWorkProps & {
+    /* Whether to use native styles tailored for native devices */
+    shouldUseNativeStyles: boolean;
 };
 
-type BaseOnboardingWorkProps = OnboardingWorkProps &
-    BaseOnboardingWorkOnyxProps & {
-        /* Whether to use native styles tailored for native devices */
-        shouldUseNativeStyles: boolean;
-    };
-
-export type {OnboardingWorkProps, BaseOnboardingWorkOnyxProps, BaseOnboardingWorkProps};
+export type {OnboardingWorkProps, BaseOnboardingWorkProps};