[🐴] set layout height in `onLayout` (#4135)

* set layout height in `onLayout`

* keep setting it in `onScroll` too
zio/stable
Hailey 2024-05-20 18:03:53 -07:00 committed by GitHub
parent cadc33c625
commit a7c2370680
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 12 deletions

View File

@ -1,5 +1,5 @@
import React, {useCallback, useRef} from 'react' import React, {useCallback, useRef} from 'react'
import {FlatList, View} from 'react-native' import {FlatList, LayoutChangeEvent, View} from 'react-native'
import { import {
KeyboardStickyView, KeyboardStickyView,
useKeyboardHandler, useKeyboardHandler,
@ -292,14 +292,24 @@ export function MessagesList({
) )
// -- List layout changes (opening emoji keyboard, etc.) // -- List layout changes (opening emoji keyboard, etc.)
const onListLayout = React.useCallback(() => { const onListLayout = React.useCallback(
if (isWeb || !keyboardIsOpening.value) { (e: LayoutChangeEvent) => {
flatListRef.current?.scrollToEnd({ layoutHeight.value = e.nativeEvent.layout.height
animated: !layoutScrollWithoutAnimation.value,
}) if (isWeb || !keyboardIsOpening.value) {
layoutScrollWithoutAnimation.value = false flatListRef.current?.scrollToEnd({
} animated: !layoutScrollWithoutAnimation.value,
}, [flatListRef, keyboardIsOpening.value, layoutScrollWithoutAnimation]) })
layoutScrollWithoutAnimation.value = false
}
},
[
flatListRef,
keyboardIsOpening.value,
layoutScrollWithoutAnimation,
layoutHeight,
],
)
const scrollToEndOnPress = React.useCallback(() => { const scrollToEndOnPress = React.useCallback(() => {
flatListRef.current?.scrollToOffset({ flatListRef.current?.scrollToOffset({
@ -347,9 +357,9 @@ export function MessagesList({
footer footer
) : ( ) : (
<> <>
{isConvoActive(convoState) && convoState.items.length === 0 && ( {isConvoActive(convoState) &&
<ChatEmptyPill /> !convoState.isFetchingHistory &&
)} convoState.items.length === 0 && <ChatEmptyPill />}
<MessageInput onSendMessage={onSendMessage} /> <MessageInput onSendMessage={onSendMessage} />
</> </>
)} )}