From b57f310f54c14ef558d7e67910aac01f777432e1 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 28 Oct 2025 13:27:24 +0100 Subject: [PATCH 1/2] fix double floating action button issue --- .../Navigation/NavigationTabBar/index.tsx | 5 ++++- .../TopLevelNavigationTabBar/index.tsx | 8 -------- src/pages/workspace/WorkspaceInitialPage.tsx | 10 +++++++++- src/pages/workspace/WorkspacesListPage.tsx | 18 ++++++++++++++++-- 4 files changed, 29 insertions(+), 12 deletions(-) diff --git a/src/components/Navigation/NavigationTabBar/index.tsx b/src/components/Navigation/NavigationTabBar/index.tsx index cc7d660035145..9600e8372a242 100644 --- a/src/components/Navigation/NavigationTabBar/index.tsx +++ b/src/components/Navigation/NavigationTabBar/index.tsx @@ -3,6 +3,7 @@ import reportsSelector from '@selectors/Attributes'; import React, {memo, useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; +import FloatingCameraButton from '@components/FloatingCameraButton'; import HeaderGap from '@components/HeaderGap'; import Icon from '@components/Icon'; // import * as Expensicons from '@components/Icon/Expensicons'; @@ -47,9 +48,10 @@ import NAVIGATION_TABS from './NAVIGATION_TABS'; type NavigationTabBarProps = { selectedTab: ValueOf; isTopLevelBar?: boolean; + shouldShowFloatingCameraButton?: boolean; }; -function NavigationTabBar({selectedTab, isTopLevelBar = false}: NavigationTabBarProps) { +function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloatingCameraButton = true}: NavigationTabBarProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -443,6 +445,7 @@ function NavigationTabBar({selectedTab, isTopLevelBar = false}: NavigationTabBar onPress={navigateToSettings} /> + {shouldShowFloatingCameraButton && } ); } diff --git a/src/components/Navigation/TopLevelNavigationTabBar/index.tsx b/src/components/Navigation/TopLevelNavigationTabBar/index.tsx index d8637138b0e49..6712967b36cba 100644 --- a/src/components/Navigation/TopLevelNavigationTabBar/index.tsx +++ b/src/components/Navigation/TopLevelNavigationTabBar/index.tsx @@ -1,16 +1,13 @@ import type {ParamListBase} from '@react-navigation/native'; import React, {useContext, useEffect, useRef, useState} from 'react'; import {InteractionManager, View} from 'react-native'; -import FloatingCameraButton from '@components/FloatingCameraButton'; import {FullScreenBlockingViewContext} from '@components/FullScreenBlockingViewContextProvider'; import NavigationTabBar from '@components/Navigation/NavigationTabBar'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import getPlatform from '@libs/getPlatform'; import type {PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types'; -import CONST from '@src/CONST'; import getIsNavigationTabBarVisibleDirectly from './getIsNavigationTabBarVisibleDirectly'; import getIsScreenWithNavigationTabBarFocused from './getIsScreenWithNavigationTabBarFocused'; import getSelectedTab from './getSelectedTab'; @@ -46,10 +43,6 @@ function TopLevelNavigationTabBar({state}: TopLevelNavigationTabBarProps) { const isReadyToDisplayBottomBar = isAfterClosingTransition && shouldDisplayBottomBar && !isBlockingViewVisible; const shouldDisplayLHB = !shouldUseNarrowLayout; - const platform = getPlatform(true); - // We want to display the floating camera button on mobile devices (both web and native) - const shouldShowFloatingCameraButton = platform !== CONST.PLATFORM.WEB && platform !== CONST.PLATFORM.DESKTOP; - useEffect(() => { if (!shouldDisplayBottomBar) { // If the bottom tab is not visible, that means there is a screen covering it. @@ -81,7 +74,6 @@ function TopLevelNavigationTabBar({state}: TopLevelNavigationTabBarProps) { selectedTab={selectedTab} isTopLevelBar /> - {shouldShowFloatingCameraButton && } ); } diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index c59464befb1f3..917fa0d934a99 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -466,7 +466,15 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac } + bottomContent={ + shouldShowNavigationTabBar && + !shouldDisplayLHB && ( + + ) + } > } + bottomContent={ + shouldUseNarrowLayout && ( + + ) + } enableEdgeToEdgeBottomSafeAreaPadding={false} > @@ -709,7 +716,14 @@ function WorkspacesListPage() { shouldShowOfflineIndicatorInWideScreen testID={WorkspacesListPage.displayName} enableEdgeToEdgeBottomSafeAreaPadding={false} - bottomContent={shouldUseNarrowLayout && } + bottomContent={ + shouldUseNarrowLayout && ( + + ) + } > {!shouldUseNarrowLayout && {getHeaderButton()}} From a0fa574af12cb34a0d755bbdf186ed47cf67d11e Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 30 Oct 2025 16:37:43 +0100 Subject: [PATCH 2/2] remove FloatingCameraButton from TopLevelNavigationTabBar --- src/components/Navigation/TopLevelNavigationTabBar/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Navigation/TopLevelNavigationTabBar/index.tsx b/src/components/Navigation/TopLevelNavigationTabBar/index.tsx index cfd9a2473bbb8..6712967b36cba 100644 --- a/src/components/Navigation/TopLevelNavigationTabBar/index.tsx +++ b/src/components/Navigation/TopLevelNavigationTabBar/index.tsx @@ -8,7 +8,6 @@ import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import type {PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types'; -import FloatingCameraButton from '@components/FloatingCameraButton'; import getIsNavigationTabBarVisibleDirectly from './getIsNavigationTabBarVisibleDirectly'; import getIsScreenWithNavigationTabBarFocused from './getIsScreenWithNavigationTabBarFocused'; import getSelectedTab from './getSelectedTab'; @@ -75,7 +74,6 @@ function TopLevelNavigationTabBar({state}: TopLevelNavigationTabBarProps) { selectedTab={selectedTab} isTopLevelBar /> - ); }