fix: fixes header calculation height (#596)

* fix: fixes header calculation height

* fix: changes statusbar header color on androids with notches

* fix: fixes header spacing on android devices

* Reverts header color

* Only subtract when notched

* fix: changes statusbar header color on androids with notches

* fix: translucent status bar to avoid calc on statusbar

* fix: use safe area frame instead of dimensions

src/components/disappearing-header/index.tsx

@@ -1,25 +1,31 @@
 import {useScrollToTop} from '@react-navigation/native';
+import {useHeaderHeight} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {
+  AccessibilityProps,
   Animated,
+  Dimensions,
+  Easing,
   NativeScrollEvent,
   NativeSyntheticEvent,
   Platform,
   RefreshControl,
+  ScaledSize,
   ScrollView,
+  StatusBar,
   useWindowDimensions,
   View,
-  Easing,
-  AccessibilityProps,
-  StatusBar,
 } from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import SvgBanner from '../../assets/svg/icons/other/Banner';
 import useChatIcon from '../../chat/use-chat-icon';
 import AnimatedScreenHeader from '../../ScreenHeader/animated-header';
+import LogoOutline from '../../ScreenHeader/LogoOutline';
 import {StyleSheet} from '../../theme';
 import {useLayout} from '../../utils/use-layout';
-import SvgBanner from '../../assets/svg/icons/other/Banner';
-import LogoOutline from '../../ScreenHeader/LogoOutline';
 
 type Props = {
   renderHeader(isFullHeight: boolean): React.ReactNode;
@@ -332,10 +338,12 @@ const throttle = <F extends (...args: any[]) => any>(
 
 // This is code from react-navigation. Couldn't find any
 // way to reasonably calculate this.
-const DEFAULT_TABBAR_HEIGHT = 49;
+const DEFAULT_TABBAR_HEIGHT = 44;
 
 function useCalculateHeaderContentHeight() {
-  const {height: windowHeight} = useWindowDimensions();
+  // Using safeAreaFrame for height instead of dimensions as
+  // dimensions are problamatic on Android: https://github.com/facebook/react-native/issues/23693
+  const {height: actualHeight} = useSafeAreaFrame();
   const {
     onLayout: onScreenHeaderLayout,
     height: screenHeaderHeight,
@@ -344,12 +352,7 @@ function useCalculateHeaderContentHeight() {
   const {top, bottom} = useSafeAreaInsets();
 
   const boxHeight =
-    windowHeight -
-    screenHeaderHeight -
-    top -
-    bottom -
-    DEFAULT_TABBAR_HEIGHT -
-    (StatusBar.currentHeight ?? 0);
+    actualHeight - screenHeaderHeight - top - bottom - DEFAULT_TABBAR_HEIGHT;
 
   return {
     boxHeight,

src/navigation/index.tsx

@@ -1,26 +1,27 @@
-import React, {useEffect, useRef} from 'react';
-import {StatusBar, Platform} from 'react-native';
 import {
   NavigationContainer,
   NavigationContainerRef,
   useLinking,
 } from '@react-navigation/native';
-import trackNavigation from '../diagnostics/trackNavigation';
+import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
+import React, {useEffect, useRef} from 'react';
+import {StatusBar} from 'react-native';
+import {Host} from 'react-native-portalize';
 import {useAppState} from '../AppContext';
-import Onboarding from '../screens/Onboarding';
+import trackNavigation from '../diagnostics/trackNavigation';
 import LocationSearch, {
   RouteParams as LocationSearchParams,
 } from '../location-search';
-import TabNavigator from './TabNavigator';
-import transitionSpec from './transitionSpec';
+import Onboarding from '../screens/Onboarding';
 import TripDetailsModal, {
   RouteParams as TripDetailsModalParams,
 } from '../screens/TripDetailsModal';
-import {TransitionPresets, createStackNavigator} from '@react-navigation/stack';
 import DepartureDetails, {
   DepartureDetailsRouteParams,
 } from '../screens/TripDetailsModal/DepartureDetails';
-import {Host} from 'react-native-portalize';
+import {useTheme} from '../theme';
+import TabNavigator from './TabNavigator';
+import transitionSpec from './transitionSpec';
 
 export type RootStackParamList = {
   NotFound: undefined;
@@ -35,6 +36,7 @@ const Stack = createStackNavigator<RootStackParamList>();
 
 const NavigationRoot = () => {
   const {isLoading, onboarded} = useAppState();
+  const {theme} = useTheme();
 
   const ref = useRef<NavigationContainerRef>(null);
   const {getInitialState} = useLinking(ref, {
@@ -56,10 +58,9 @@ const NavigationRoot = () => {
   return (
     <>
       <StatusBar
-        barStyle={Platform.select({
-          ios: 'dark-content',
-          android: 'light-content',
-        })}
+        barStyle="dark-content"
+        translucent={true}
+        backgroundColor={theme.background.accent}
       />
       <Host>
         <NavigationContainer ref={ref} onStateChange={trackNavigation}>

src/screens/Assistant/index.tsx

@@ -350,6 +350,17 @@ const Assistant: React.FC<Props> = ({
 
   const noResultReasons = computeNoResultReasons(date, from, to);
 
+  const onPressed = useCallback(
+    (tripPattern) =>
+      navigation.navigate('TripDetailsModal', {
+        from: from!,
+        to: to!,
+        tripPatternId: tripPattern.id!,
+        tripPattern: tripPattern,
+      }),
+    [navigation, from, to],
+  );
+
   return (
     <DisappearingHeader
       renderHeader={renderHeader}
@@ -376,14 +387,7 @@ const Assistant: React.FC<Props> = ({
         showEmptyScreen={showEmptyScreen}
         isEmptyResult={isEmptyResult}
         resultReasons={noResultReasons}
-        onDetailsPressed={(tripPattern) =>
-          navigation.navigate('TripDetailsModal', {
-            from: from!,
-            to: to!,
-            tripPatternId: tripPattern.id!,
-            tripPattern: tripPattern,
-          })
-        }
+        onDetailsPressed={onPressed}
         errorType={errorType}
       />
     </DisappearingHeader>