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({
onEnd: e => {
'worklet'
runOnJS(setKeyboardHeight)(e.height)
useKeyboardHandler(
{
onEnd: e => {
'worklet'
runOnJS(setKeyboardHeight)(e.height)
},
},
})
[],
)
const basePading =
(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.
const layoutScrollWithoutAnimation = useSharedValue(false)
useKeyboardHandler({
onStart: e => {
'worklet'
// Immediate updates - like opening the emoji picker - will have a duration of zero. In those cases, we should
// just update the height here instead of having the `onMove` event do it (that event will not fire!)
if (e.duration === 0) {
layoutScrollWithoutAnimation.set(true)
useKeyboardHandler(
{
onStart: e => {
'worklet'
// Immediate updates - like opening the emoji picker - will have a duration of zero. In those cases, we should
// just update the height here instead of having the `onMove` event do it (that event will not fire!)
if (e.duration === 0) {
layoutScrollWithoutAnimation.set(true)
keyboardHeight.set(e.height)
} else {
keyboardIsOpening.set(true)
}
},
onMove: e => {
'worklet'
keyboardHeight.set(e.height)
} else {
keyboardIsOpening.set(true)
}
if (e.height > bottomOffset) {
scrollTo(flatListRef, 0, 1e7, false)
}
},
onEnd: () => {
'worklet'
keyboardIsOpening.set(false)
},
},
onMove: e => {
'worklet'
keyboardHeight.set(e.height)
if (e.height > bottomOffset) {
scrollTo(flatListRef, 0, 1e7, false)
}
},
onEnd: () => {
'worklet'
keyboardIsOpening.set(false)
},
})
[bottomOffset],
)
const animatedListStyle = useAnimatedStyle(() => ({
marginBottom: