Refactor BasePage paddingTop

CHANGELOG.md

@@ -24,6 +24,7 @@ This document logs notable, developer-facing updates to the NEAR Mobile Wallet.
 
 ### 🎉 New Features
 
+-   Add new currencies icons [add-near-coins](https://github.com/Peersyst/near-mobile-wallet/pull/553)
 -   Add final DApps explore link [feat/update-explore-dapps-link](https://github.com/Peersyst/near-mobile-wallet/pull/550)
 -   Block buy based on the IP [refactor/buy-ip-blocking](https://github.com/Peersyst/near-mobile-wallet/pull/549)
 -   Add a `RefetchHandler` to improve the sync of the balance between the online/offline and the active/background states [feat/refetch-handler](https://github.com/Peersyst/near-mobile-wallet/pull/541)
@@ -34,6 +35,7 @@ This document logs notable, developer-facing updates to the NEAR Mobile Wallet.
 
 ### 🐛 Bug Fixes
 
+-   Fix IOs WebView not ocuppying full height [refactor/base-page-padding](https://github.com/Peersyst/near-mobile-wallet/pull/555)
 -   Fix ref finance web infinite loop loading [fix/loop-in-ref-finance-web-view](https://github.com/Peersyst/near-mobile-wallet/pull/552)
 -   Fix dApps `onShouldStartLoadWithRequest` not working correctly on Android [feat/update-explore-dapps-link](https://github.com/Peersyst/near-mobile-wallet/pull/551)
 -   Fix dapps webview loading [fix/dapps-webview-loading](https://github.com/Peersyst/near-mobile-wallet/pull/548)

src/module/common/component/layout/BasePage/BasePage.styles.ts

@@ -1,19 +1,7 @@
 import styled from "@peersyst/react-native-styled";
 import { View } from "react-native";
-import Constants from "expo-constants";
-import { BasePageContentProps } from "module/common/component/layout/BasePage/BasePage.types";
-import { TOOLBAR_HEIGHT } from "module/common/component/layout/Toolbar/Toolbar.styles";
 
 export const BasePageRoot = styled(View)(({ theme }) => ({
     flex: 1,
     backgroundColor: theme.palette.background,
 }));
-
-export const BasePageContent = styled(View)<BasePageContentProps>(({ header, watchStatusBar }) => {
-    const statusBarHeight = watchStatusBar ? Constants.statusBarHeight : 0;
-
-    return {
-        flex: 1,
-        paddingTop: header ? statusBarHeight + TOOLBAR_HEIGHT : statusBarHeight,
-    };
-});

src/module/common/component/layout/BasePage/BasePage.tsx

@@ -1,16 +1,18 @@
 import { BasePageProps } from "module/common/component/layout/BasePage/BasePage.types";
 import Header from "module/common/component/navigation/Header/Header";
-import { BasePageContent, BasePageRoot } from "./BasePage.styles";
+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, watchStatusBar = true }: BasePageProps): JSX.Element => {
     return (
         <>
             <BasePageRoot style={style}>
                 {header && <Header />}
-                <BasePageContent watchStatusBar={watchStatusBar} header={header}>
-                    {children}
-                </BasePageContent>
+                <View style={{ flex: 1, ...(handlePadding && { paddingTop }) }}>{children}</View>
             </BasePageRoot>
             <StatusBar />
         </>

src/module/common/component/layout/BasePage/BasePage.types.ts

@@ -8,9 +8,5 @@ export interface BasePageProps {
     gradient?: boolean;
     style?: ViewStyle;
     watchStatusBar?: boolean;
-}
-
-export interface BasePageContentProps {
-    header: boolean;
-    watchStatusBar: boolean;
+    handlePadding?: boolean;
 }

src/module/common/component/layout/BasePage/hooks/useBasePagePaddingTop.ts

@@ -0,0 +1,13 @@
+import Constants from "expo-constants";
+import { ViewStyle } from "react-native";
+import { TOOLBAR_HEIGHT } from "../../Toolbar/Toolbar.styles";
+
+export interface UseBasePagePaddingParams {
+    watchStatusBar?: boolean;
+    header?: boolean;
+}
+
+export function useBasePagePaddingTop({ watchStatusBar = true, header = true }: UseBasePagePaddingParams): ViewStyle["padding"] {
+    const statusBarHeight = watchStatusBar ? Constants.statusBarHeight : 0;
+    return header ? statusBarHeight + TOOLBAR_HEIGHT : statusBarHeight;
+}

src/module/main/component/navigation/MainBottomNavigatorGroup/MainBottomNavigatorGroup.tsx

@@ -9,12 +9,18 @@ import FaqsScreen from "module/faqs/screen/FaqsScreen";
 import SettingsScreen from "module/settings/screen/SettingsScreen/SettingsScreen";
 import DAppsNavigator from "module/dapp/navigator/DAppsNavigator";
 import useMainBottomNavigatorGroupHeader from "./hooks/useMainBottomNavigatorGroupHeader";
+import { useBasePagePaddingTop } from "module/common/component/layout/BasePage/hooks/useBasePagePaddingTop";
 
 export const MainBottomNavigatorGroup = () => {
     const { header, onRouteChange } = useMainBottomNavigatorGroupHeader();
+    /**
+     * 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: () => {
@@ -24,7 +30,11 @@ export const MainBottomNavigatorGroup = () => {
                 initialRouteName={MainScreens.HOME}
                 tabBar={(props) => <BottomBar {...props} />}
                 screenOptions={{ headerShown: false }}
-                sceneContainerStyle={{ backgroundColor: "transparent", flex: 1 }}
+                sceneContainerStyle={{
+                    backgroundColor: "transparent",
+                    flex: 1,
+                    paddingTop,
+                }}
                 backBehavior="history"
             >
                 <BottomTab.Screen name={MainScreens.HOME} component={HomeScreen} />