Set fixed_bottom_bar to true (#5203)
parent
c8be9b78c6
commit
7d7431d14e
|
@ -1,7 +1,6 @@
|
||||||
export type Gate =
|
export type Gate =
|
||||||
// Keep this alphabetic please.
|
// Keep this alphabetic please.
|
||||||
| 'debug_show_feedcontext'
|
| 'debug_show_feedcontext'
|
||||||
| 'fixed_bottom_bar'
|
|
||||||
| 'onboarding_minimum_interests'
|
| 'onboarding_minimum_interests'
|
||||||
| 'suggested_feeds_interstitial'
|
| 'suggested_feeds_interstitial'
|
||||||
| 'show_follow_suggestions_in_profile'
|
| 'show_follow_suggestions_in_profile'
|
||||||
|
|
|
@ -9,7 +9,6 @@ import {
|
||||||
import EventEmitter from 'eventemitter3'
|
import EventEmitter from 'eventemitter3'
|
||||||
|
|
||||||
import {ScrollProvider} from '#/lib/ScrollContext'
|
import {ScrollProvider} from '#/lib/ScrollContext'
|
||||||
import {useGate} from '#/lib/statsig/statsig'
|
|
||||||
import {useMinimalShellMode} from '#/state/shell'
|
import {useMinimalShellMode} from '#/state/shell'
|
||||||
import {useShellLayout} from '#/state/shell/shell-layout'
|
import {useShellLayout} from '#/state/shell/shell-layout'
|
||||||
import {isNative, isWeb} from 'platform/detection'
|
import {isNative, isWeb} from 'platform/detection'
|
||||||
|
@ -23,12 +22,10 @@ function clamp(num: number, min: number, max: number) {
|
||||||
|
|
||||||
export function MainScrollProvider({children}: {children: React.ReactNode}) {
|
export function MainScrollProvider({children}: {children: React.ReactNode}) {
|
||||||
const {headerHeight} = useShellLayout()
|
const {headerHeight} = useShellLayout()
|
||||||
const {headerMode, footerMode} = useMinimalShellMode()
|
const {headerMode} = useMinimalShellMode()
|
||||||
const startDragOffset = useSharedValue<number | null>(null)
|
const startDragOffset = useSharedValue<number | null>(null)
|
||||||
const startMode = useSharedValue<number | null>(null)
|
const startMode = useSharedValue<number | null>(null)
|
||||||
const didJustRestoreScroll = useSharedValue<boolean>(false)
|
const didJustRestoreScroll = useSharedValue<boolean>(false)
|
||||||
const gate = useGate()
|
|
||||||
const isFixedBottomBar = gate('fixed_bottom_bar')
|
|
||||||
|
|
||||||
const setMode = React.useCallback(
|
const setMode = React.useCallback(
|
||||||
(v: boolean) => {
|
(v: boolean) => {
|
||||||
|
@ -37,14 +34,8 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
|
||||||
headerMode.value = withSpring(v ? 1 : 0, {
|
headerMode.value = withSpring(v ? 1 : 0, {
|
||||||
overshootClamping: true,
|
overshootClamping: true,
|
||||||
})
|
})
|
||||||
if (!isFixedBottomBar) {
|
|
||||||
cancelAnimation(footerMode)
|
|
||||||
footerMode.value = withSpring(v ? 1 : 0, {
|
|
||||||
overshootClamping: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
[headerMode, footerMode, isFixedBottomBar],
|
[headerMode],
|
||||||
)
|
)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -147,10 +138,6 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
|
||||||
// Cancel any any existing animation
|
// Cancel any any existing animation
|
||||||
cancelAnimation(headerMode)
|
cancelAnimation(headerMode)
|
||||||
headerMode.value = newValue
|
headerMode.value = newValue
|
||||||
if (!isFixedBottomBar) {
|
|
||||||
cancelAnimation(footerMode)
|
|
||||||
footerMode.value = newValue
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (didJustRestoreScroll.value) {
|
if (didJustRestoreScroll.value) {
|
||||||
|
@ -173,12 +160,10 @@ export function MainScrollProvider({children}: {children: React.ReactNode}) {
|
||||||
[
|
[
|
||||||
headerHeight,
|
headerHeight,
|
||||||
headerMode,
|
headerMode,
|
||||||
footerMode,
|
|
||||||
setMode,
|
setMode,
|
||||||
startDragOffset,
|
startDragOffset,
|
||||||
startMode,
|
startMode,
|
||||||
didJustRestoreScroll,
|
didJustRestoreScroll,
|
||||||
isFixedBottomBar,
|
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -1,24 +1,18 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {ActivityIndicator, AppState, StyleSheet, View} from 'react-native'
|
import {ActivityIndicator, StyleSheet, View} from 'react-native'
|
||||||
import {useFocusEffect} from '@react-navigation/native'
|
import {useFocusEffect} from '@react-navigation/native'
|
||||||
|
|
||||||
import {PROD_DEFAULT_FEED} from '#/lib/constants'
|
import {PROD_DEFAULT_FEED} from '#/lib/constants'
|
||||||
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
||||||
import {useSetTitle} from '#/lib/hooks/useSetTitle'
|
import {useSetTitle} from '#/lib/hooks/useSetTitle'
|
||||||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
|
||||||
import {logEvent, LogEvents} from '#/lib/statsig/statsig'
|
import {logEvent, LogEvents} from '#/lib/statsig/statsig'
|
||||||
import {useGate} from '#/lib/statsig/statsig'
|
|
||||||
import {emitSoftReset} from '#/state/events'
|
import {emitSoftReset} from '#/state/events'
|
||||||
import {SavedFeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed'
|
import {SavedFeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed'
|
||||||
import {FeedParams} from '#/state/queries/post-feed'
|
import {FeedParams} from '#/state/queries/post-feed'
|
||||||
import {usePreferencesQuery} from '#/state/queries/preferences'
|
import {usePreferencesQuery} from '#/state/queries/preferences'
|
||||||
import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
|
import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
|
||||||
import {useSession} from '#/state/session'
|
import {useSession} from '#/state/session'
|
||||||
import {
|
import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
|
||||||
useMinimalShellMode,
|
|
||||||
useSetDrawerSwipeDisabled,
|
|
||||||
useSetMinimalShellMode,
|
|
||||||
} from '#/state/shell'
|
|
||||||
import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
|
import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
|
||||||
import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
|
import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
|
||||||
import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
|
import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
|
||||||
|
@ -87,7 +81,6 @@ function HomeScreenReady({
|
||||||
const selectedIndex = Math.max(0, maybeFoundIndex)
|
const selectedIndex = Math.max(0, maybeFoundIndex)
|
||||||
const selectedFeed = allFeeds[selectedIndex]
|
const selectedFeed = allFeeds[selectedIndex]
|
||||||
const requestNotificationsPermission = useRequestNotificationsPermission()
|
const requestNotificationsPermission = useRequestNotificationsPermission()
|
||||||
const gate = useGate()
|
|
||||||
|
|
||||||
useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName)
|
useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName)
|
||||||
useOTAUpdates()
|
useOTAUpdates()
|
||||||
|
@ -134,29 +127,6 @@ function HomeScreenReady({
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
const {footerMode} = useMinimalShellMode()
|
|
||||||
const {isMobile} = useWebMediaQueries()
|
|
||||||
useFocusEffect(
|
|
||||||
React.useCallback(() => {
|
|
||||||
if (gate('fixed_bottom_bar')) {
|
|
||||||
// Unnecessary because it's always there.
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const listener = AppState.addEventListener('change', nextAppState => {
|
|
||||||
if (nextAppState === 'active') {
|
|
||||||
if (isMobile && footerMode.value === 1) {
|
|
||||||
// Reveal the bottom bar so you don't miss notifications or messages.
|
|
||||||
// TODO: Experiment with only doing it when unread > 0.
|
|
||||||
setMinimalShellMode(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return () => {
|
|
||||||
listener.remove()
|
|
||||||
}
|
|
||||||
}, [setMinimalShellMode, footerMode, isMobile, gate]),
|
|
||||||
)
|
|
||||||
|
|
||||||
const onPageSelected = React.useCallback(
|
const onPageSelected = React.useCallback(
|
||||||
(index: number) => {
|
(index: number) => {
|
||||||
setMinimalShellMode(false)
|
setMinimalShellMode(false)
|
||||||
|
|
Loading…
Reference in New Issue