forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[🐴] Adjust content height whenever the emoji picker keyboard is opened or closed (#4120)
* properly resize whenever the emoji keyboard is opened
* properly resize whenever the emoji keyboard is opened
+18
-5
+18
-5
src/screens/Messages/Conversation/MessagesList.tsx
+18
-5
src/screens/Messages/Conversation/MessagesList.tsx
···
226
226
const keyboardHeight = useSharedValue(0)
227
227
const keyboardIsOpening = useSharedValue(false)
228
228
229
+
// In some cases - like when the emoji piker opens - we don't want to animate the scroll in the list onLayout event.
230
+
// We use this value to keep track of when we want to disable the animation.
231
+
const layoutScrollWithoutAnimation = useSharedValue(false)
232
+
229
233
useKeyboardHandler({
230
-
onStart: () => {
234
+
onStart: e => {
231
235
'worklet'
232
-
keyboardIsOpening.value = true
236
+
// Immediate updates - like opening the emoji picker - will have a duration of zero. In those cases, we should
237
+
// just update the height here instead of having the `onMove` event do it (that event will not fire!)
238
+
if (e.duration === 0) {
239
+
layoutScrollWithoutAnimation.value = true
240
+
keyboardHeight.value = e.height
241
+
} else {
242
+
keyboardIsOpening.value = true
243
+
}
233
244
},
234
245
onMove: e => {
235
246
'worklet'
···
277
288
278
289
// -- List layout changes (opening emoji keyboard, etc.)
279
290
const onListLayout = React.useCallback(() => {
280
-
if (keyboardIsOpening.value) return
281
291
if (isWeb || !keyboardIsOpening.value) {
282
-
flatListRef.current?.scrollToEnd({animated: true})
292
+
flatListRef.current?.scrollToEnd({
293
+
animated: !layoutScrollWithoutAnimation.value,
294
+
})
295
+
layoutScrollWithoutAnimation.value = false
283
296
}
284
-
}, [flatListRef, keyboardIsOpening.value])
297
+
}, [flatListRef, keyboardIsOpening.value, layoutScrollWithoutAnimation])
285
298
286
299
const scrollToEndOnPress = React.useCallback(() => {
287
300
flatListRef.current?.scrollToOffset({