refactor: base page padding top

Peersyst · Nov 8, 2024 · 369552e · 369552e
1 parent c1aa8e3
commit 369552e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 41 deletions.
diff --git a/src/module/common/component/layout/BasePage/BasePage.tsx b/src/module/common/component/layout/BasePage/BasePage.tsx
@@ -3,13 +3,16 @@ import Header from "module/common/component/navigation/Header/Header";
 import { BasePageRoot } from "./BasePage.styles";
 import { StatusBar } from "@peersyst/react-native-components";
 import { View } from "react-native";
+import { useBasePagePaddingTop } from "./hooks/useBasePagePaddingTop";
+
+const BasePage = ({ children, header = true, style, watchStatusBar = true, handlePadding = true }: BasePageProps): JSX.Element => {
+    const paddingTop = useBasePagePaddingTop({ watchStatusBar, header });
 
-const BasePage = ({ children, header = true, style }: BasePageProps): JSX.Element => {
     return (
         <>
             <BasePageRoot style={style}>
                 {header && <Header />}
-                <View style={{ flex: 1 }}>{children}</View>
+                <View style={{ flex: 1, ...(handlePadding && { paddingTop }) }}>{children}</View>
             </BasePageRoot>
             <StatusBar />
         </>

diff --git a/src/module/common/component/layout/BasePage/BasePage.types.ts b/src/module/common/component/layout/BasePage/BasePage.types.ts
@@ -8,4 +8,5 @@ export interface BasePageProps {
     gradient?: boolean;
     style?: ViewStyle;
     watchStatusBar?: boolean;
+    handlePadding?: boolean;
 }
diff --git a/src/module/common/component/layout/FullScreenModal/FullScreenModal.tsx b/src/module/common/component/layout/FullScreenModal/FullScreenModal.tsx
@@ -1,6 +1,4 @@
-import { View } from "react-native";
 import Navbar from "../../navigation/Navbar/Navbar";
-import { useBasePagePaddingTop } from "../BasePage/hooks/useBasePagePaddingTop";
 import Toolbar from "../Toolbar/Toolbar";
 import { FullScreenModalProps } from "./FullScreenModal.types";
 import { Backdrop } from "@peersyst/react-native-components";
@@ -9,25 +7,18 @@ import DarkThemeProvider from "module/common/component/util/ThemeProvider/DarkTh
 
 const FullScreenModal = ({ children, title, back, closable = true, style, ...rest }: FullScreenModalProps): JSX.Element => {
     const navbarProps = { title, back };
-    const paddingTop = useBasePagePaddingTop({ header: false });
 
     return (
         <Backdrop closable={closable} {...rest}>
             {(_open, setOpen) => (
                 <DarkThemeProvider>
                     <FullScreenModalContent style={style}>
-                        {/**
-                         * Due to a problem with the MainBottomNavigatorGroup a paddingTop is needed to be passed to the main
-                         * children of the BasePage. This is a workaround to fix the issue with the padding.
-                         */}
-                        <View style={{ paddingTop, flex: 1 }}>
-                            <Toolbar>
-                                {Object.entries(navbarProps).length > 0 && (
-                                    <Navbar onBack={() => setOpen(false)} style={{ borderBottomWidth: 0 }} {...navbarProps} />
-                                )}
-                            </Toolbar>
-                            {children}
-                        </View>
+                        <Toolbar>
+                            {Object.entries(navbarProps).length > 0 && (
+                                <Navbar onBack={() => setOpen(false)} style={{ borderBottomWidth: 0 }} {...navbarProps} />
+                            )}
+                        </Toolbar>
+                        {children}
                     </FullScreenModalContent>
                 </DarkThemeProvider>
             )}

diff --git a/...le/fiatorders/components/navigation/FiatOrdersNavigatorGroup/FiatOrdersNavigatorGroup.tsx b/...le/fiatorders/components/navigation/FiatOrdersNavigatorGroup/FiatOrdersNavigatorGroup.tsx
@@ -2,32 +2,20 @@ import { FiatOrderTab } from "stack-navigator";
 import BasePage from "module/common/component/layout/BasePage/BasePage";
 import BuyScreen from "module/fiatorders/screen/BuyScreen/BuyScreen";
 import BuySuccessScreen from "module/fiatorders/screen/BuySuccessScreen/BuySuccessScreen";
-import { Platform, View } from "react-native";
-import { useBasePagePaddingTop } from "module/common/component/layout/BasePage/hooks/useBasePagePaddingTop";
+import { Platform } from "react-native";
 
 export enum FiatOrderScreens {
     BUY = "Buy",
     BUY_SUCCESS = "BuySuccess",
 }
 
-const FiatOrdersNavigationGroup = () => {
-    const watchStatusBar = Platform.OS === "android";
-    /**
-     * Due to a problem with the MainBottomNavigatorGroup a paddingTop is needed to be passed to the main
-     * children of the BasePage. This is a workaround to fix the issue with the padding.
-     */
-    const paddingTop = useBasePagePaddingTop({ header: false, watchStatusBar });
-
-    return (
-        <BasePage header={false} watchStatusBar={watchStatusBar}>
-            <View style={{ paddingTop, flex: 1 }}>
-                <FiatOrderTab.Navigator initialRouteName={FiatOrderScreens.BUY} screenOptions={{ headerShown: false }}>
-                    <FiatOrderTab.Screen name={FiatOrderScreens.BUY} component={BuyScreen} />
-                    <FiatOrderTab.Screen name={FiatOrderScreens.BUY_SUCCESS} component={BuySuccessScreen} />
-                </FiatOrderTab.Navigator>
-            </View>
-        </BasePage>
-    );
-};
+const FiatOrdersNavigationGroup = () => (
+    <BasePage header={false} watchStatusBar={Platform.OS === "android"}>
+        <FiatOrderTab.Navigator initialRouteName={FiatOrderScreens.BUY} screenOptions={{ headerShown: false }}>
+            <FiatOrderTab.Screen name={FiatOrderScreens.BUY} component={BuyScreen} />
+            <FiatOrderTab.Screen name={FiatOrderScreens.BUY_SUCCESS} component={BuySuccessScreen} />
+        </FiatOrderTab.Navigator>
+    </BasePage>
+);
 
 export default FiatOrdersNavigationGroup;
diff --git a/src/module/main/component/navigation/MainBottomNavigatorGroup/MainBottomNavigatorGroup.tsx b/src/module/main/component/navigation/MainBottomNavigatorGroup/MainBottomNavigatorGroup.tsx
@@ -14,13 +14,13 @@ import { useBasePagePaddingTop } from "module/common/component/layout/BasePage/h
 export const MainBottomNavigatorGroup = () => {
     const { header, onRouteChange } = useMainBottomNavigatorGroupHeader();
     /**
-     * Due to a problem with the MainBottomNavigatorGroup a paddingTop is needed to be passed to the main
-     * children of the BasePage. This is a workaround to fix the issue with the padding.
+     * Due to a problem with react navigation which infers height in an anti-intuitive and unresponsive way,
+     * the `BasePage` content padding top has to be added manually to the navigator.
      */
     const paddingTop = useBasePagePaddingTop({ header });
 
     return (
-        <BasePage header={header}>
+        <BasePage header={header} handlePadding={false}>
             <BottomTab.Navigator
                 screenListeners={({ route }) => ({
                     state: () => {