Improve chat performance (#6157)

* fix worklet funcs on gestures

* don't access .value in render
This commit is contained in:
Samuel Newman
2024-11-08 03:38:32 +00:00
committed by GitHub
parent 22dd4947f7
commit 468c4b8f5a
3 changed files with 8 additions and 9 deletions
+2 -1
View File
@@ -53,9 +53,11 @@ export function ActionsWrapper({
.numberOfTaps(2) .numberOfTaps(2)
.hitSlop(HITSLOP_10) .hitSlop(HITSLOP_10)
.onEnd(open) .onEnd(open)
.runOnJS(true)
const pressAndHoldGesture = Gesture.LongPress() const pressAndHoldGesture = Gesture.LongPress()
.onStart(() => { .onStart(() => {
'worklet'
scale.value = withTiming(1.05, {duration: 200}, finished => { scale.value = withTiming(1.05, {duration: 200}, finished => {
if (!finished) return if (!finished) return
runOnJS(open)() runOnJS(open)()
@@ -65,7 +67,6 @@ export function ActionsWrapper({
.onTouchesUp(shrink) .onTouchesUp(shrink)
.onTouchesMove(shrink) .onTouchesMove(shrink)
.cancelsTouchesInView(false) .cancelsTouchesInView(false)
.runOnJS(true)
const composedGestures = Gesture.Exclusive( const composedGestures = Gesture.Exclusive(
doubleTapGesture, doubleTapGesture,
-2
View File
@@ -127,9 +127,7 @@ function Inner() {
setHasScrolled={setHasScrolled} setHasScrolled={setHasScrolled}
/> />
) : ( ) : (
<>
<View style={[a.align_center, a.gap_sm, a.flex_1]} /> <View style={[a.align_center, a.gap_sm, a.flex_1]} />
</>
)} )}
{!readyToShow && ( {!readyToShow && (
<View <View
@@ -202,9 +202,9 @@ export function MessagesList({
convoState.items.length, convoState.items.length,
// these are stable // these are stable
flatListRef, flatListRef,
isAtTop.value, isAtTop,
isAtBottom.value, isAtBottom,
layoutHeight.value, layoutHeight,
], ],
) )
@@ -212,7 +212,7 @@ export function MessagesList({
if (hasScrolled && prevContentHeight.current > layoutHeight.value) { if (hasScrolled && prevContentHeight.current > layoutHeight.value) {
convoState.fetchMessageHistory() convoState.fetchMessageHistory()
} }
}, [convoState, hasScrolled, layoutHeight.value]) }, [convoState, hasScrolled, layoutHeight])
const onScroll = React.useCallback( const onScroll = React.useCallback(
(e: ReanimatedScrollEvent) => { (e: ReanimatedScrollEvent) => {
@@ -374,7 +374,7 @@ export function MessagesList({
}, },
[ [
flatListRef, flatListRef,
keyboardIsOpening.value, keyboardIsOpening,
layoutScrollWithoutAnimation, layoutScrollWithoutAnimation,
layoutHeight, layoutHeight,
], ],