fix(native-app): large title on all tab screens now fixed

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,6 +26,7 @@ import { useBrowser } from '../../lib/useBrowser'
 import { getApplicationOverviewUrl } from '../../utils/applications-utils'
 import { testIDs } from '../../utils/test-ids'
 import { ApplicationsModule } from '../home/applications-module'
+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

@@ -6,6 +6,7 @@ import {
   SearchBar,
   Tag,
   TopLine,
+  InboxCard,
 } from '@ui'
 import { setBadgeCountAsync } from 'expo-notifications'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -43,8 +44,8 @@ import { useUiStore } from '../../stores/ui-store'
 import { ComponentRegistry } from '../../utils/component-registry'
 import { testIDs } from '../../utils/test-ids'
 import { isAndroid } from '../../utils/devices'
-import { InboxCard } from '@ui/lib/card/inbox-card'
 import { useApolloClient } from '@apollo/client'
+import { isIos } from '../../utils/devices'
 
 type ListItem =
   | { id: string; type: 'skeleton' | 'empty' }
@@ -181,7 +182,7 @@ export const InboxScreen: NavigationFunctionComponent<{
   const [loadingMore, setLoadingMore] = useState(false)
   const queryString = useThrottleState(query)
   const theme = useTheme()
-  const [visible, setVisible] = useState(false)
+  const [hiddenContent, setHiddenContent] = useState(isIos)
   const [refetching, setRefetching] = useState(false)
   const pageRef = useRef(1)
   const loadingTimeout = useRef<ReturnType<typeof setTimeout>>()
@@ -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
   }
 

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,
@@ -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,6 +24,7 @@ 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 { 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

@@ -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,10 +26,8 @@ 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'
@@ -96,6 +95,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 +194,10 @@ export const WalletScreen: NavigationFunctionComponent = ({ componentId }) => {
     }
   }, [])
 
+  useNavigationComponentDidAppear(() => {
+    setHiddenContent(false)
+  }, componentId)
+
   const renderItem = useCallback(
     ({ item }: ListRenderItemInfo<FlatListItem>) => {
       if (item.__typename === 'Skeleton') {
@@ -258,6 +262,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

apps/native/app/src/ui/index.ts

@@ -19,6 +19,7 @@ export * from './lib/card/finance-status-card'
 export * from './lib/card/status-card'
 export * from './lib/card/welcome-card'
 export * from './lib/card/link-card'
+export * from './lib/card/inbox-card'
 export * from './lib/detail/content'
 export * from './lib/detail/header'
 export * from './lib/empty-state/empty-card'