fix: keyboard handler memoization (#6719)

* fix: keyboard handler memoization

* fix: return missing dependency
This commit is contained in:
Kirill Zyusko
2024-11-25 16:03:55 +01:00
committed by GitHub
parent 5164ca6288
commit 723bbfc58a
2 changed files with 33 additions and 27 deletions
+8 -5
View File
@@ -214,12 +214,15 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
} }
}) })
useKeyboardHandler({ useKeyboardHandler(
onEnd: e => { {
'worklet' onEnd: e => {
runOnJS(setKeyboardHeight)(e.height) 'worklet'
runOnJS(setKeyboardHeight)(e.height)
},
}, },
}) [],
)
const basePading = const basePading =
(isIOS ? 30 : 50) + (isIOS ? keyboardHeight / 4 : keyboardHeight) (isIOS ? 30 : 50) + (isIOS ? keyboardHeight / 4 : keyboardHeight)
@@ -250,30 +250,33 @@ export function MessagesList({
// We use this value to keep track of when we want to disable the animation. // We use this value to keep track of when we want to disable the animation.
const layoutScrollWithoutAnimation = useSharedValue(false) const layoutScrollWithoutAnimation = useSharedValue(false)
useKeyboardHandler({ useKeyboardHandler(
onStart: e => { {
'worklet' onStart: e => {
// Immediate updates - like opening the emoji picker - will have a duration of zero. In those cases, we should 'worklet'
// just update the height here instead of having the `onMove` event do it (that event will not fire!) // Immediate updates - like opening the emoji picker - will have a duration of zero. In those cases, we should
if (e.duration === 0) { // just update the height here instead of having the `onMove` event do it (that event will not fire!)
layoutScrollWithoutAnimation.set(true) if (e.duration === 0) {
layoutScrollWithoutAnimation.set(true)
keyboardHeight.set(e.height)
} else {
keyboardIsOpening.set(true)
}
},
onMove: e => {
'worklet'
keyboardHeight.set(e.height) keyboardHeight.set(e.height)
} else { if (e.height > bottomOffset) {
keyboardIsOpening.set(true) scrollTo(flatListRef, 0, 1e7, false)
} }
},
onEnd: () => {
'worklet'
keyboardIsOpening.set(false)
},
}, },
onMove: e => { [bottomOffset],
'worklet' )
keyboardHeight.set(e.height)
if (e.height > bottomOffset) {
scrollTo(flatListRef, 0, 1e7, false)
}
},
onEnd: () => {
'worklet'
keyboardIsOpening.set(false)
},
})
const animatedListStyle = useAnimatedStyle(() => ({ const animatedListStyle = useAnimatedStyle(() => ({
marginBottom: marginBottom: