[🐴] set layout height in `onLayout` (#4135)
* set layout height in `onLayout` * keep setting it in `onScroll` toozio/stable
parent
cadc33c625
commit
a7c2370680
|
@ -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(
|
||||||
|
(e: LayoutChangeEvent) => {
|
||||||
|
layoutHeight.value = e.nativeEvent.layout.height
|
||||||
|
|
||||||
if (isWeb || !keyboardIsOpening.value) {
|
if (isWeb || !keyboardIsOpening.value) {
|
||||||
flatListRef.current?.scrollToEnd({
|
flatListRef.current?.scrollToEnd({
|
||||||
animated: !layoutScrollWithoutAnimation.value,
|
animated: !layoutScrollWithoutAnimation.value,
|
||||||
})
|
})
|
||||||
layoutScrollWithoutAnimation.value = false
|
layoutScrollWithoutAnimation.value = false
|
||||||
}
|
}
|
||||||
}, [flatListRef, keyboardIsOpening.value, layoutScrollWithoutAnimation])
|
},
|
||||||
|
[
|
||||||
|
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} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue