From 48a2155840adf854b9400f52c803c41d6760e3e4 Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Thu, 11 Jul 2024 11:25:16 +0000 Subject: [PATCH] fix: large title on all tab screens now fixed --- .../app/src/screens/applications/applications.tsx | 12 ++++++++++++ apps/native/app/src/screens/inbox/inbox.tsx | 8 +++++--- apps/native/app/src/screens/more/more.tsx | 13 ++++++++++++- apps/native/app/src/screens/wallet/wallet.tsx | 11 +++++++++++ 4 files changed, 40 insertions(+), 4 deletions(-) diff --git a/apps/native/app/src/screens/applications/applications.tsx b/apps/native/app/src/screens/applications/applications.tsx index c906ee619916..0f5a71146055 100644 --- a/apps/native/app/src/screens/applications/applications.tsx +++ b/apps/native/app/src/screens/applications/applications.tsx @@ -25,6 +25,8 @@ import { useBrowser } from '../../lib/useBrowser' import { getApplicationOverviewUrl } from '../../utils/applications-utils' import { testIDs } from '../../utils/test-ids' import { ApplicationsModule } from '../home/applications-module' +import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks' +import { isIos } from '../../utils/devices' type ListItem = | { id: string; __typename: 'Skeleton' } @@ -78,6 +80,7 @@ export const ApplicationsScreen: NavigationFunctionComponent = ({ const [refetching, setRefetching] = useState(false) const intl = useIntl() const scrollY = useRef(new Animated.Value(0)).current + const [hiddenContent, setHiddenContent] = useState(isIos) const res = useListSearchQuery({ variables: { @@ -99,6 +102,10 @@ export const ApplicationsScreen: NavigationFunctionComponent = ({ queryResult: [applicationsRes, res], }) + useNavigationComponentDidAppear(() => { + setHiddenContent(false) + }, componentId) + const data = useMemo(() => { if (!res.data && res.loading) { return Array.from({ length: 8 }).map((_, id) => ({ @@ -149,6 +156,11 @@ export const ApplicationsScreen: NavigationFunctionComponent = ({ } }, [applicationsRes]) + // Fix for a bug in react-native-navigation where the large title is not visible on iOS with bottom tabs https://github.com/wix/react-native-navigation/issues/6717 + if (hiddenContent) { + return null + } + return ( <> { - setVisible(true) + setHiddenContent(false) }, componentId) const onPressMarkAllAsRead = () => { @@ -421,7 +422,8 @@ export const InboxScreen: NavigationFunctionComponent<{ ) } - if (!visible) { + // Fix for a bug in react-native-navigation where the large title is not visible on iOS with bottom tabs https://github.com/wix/react-native-navigation/issues/6717 + if (hiddenContent) { return null } diff --git a/apps/native/app/src/screens/more/more.tsx b/apps/native/app/src/screens/more/more.tsx index 2d30599aaa71..864e98121e1b 100644 --- a/apps/native/app/src/screens/more/more.tsx +++ b/apps/native/app/src/screens/more/more.tsx @@ -1,5 +1,5 @@ import { FamilyMemberCard, ListButton } from '@ui' -import React from 'react' +import React, { useState } from 'react' import { useIntl } from 'react-intl' import { Image, @@ -23,6 +23,8 @@ import { formatNationalId } from '../../lib/format-national-id' import { useAuthStore } from '../../stores/auth-store' import { testIDs } from '../../utils/test-ids' import { getRightButtons } from '../../utils/get-main-root' +import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks' +import { isIos } from '../../utils/devices' const Row = styled.View` margin-top: ${({ theme }) => theme.spacing[2]}px; @@ -75,6 +77,7 @@ export const MoreScreen: NavigationFunctionComponent = ({ componentId }) => { const authStore = useAuthStore() const intl = useIntl() const theme = useTheme() + const [hiddenContent, setHiddenContent] = useState(isIos) const showFinances = useFeatureFlag('isFinancesEnabled', false) const showAirDiscount = useFeatureFlag('isAirDiscountEnabled', false) @@ -83,6 +86,14 @@ export const MoreScreen: NavigationFunctionComponent = ({ componentId }) => { componentId, rightButtons: getRightButtons({ screen: 'More' }), }) + useNavigationComponentDidAppear(() => { + setHiddenContent(false) + }, componentId) + + // Fix for a bug in react-native-navigation where the large title is not visible on iOS with bottom tabs https://github.com/wix/react-native-navigation/issues/6717 + if (hiddenContent) { + return null + } return ( <> diff --git a/apps/native/app/src/screens/wallet/wallet.tsx b/apps/native/app/src/screens/wallet/wallet.tsx index 7baaea419a27..3ed6d77a0e69 100644 --- a/apps/native/app/src/screens/wallet/wallet.tsx +++ b/apps/native/app/src/screens/wallet/wallet.tsx @@ -34,6 +34,7 @@ import { getRightButtons } from '../../utils/get-main-root' import { isDefined } from '../../utils/is-defined' import { testIDs } from '../../utils/test-ids' import { WalletItem } from './components/wallet-item' +import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks' type FlatListItem = | GenericUserLicense @@ -96,6 +97,7 @@ export const WalletScreen: NavigationFunctionComponent = ({ componentId }) => { const intl = useIntl() const scrollY = useRef(new Animated.Value(0)).current const { dismiss, dismissed } = usePreferencesStore() + const [hiddenContent, setHiddenContent] = useState(isIos) // Feature flags const showPassport = useFeatureFlag('isPassportEnabled', false) @@ -194,6 +196,10 @@ export const WalletScreen: NavigationFunctionComponent = ({ componentId }) => { } }, []) + useNavigationComponentDidAppear(() => { + setHiddenContent(false) + }, componentId) + const renderItem = useCallback( ({ item }: ListRenderItemInfo) => { if (item.__typename === 'Skeleton') { @@ -258,6 +264,11 @@ export const WalletScreen: NavigationFunctionComponent = ({ componentId }) => { ] as FlatListItem[] }, [licenseItems, resPassport, showPassport, res.loading, res.data]) + // Fix for a bug in react-native-navigation where the large title is not visible on iOS with bottom tabs https://github.com/wix/react-native-navigation/issues/6717 + if (hiddenContent) { + return null + } + return ( <>