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 (