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

Hide/show header and footer without re-renders, take two (#1849)

Browse source 
* Remove callsites using the state value

* Remove unused code

* Change shell mode without re-renders

* Adjust "write your reply" for mode
This commit is contained in:
dan 2023-11-09 00:25:27 +00:00 • committed by GitHub
parent bd531f2344
commit 82059b7ee1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 63 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,60 +1,61 @@
import React from 'react'
import {autorun} from 'mobx'
import {
Easing,
AnimatableValue,
interpolate,
useAnimatedStyle,
useSharedValue,
withTiming,
Easing,
} 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),
})
}
export function useMinimalShellMode() {
const minimalShellMode = useMinimalShellModeState()
const minimalShellInterp = useSharedValue(0)
const mode = useMinimalShellModeState()
const footerMinimalShellTransform = useAnimatedStyle(() => {
return {
opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
pointerEvents: mode.value ? 'none' : 'auto',
opacity: withShellTiming(interpolate(mode.value ? 1 : 0, [0, 1], [1, 0])),
transform: [
{translateY: interpolate(minimalShellInterp.value, [0, 1], [0, 25])},
{
translateY: withShellTiming(
interpolate(mode.value ? 1 : 0, [0, 1], [0, 25]),
),
},
],
}
})
const headerMinimalShellTransform = useAnimatedStyle(() => {
return {
opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
pointerEvents: mode.value ? 'none' : 'auto',
opacity: withShellTiming(interpolate(mode.value ? 1 : 0, [0, 1], [1, 0])),
transform: [
{translateY: interpolate(minimalShellInterp.value, [0, 1], [0, -25])},
{
translateY: withShellTiming(
interpolate(mode.value ? 1 : 0, [0, 1], [0, -25]),
),
},
],
}
})
const fabMinimalShellTransform = useAnimatedStyle(() => {
return {
transform: [
{translateY: interpolate(minimalShellInterp.value, [0, 1], [-44, 0])},
{
translateY: withShellTiming(
interpolate(mode.value ? 1 : 0, [0, 1], [-44, 0]),
),
},
],
}
})
React.useEffect(() => {
return autorun(() => {
if (minimalShellMode) {
minimalShellInterp.value = withTiming(1, {
duration: 125,
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
})
} else {
minimalShellInterp.value = withTiming(0, {
duration: 125,
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
})
}
})
}, [minimalShellInterp, minimalShellMode])
return {
minimalShellMode,
footerMinimalShellTransform,
headerMinimalShellTransform,
fabMinimalShellTransform,

7
src/lib/hooks/useOnMainScroll.ts
View file

@ -33,9 +33,12 @@ export function useOnMainScroll(): [OnScrollCb, boolean, ResetCb] {
const dy = y - (lastY.current || 0)
lastY.current = y
if (!minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
if (!minimalShellMode.value && dy > dyLimitDown && y > Y_LIMIT) {
setMinimalShellMode(true)
} else if (minimalShellMode && (dy < dyLimitUp * -1 || y <= Y_LIMIT)) {
} else if (
minimalShellMode.value &&
(dy < dyLimitUp * -1 || y <= Y_LIMIT)
) {
setMinimalShellMode(false)
}