fix: large title on all tab screens now fixed

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<ListItem[]>(() => {
     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 (
     <>
       <Animated.FlatList

apps/native/app/src/screens/inbox/inbox.tsx

@@ -46,6 +46,7 @@ import { useOrganizationsStore } from '../../stores/organizations-store'
 import { useUiStore } from '../../stores/ui-store'
 import { ComponentRegistry } from '../../utils/component-registry'
 import { testIDs } from '../../utils/test-ids'
+import { isIos } from '../../utils/devices'
 
 type ListItem =
   | { id: string; type: 'skeleton' | 'empty' }
@@ -273,7 +274,7 @@ export const InboxScreen: NavigationFunctionComponent<{
   const [query, setQuery] = useState('')
   const queryString = useThrottleState(query)
   const theme = useTheme()
-  const [visible, setVisible] = useState(false)
+  const [hiddenContent, setHiddenContent] = useState(isIos)
   const [refetching, setRefetching] = useState(false)
 
   const res = useInboxQuery({
@@ -390,7 +391,7 @@ export const InboxScreen: NavigationFunctionComponent<{
   }, [res.refetching, items, markAllAsReadLoading]) as ListItem[]
 
   useNavigationComponentDidAppear(() => {
-    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
   }
 

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 (
     <>

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<FlatListItem>) => {
       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 (
     <>
       <Animated.FlatList