show bottom bar on web tablet breakpoints when logged out (signup cta) (#2747)
* show signup bottom bar on web tablet * show signup bottom bar on web tablet * comment * adjust load latest btn position based on logged in/outzio/stable
parent
250b48d5a2
commit
0bbe2c5e32
|
@ -10,6 +10,7 @@ import Animated from 'react-native-reanimated'
|
|||
const AnimatedTouchableOpacity =
|
||||
Animated.createAnimatedComponent(TouchableOpacity)
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {useSession} from 'state/session'
|
||||
|
||||
export function LoadLatestBtn({
|
||||
onPress,
|
||||
|
@ -21,9 +22,14 @@ export function LoadLatestBtn({
|
|||
showIndicator: boolean
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const {isDesktop, isTablet, isMobile} = useWebMediaQueries()
|
||||
const {hasSession} = useSession()
|
||||
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
|
||||
const {fabMinimalShellTransform} = useMinimalShellMode()
|
||||
|
||||
// Adjust height of the fab if we have a session only on mobile web. If we don't have a session, we want to adjust
|
||||
// it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
|
||||
const showBottomBar = hasSession ? isMobile : isTabletOrMobile
|
||||
|
||||
return (
|
||||
<AnimatedTouchableOpacity
|
||||
style={[
|
||||
|
@ -32,7 +38,7 @@ export function LoadLatestBtn({
|
|||
isTablet && styles.loadLatestTablet,
|
||||
pal.borderDark,
|
||||
pal.view,
|
||||
isMobile && fabMinimalShellTransform,
|
||||
showBottomBar && fabMinimalShellTransform,
|
||||
]}
|
||||
onPress={onPress}
|
||||
hitSlop={HITSLOP_20}
|
||||
|
|
|
@ -101,7 +101,7 @@ function NativeStackNavigator({
|
|||
const onboardingState = useOnboardingState()
|
||||
const {showLoggedOut} = useLoggedOutView()
|
||||
const {setShowLoggedOut} = useLoggedOutViewControls()
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
|
||||
if ((!PWI_ENABLED || activeRouteRequiresAuth) && !hasSession) {
|
||||
return <LoggedOut />
|
||||
}
|
||||
|
@ -134,6 +134,10 @@ function NativeStackNavigator({
|
|||
}
|
||||
}
|
||||
|
||||
// Show the bottom bar if we have a session only on mobile web. If we don't have a session, we want to show it
|
||||
// on both tablet and mobile web so that we see the sign up CTA.
|
||||
const showBottomBar = hasSession ? isMobile : isTabletOrMobile
|
||||
|
||||
return (
|
||||
<NavigationContent>
|
||||
<NativeStackView
|
||||
|
@ -142,8 +146,8 @@ function NativeStackNavigator({
|
|||
navigation={navigation}
|
||||
descriptors={newDescriptors}
|
||||
/>
|
||||
{isWeb && isMobile && <BottomBarWeb />}
|
||||
{isWeb && !isMobile && (
|
||||
{isWeb && showBottomBar && <BottomBarWeb />}
|
||||
{isWeb && !showBottomBar && (
|
||||
<>
|
||||
<DesktopLeftNav />
|
||||
<DesktopRightNav routeName={activeRoute.name} />
|
||||
|
|
Loading…
Reference in New Issue