fix: pull header height context out to app level so all overlay sheet…

…s can access it (#1742)
techmatters · Jul 10, 2024 · 13f8f05 · 13f8f05
1 parent 398f0d0
commit 13f8f05
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 31 deletions.
diff --git a/dev-client/src/App.tsx b/dev-client/src/App.tsx
@@ -25,7 +25,7 @@
 // react-native-get-random-values needed for uuid - https://github.com/uuidjs/uuid#react-native--expo
 import 'react-native-get-random-values';
 
-import {useEffect} from 'react';
+import {useEffect, useState} from 'react';
 import {LogBox, PermissionsAndroid} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {Provider} from 'react-redux';
@@ -46,6 +46,7 @@ import * as Sentry from '@sentry/react-native';
 
 import {APP_CONFIG} from 'terraso-mobile-client/config';
 import {GeospatialProvider} from 'terraso-mobile-client/context/GeospatialContext';
+import {HeaderHeightContext} from 'terraso-mobile-client/context/HeaderHeightContext';
 import {HomeScreenContextProvider} from 'terraso-mobile-client/context/HomeScreenContext';
 import {checkAndroidPermissions} from 'terraso-mobile-client/native/checkAndroidPermissions';
 import {RootNavigator} from 'terraso-mobile-client/navigation/navigators/RootNavigator';
@@ -80,27 +81,31 @@ function App(): React.JSX.Element {
     ),
   );
 
+  const [headerHeight, setHeaderHeight] = useState(0);
+
   return (
     <GestureHandlerRootView style={style}>
       <Provider store={store}>
-        <BottomSheetModalProvider>
-          <PaperProvider theme={paperTheme}>
-            <NativeBaseProvider theme={theme}>
-              <Portal.Host>
-                <NavigationContainer>
-                  <BottomSheetModalProvider>
-                    <GeospatialProvider>
-                      <Toasts />
-                      <HomeScreenContextProvider>
-                        <RootNavigator />
-                      </HomeScreenContextProvider>
-                    </GeospatialProvider>
-                  </BottomSheetModalProvider>
-                </NavigationContainer>
-              </Portal.Host>
-            </NativeBaseProvider>
-          </PaperProvider>
-        </BottomSheetModalProvider>
+        <HeaderHeightContext.Provider value={{headerHeight, setHeaderHeight}}>
+          <BottomSheetModalProvider>
+            <PaperProvider theme={paperTheme}>
+              <NativeBaseProvider theme={theme}>
+                <Portal.Host>
+                  <NavigationContainer>
+                    <BottomSheetModalProvider>
+                      <GeospatialProvider>
+                        <Toasts />
+                        <HomeScreenContextProvider>
+                          <RootNavigator />
+                        </HomeScreenContextProvider>
+                      </GeospatialProvider>
+                    </BottomSheetModalProvider>
+                  </NavigationContainer>
+                </Portal.Host>
+              </NativeBaseProvider>
+            </PaperProvider>
+          </BottomSheetModalProvider>
+        </HeaderHeightContext.Provider>
       </Provider>
     </GestureHandlerRootView>
   );

diff --git a/dev-client/src/components/sheets/OverlaySheet.tsx b/dev-client/src/components/sheets/OverlaySheet.tsx
@@ -60,7 +60,8 @@ export const OverlaySheet = forwardRef<
     },
     forwardedRef,
   ) => {
-    const headerHeight = useHeaderHeight();
+    const {headerHeight} = useHeaderHeight();
+
     const ref = useRef<GorhomBottomSheetModal>(null);
     const methods = useMemo(
       () => ({

diff --git a/dev-client/src/context/HeaderHeightContext.tsx b/dev-client/src/context/HeaderHeightContext.tsx
@@ -17,4 +17,7 @@
 
 import {createContext} from 'react';
 
-export const HeaderHeightContext = createContext<number | undefined>(undefined);
+export const HeaderHeightContext = createContext<{
+  headerHeight: number | undefined;
+  setHeaderHeight: (height: number) => void;
+}>({headerHeight: undefined, setHeaderHeight: () => {}});
diff --git a/dev-client/src/screens/HomeScreen/components/LandPKSInfoModal.tsx b/dev-client/src/screens/HomeScreen/components/LandPKSInfoModal.tsx
@@ -31,7 +31,7 @@ type Props = {
 
 export const LandPKSInfoModal = forwardRef<BottomSheetModal, Props>(
   ({onClose}, ref) => {
-    const headerHeight = useHeaderHeight();
+    const {headerHeight} = useHeaderHeight();
 
     return (
       <BottomSheetModal

diff --git a/dev-client/src/screens/ScreenScaffold.tsx b/dev-client/src/screens/ScreenScaffold.tsx
@@ -15,12 +15,12 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import {useCallback, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {LayoutChangeEvent, StatusBar, StyleSheet, View} from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {Box, Column} from 'terraso-mobile-client/components/NativeBaseAdapters';
-import {HeaderHeightContext} from 'terraso-mobile-client/context/HeaderHeightContext';
+import {useHeaderHeight} from 'terraso-mobile-client/hooks/useHeaderHeight';
 import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar';
 import {theme} from 'terraso-mobile-client/theme';
 
@@ -34,14 +34,19 @@ export const ScreenScaffold = ({
   children,
   AppBar: PropsAppBar = <AppBar />,
 }: Props) => {
-  const [headerHeight, setHeaderHeight] = useState<number | undefined>(
+  const [appBarHeight, setAppBarHeight] = useState<number | undefined>(
     undefined,
   );
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => setAppBarHeight(e.nativeEvent.layout.height),
+    [setAppBarHeight],
+  );
   const safeAreaTop = useSafeAreaInsets().top;
 
-  const onLayout = useCallback(
-    (e: LayoutChangeEvent) => setHeaderHeight(e.nativeEvent.layout.height),
-    [setHeaderHeight],
+  const {setHeaderHeight} = useHeaderHeight();
+  useEffect(
+    () => setHeaderHeight(safeAreaTop + (appBarHeight ?? 0)),
+    [setHeaderHeight, safeAreaTop, appBarHeight],
   );
 
   return (
@@ -58,9 +63,7 @@ export const ScreenScaffold = ({
       />
       <Column backgroundColor="primary.contrast" flex={1}>
         <View onLayout={onLayout}>{PropsAppBar}</View>
-        <HeaderHeightContext.Provider value={safeAreaTop + (headerHeight ?? 0)}>
-          <Box flex={1}>{children}</Box>
-        </HeaderHeightContext.Provider>
+        <Box flex={1}>{children}</Box>
       </Column>
     </SafeAreaView>
   );