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 ( <> >() @@ -396,7 +397,7 @@ export const InboxScreen: NavigationFunctionComponent<{ }, [res.loading, res.data, items]) as ListItem[] useNavigationComponentDidAppear(() => { - setVisible(true) + setHiddenContent(false) }, componentId) const onPressMarkAllAsRead = () => { @@ -427,7 +428,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 ( <>