diff --git a/src/components/disappearing-header/index.tsx b/src/components/disappearing-header/index.tsx index 1ba604f07f..dc38847ad8 100644 --- a/src/components/disappearing-header/index.tsx +++ b/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 = 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, diff --git a/src/navigation/index.tsx b/src/navigation/index.tsx index 25f638ca8a..a35fe7faa0 100644 --- a/src/navigation/index.tsx +++ b/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(); const NavigationRoot = () => { const {isLoading, onboarded} = useAppState(); + const {theme} = useTheme(); const ref = useRef(null); const {getInitialState} = useLinking(ref, { @@ -56,10 +58,9 @@ const NavigationRoot = () => { return ( <> diff --git a/src/screens/Assistant/index.tsx b/src/screens/Assistant/index.tsx index fc9363c21e..77cdd0e9a0 100644 --- a/src/screens/Assistant/index.tsx +++ b/src/screens/Assistant/index.tsx @@ -350,6 +350,17 @@ const Assistant: React.FC = ({ 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 ( = ({ showEmptyScreen={showEmptyScreen} isEmptyResult={isEmptyResult} resultReasons={noResultReasons} - onDetailsPressed={(tripPattern) => - navigation.navigate('TripDetailsModal', { - from: from!, - to: to!, - tripPatternId: tripPattern.id!, - tripPattern: tripPattern, - }) - } + onDetailsPressed={onPressed} errorType={errorType} />