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

Sync top/bottom bar disappearance to the scroll (#1855)

Browse source 
* Disable existing code that toggles shell

* Make shell mode a float

* Translate based on the gesture

* Track header and footer heights

* Add web support

* Fix types and cleanup

* Add back isScrolled logic

* Add comments
This commit is contained in:
dan 2023-11-09 20:15:05 +00:00 • committed by GitHub
parent 1dcf882619
commit 7a55ca6133
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 183 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/lib/hooks/useMinimalShellMode.tsx
View file

@ -1,45 +1,29 @@
import {
AnimatableValue,
interpolate,
useAnimatedStyle,
withTiming,
Easing,
} from 'react-native-reanimated'
import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode'
function withShellTiming<T extends AnimatableValue>(value: T): T {
'worklet'
return withTiming(value, {
duration: 125,
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
})
}
import {useShellLayout} from '#/state/shell/shell-layout'
export function useMinimalShellMode() {
const mode = useMinimalShellModeState()
const {footerHeight, headerHeight} = useShellLayout()
const footerMinimalShellTransform = useAnimatedStyle(() => {
return {
pointerEvents: mode.value ? 'none' : 'auto',
opacity: withShellTiming(interpolate(mode.value ? 1 : 0, [0, 1], [1, 0])),
pointerEvents: mode.value === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - mode.value, 2),
transform: [
{
translateY: withShellTiming(
interpolate(mode.value ? 1 : 0, [0, 1], [0, 25]),
),
translateY: interpolate(mode.value, [0, 1], [0, footerHeight.value]),
},
],
}
})
const headerMinimalShellTransform = useAnimatedStyle(() => {
return {
pointerEvents: mode.value ? 'none' : 'auto',
opacity: withShellTiming(interpolate(mode.value ? 1 : 0, [0, 1], [1, 0])),
pointerEvents: mode.value === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - mode.value, 2),
transform: [
{
translateY: withShellTiming(
interpolate(mode.value ? 1 : 0, [0, 1], [0, -25]),
),
translateY: interpolate(mode.value, [0, 1], [0, -headerHeight.value]),
},
],
}
@ -48,9 +32,7 @@ export function useMinimalShellMode() {
return {
transform: [
{
translateY: withShellTiming(
interpolate(mode.value ? 1 : 0, [0, 1], [-44, 0]),
),
translateY: interpolate(mode.value, [0, 1], [-44, 0]),
},
],
}