[Experiment] Always show bottom bar (#4946)
parent
a5af24b53b
commit
40ab67fc4b
|
@ -2,6 +2,7 @@ import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
|
||||||
|
|
||||||
import {useMinimalShellMode} from '#/state/shell/minimal-mode'
|
import {useMinimalShellMode} from '#/state/shell/minimal-mode'
|
||||||
import {useShellLayout} from '#/state/shell/shell-layout'
|
import {useShellLayout} from '#/state/shell/shell-layout'
|
||||||
|
import {useGate} from '../statsig/statsig'
|
||||||
|
|
||||||
// Keep these separated so that we only pay for useAnimatedStyle that gets used.
|
// Keep these separated so that we only pay for useAnimatedStyle that gets used.
|
||||||
|
|
||||||
|
@ -27,8 +28,13 @@ export function useMinimalShellHeaderTransform() {
|
||||||
export function useMinimalShellFooterTransform() {
|
export function useMinimalShellFooterTransform() {
|
||||||
const mode = useMinimalShellMode()
|
const mode = useMinimalShellMode()
|
||||||
const {footerHeight} = useShellLayout()
|
const {footerHeight} = useShellLayout()
|
||||||
|
const gate = useGate()
|
||||||
|
const isFixedBottomBar = gate('fixed_bottom_bar')
|
||||||
|
|
||||||
const footerTransform = useAnimatedStyle(() => {
|
const footerTransform = useAnimatedStyle(() => {
|
||||||
|
if (isFixedBottomBar) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
pointerEvents: mode.value === 0 ? 'auto' : 'none',
|
pointerEvents: mode.value === 0 ? 'auto' : 'none',
|
||||||
opacity: Math.pow(1 - mode.value, 2),
|
opacity: Math.pow(1 - mode.value, 2),
|
||||||
|
@ -39,13 +45,25 @@ export function useMinimalShellFooterTransform() {
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return footerTransform
|
return footerTransform
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useMinimalShellFabTransform() {
|
export function useMinimalShellFabTransform() {
|
||||||
const mode = useMinimalShellMode()
|
const mode = useMinimalShellMode()
|
||||||
|
const gate = useGate()
|
||||||
|
const isFixedBottomBar = gate('fixed_bottom_bar')
|
||||||
|
|
||||||
const fabTransform = useAnimatedStyle(() => {
|
const fabTransform = useAnimatedStyle(() => {
|
||||||
|
if (isFixedBottomBar) {
|
||||||
|
return {
|
||||||
|
transform: [
|
||||||
|
{
|
||||||
|
translateY: -44,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
transform: [
|
transform: [
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
export type Gate =
|
export type Gate =
|
||||||
// Keep this alphabetic please.
|
// Keep this alphabetic please.
|
||||||
| 'debug_show_feedcontext'
|
| 'debug_show_feedcontext'
|
||||||
|
| 'fixed_bottom_bar'
|
||||||
| 'new_user_guided_tour'
|
| 'new_user_guided_tour'
|
||||||
| 'onboarding_minimum_interests'
|
| 'onboarding_minimum_interests'
|
||||||
| 'show_follow_back_label_v2'
|
| 'show_follow_back_label_v2'
|
||||||
|
|
|
@ -7,6 +7,7 @@ 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 {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 {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
|
import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
|
||||||
|
@ -88,6 +89,7 @@ function HomeScreenReady({
|
||||||
const selectedFeed = allFeeds[selectedIndex]
|
const selectedFeed = allFeeds[selectedIndex]
|
||||||
const requestNotificationsPermission = useRequestNotificationsPermission()
|
const requestNotificationsPermission = useRequestNotificationsPermission()
|
||||||
const triggerTourIfQueued = useTriggerTourIfQueued(TOURS.HOME)
|
const triggerTourIfQueued = useTriggerTourIfQueued(TOURS.HOME)
|
||||||
|
const gate = useGate()
|
||||||
|
|
||||||
useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName)
|
useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName)
|
||||||
useOTAUpdates()
|
useOTAUpdates()
|
||||||
|
@ -169,6 +171,10 @@ function HomeScreenReady({
|
||||||
const {isMobile} = useWebMediaQueries()
|
const {isMobile} = useWebMediaQueries()
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
React.useCallback(() => {
|
React.useCallback(() => {
|
||||||
|
if (gate('fixed_bottom_bar')) {
|
||||||
|
// Unnecessary because it's always there.
|
||||||
|
return
|
||||||
|
}
|
||||||
const listener = AppState.addEventListener('change', nextAppState => {
|
const listener = AppState.addEventListener('change', nextAppState => {
|
||||||
if (nextAppState === 'active') {
|
if (nextAppState === 'active') {
|
||||||
if (isMobile && mode.value === 1) {
|
if (isMobile && mode.value === 1) {
|
||||||
|
@ -181,7 +187,7 @@ function HomeScreenReady({
|
||||||
return () => {
|
return () => {
|
||||||
listener.remove()
|
listener.remove()
|
||||||
}
|
}
|
||||||
}, [setMinimalShellMode, mode, isMobile]),
|
}, [setMinimalShellMode, mode, isMobile, gate]),
|
||||||
)
|
)
|
||||||
|
|
||||||
const onPageSelected = React.useCallback(
|
const onPageSelected = React.useCallback(
|
||||||
|
|
Loading…
Reference in New Issue