diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx index 381f5fe4..5fedf062 100644 --- a/src/screens/Messages/Conversation/MessagesList.tsx +++ b/src/screens/Messages/Conversation/MessagesList.tsx @@ -1,6 +1,13 @@ -import React, {useCallback, useMemo, useRef} from 'react' -import {FlatList, View, ViewToken} from 'react-native' +import React, {useCallback, useRef} from 'react' +import { + FlatList, + NativeScrollEvent, + NativeSyntheticEvent, + View, +} from 'react-native' import {KeyboardAvoidingView} from 'react-native-keyboard-controller' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useChat} from '#/state/messages' import {ConvoItem, ConvoStatus} from '#/state/messages/convo' @@ -25,19 +32,32 @@ function MaybeLoader({isLoading}: {isLoading: boolean}) { ) } +function RetryButton({onPress}: {onPress: () => unknown}) { + const {_} = useLingui() + + return ( + + + + ) +} + function renderItem({item}: {item: ConvoItem}) { if (item.type === 'message' || item.type === 'pending-message') { return } else if (item.type === 'deleted-message') { return Deleted message } else if (item.type === 'pending-retry') { - return ( - - - - ) + return } return null @@ -56,23 +76,10 @@ export function MessagesList() { const flatListRef = useRef(null) // We use this to know if we should scroll after a new clop is added to the list const isAtBottom = useRef(false) - - const [onViewableItemsChanged, viewabilityConfig] = useMemo(() => { - return [ - (info: {viewableItems: Array; changed: Array}) => { - const firstVisibleIndex = info.viewableItems[0]?.index - - isAtBottom.current = Number(firstVisibleIndex) < 2 - }, - { - itemVisiblePercentThreshold: 50, - minimumViewTime: 10, - }, - ] - }, []) + const currentOffset = React.useRef(0) const onContentSizeChange = useCallback(() => { - if (isAtBottom.current) { + if (currentOffset.current <= 100) { flatListRef.current?.scrollToOffset({offset: 0, animated: true}) } }, []) @@ -98,6 +105,13 @@ export function MessagesList() { [chat.service], ) + const onScroll = React.useCallback( + (e: NativeSyntheticEvent) => { + currentOffset.current = e.nativeEvent.contentOffset.y + }, + [], + ) + return (