[Experiment] Always show bottom bar (#4946)

3 files changed, 26 insertions, 1 deletions

diff --git a/src/lib/hooks/useMinimalShellTransform.ts b/src/lib/hooks/useMinimalShellTransform.ts
index 9875840d6..17fe058e9 100644
--- a/src/lib/hooks/useMinimalShellTransform.ts
+++ b/src/lib/hooks/useMinimalShellTransform.ts
@@ -2,6 +2,7 @@ import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
 
 import {useMinimalShellMode} from '#/state/shell/minimal-mode'
 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.
 
@@ -27,8 +28,13 @@ export function useMinimalShellHeaderTransform() {
 export function useMinimalShellFooterTransform() {
   const mode = useMinimalShellMode()
   const {footerHeight} = useShellLayout()
+  const gate = useGate()
+  const isFixedBottomBar = gate('fixed_bottom_bar')
 
   const footerTransform = useAnimatedStyle(() => {
+    if (isFixedBottomBar) {
+      return {}
+    }
     return {
       pointerEvents: mode.value === 0 ? 'auto' : 'none',
       opacity: Math.pow(1 - mode.value, 2),
@@ -39,13 +45,25 @@ export function useMinimalShellFooterTransform() {
       ],
     }
   })
+
   return footerTransform
 }
 
 export function useMinimalShellFabTransform() {
   const mode = useMinimalShellMode()
+  const gate = useGate()
+  const isFixedBottomBar = gate('fixed_bottom_bar')
 
   const fabTransform = useAnimatedStyle(() => {
+    if (isFixedBottomBar) {
+      return {
+        transform: [
+          {
+            translateY: -44,
+          },
+        ],
+      }
+    }
     return {
       transform: [
         {
diff --git a/src/lib/statsig/gates.ts b/src/lib/statsig/gates.ts
index 492d09e95..0f92cd14a 100644
--- a/src/lib/statsig/gates.ts
+++ b/src/lib/statsig/gates.ts
@@ -1,6 +1,7 @@
 export type Gate =
   // Keep this alphabetic please.
   | 'debug_show_feedcontext'
+  | 'fixed_bottom_bar'
   | 'new_user_guided_tour'
   | 'onboarding_minimum_interests'
   | 'show_follow_back_label_v2'
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 6ee8b3ada..9a47007c4 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -7,6 +7,7 @@ import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {useSetTitle} from '#/lib/hooks/useSetTitle'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {logEvent, LogEvents} from '#/lib/statsig/statsig'
+import {useGate} from '#/lib/statsig/statsig'
 import {emitSoftReset} from '#/state/events'
 import {SavedFeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed'
 import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
@@ -88,6 +89,7 @@ function HomeScreenReady({
   const selectedFeed = allFeeds[selectedIndex]
   const requestNotificationsPermission = useRequestNotificationsPermission()
   const triggerTourIfQueued = useTriggerTourIfQueued(TOURS.HOME)
+  const gate = useGate()
 
   useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName)
   useOTAUpdates()
@@ -169,6 +171,10 @@ function HomeScreenReady({
   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 && mode.value === 1) {
@@ -181,7 +187,7 @@ function HomeScreenReady({
       return () => {
         listener.remove()
       }
-    }, [setMinimalShellMode, mode, isMobile]),
+    }, [setMinimalShellMode, mode, isMobile, gate]),
   )
 
   const onPageSelected = React.useCallback(