zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Fix fixed footer experiment (#4969)

Browse source 
* Split minimal shell mode into headerMode and footerMode

For now, we'll always write them in sync. When we read them, we'll use headerMode as source of truth. This will let us keep footerMode independent in a future commit.

* Remove fixed_bottom_bar special cases during calculation

This isn't the right time to determine special behavior. Instead we'll adjust footerMode itself conditionally on the gate.

* Copy-paste setMode into MainScrollProvider

This lets us fork the implementation later just for this case.

* Gate footer adjustment in MainScrollProvider

This is the final piece. Normal calls to setMode() keep setting both header and footer, but MainScrollProvider adjusts the footer conditionally.
This commit is contained in:
dan 2024-08-22 23:27:33 +01:00 • committed by GitHub
parent 2ae3ffcf78
commit b8dbb71781
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 95 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/lib/hooks/useMinimalShellTransform.ts
View file

@ -2,21 +2,24 @@ 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.
export function useMinimalShellHeaderTransform() {
const mode = useMinimalShellMode()
const {headerMode} = useMinimalShellMode()
const {headerHeight} = useShellLayout()
const headerTransform = useAnimatedStyle(() => {
return {
pointerEvents: mode.value === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - mode.value, 2),
pointerEvents: headerMode.value === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - headerMode.value, 2),
transform: [
{
translateY: interpolate(mode.value, [0, 1], [0, -headerHeight.value]),
translateY: interpolate(
headerMode.value,
[0, 1],
[0, -headerHeight.value],
),
},
],
}
@ -26,21 +29,20 @@ export function useMinimalShellHeaderTransform() {
}
export function useMinimalShellFooterTransform() {
const mode = useMinimalShellMode()
const {footerMode} = 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),
pointerEvents: footerMode.value === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - footerMode.value, 2),
transform: [
{
translateY: interpolate(mode.value, [0, 1], [0, footerHeight.value]),
translateY: interpolate(
footerMode.value,
[0, 1],
[0, footerHeight.value],
),
},
],
}
@ -50,24 +52,13 @@ export function useMinimalShellFooterTransform() {
}
export function useMinimalShellFabTransform() {
const mode = useMinimalShellMode()
const gate = useGate()
const isFixedBottomBar = gate('fixed_bottom_bar')
const {footerMode} = useMinimalShellMode()
const fabTransform = useAnimatedStyle(() => {
if (isFixedBottomBar) {
return {
transform: [
{
translateY: -44,
},
],
}
}
return {
transform: [
{
translateY: interpolate(mode.value, [0, 1], [-44, 0]),
translateY: interpolate(footerMode.value, [0, 1], [-44, 0]),
},
],
}