From e11698a41fe72825c404fe533e4e7c1bbc2e28ff Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Thu, 11 Jul 2024 11:25:16 +0000 Subject: [PATCH 1/2] fix: large title on all tab screens now fixed --- .../app/src/screens/applications/applications.tsx | 12 ++++++++++++ apps/native/app/src/screens/inbox/inbox.tsx | 10 ++++++---- apps/native/app/src/screens/more/more.tsx | 13 ++++++++++++- apps/native/app/src/screens/wallet/wallet.tsx | 11 +++++++++++ apps/native/app/src/ui/index.ts | 1 + 5 files changed, 42 insertions(+), 5 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 ( <> >() @@ -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 ( <> Date: Thu, 11 Jul 2024 12:35:39 +0000 Subject: [PATCH 2/2] fix: order of imports --- apps/native/app/src/screens/applications/applications.tsx | 2 +- apps/native/app/src/screens/more/more.tsx | 2 +- apps/native/app/src/screens/wallet/wallet.tsx | 4 +--- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/native/app/src/screens/applications/applications.tsx b/apps/native/app/src/screens/applications/applications.tsx index 0f5a71146055..63723209843b 100644 --- a/apps/native/app/src/screens/applications/applications.tsx +++ b/apps/native/app/src/screens/applications/applications.tsx @@ -10,6 +10,7 @@ import { View, } from 'react-native' import { NavigationFunctionComponent } from 'react-native-navigation' +import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks' import illustrationSrc from '../../assets/illustrations/le-company-s3.png' import { BottomTabsIndicator } from '../../components/bottom-tabs-indicator/bottom-tabs-indicator' import { @@ -25,7 +26,6 @@ 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 = diff --git a/apps/native/app/src/screens/more/more.tsx b/apps/native/app/src/screens/more/more.tsx index 864e98121e1b..94062b785efb 100644 --- a/apps/native/app/src/screens/more/more.tsx +++ b/apps/native/app/src/screens/more/more.tsx @@ -8,6 +8,7 @@ import { TouchableHighlight, } from 'react-native' import { NavigationFunctionComponent } from 'react-native-navigation' +import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks' import styled, { useTheme } from 'styled-components/native' import assetsIcon from '../../assets/icons/assets.png' import familyIcon from '../../assets/icons/family.png' @@ -23,7 +24,6 @@ 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` diff --git a/apps/native/app/src/screens/wallet/wallet.tsx b/apps/native/app/src/screens/wallet/wallet.tsx index 3ed6d77a0e69..92c34efb44c5 100644 --- a/apps/native/app/src/screens/wallet/wallet.tsx +++ b/apps/native/app/src/screens/wallet/wallet.tsx @@ -13,6 +13,7 @@ import { import { NavigationFunctionComponent } from 'react-native-navigation' import SpotlightSearch from 'react-native-spotlight-search' import { useTheme } from 'styled-components/native' +import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks' import illustrationSrc from '../../assets/illustrations/le-moving-s6.png' import { BottomTabsIndicator } from '../../components/bottom-tabs-indicator/bottom-tabs-indicator' @@ -25,16 +26,13 @@ import { useListLicensesQuery, } from '../../graphql/types/schema' import { createNavigationOptionHooks } from '../../hooks/create-navigation-option-hooks' -import { useActiveTabItemPress } from '../../hooks/use-active-tab-item-press' import { useConnectivityIndicator } from '../../hooks/use-connectivity-indicator' import { usePreferencesStore } from '../../stores/preferences-store' -import { ButtonRegistry } from '../../utils/component-registry' import { isIos } from '../../utils/devices' 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