forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Clipclops] Remove viewability config (#3805)
* remove viewability config
* use `onScroll` for keeping track of content offset
+41
-26
+41
-26
src/screens/Messages/Conversation/MessagesList.tsx
+41
-26
src/screens/Messages/Conversation/MessagesList.tsx
···
1
-
import React, {useCallback, useMemo, useRef} from 'react'
2
-
import {FlatList, View, ViewToken} from 'react-native'
1
+
import React, {useCallback, useRef} from 'react'
2
+
import {
3
+
FlatList,
4
+
NativeScrollEvent,
5
+
NativeSyntheticEvent,
6
+
View,
7
+
} from 'react-native'
3
8
import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
9
+
import {msg, Trans} from '@lingui/macro'
10
+
import {useLingui} from '@lingui/react'
4
11
5
12
import {useChat} from '#/state/messages'
6
13
import {ConvoItem, ConvoStatus} from '#/state/messages/convo'
···
25
32
)
26
33
}
27
34
35
+
function RetryButton({onPress}: {onPress: () => unknown}) {
36
+
const {_} = useLingui()
37
+
38
+
return (
39
+
<View style={{alignItems: 'center'}}>
40
+
<Button
41
+
label={_(msg`Press to Retry`)}
42
+
onPress={onPress}
43
+
variant="ghost"
44
+
color="negative"
45
+
size="small">
46
+
<ButtonText>
47
+
<Trans>Press to Retry</Trans>
48
+
</ButtonText>
49
+
</Button>
50
+
</View>
51
+
)
52
+
}
53
+
28
54
function renderItem({item}: {item: ConvoItem}) {
29
55
if (item.type === 'message' || item.type === 'pending-message') {
30
56
return <MessageItem item={item.message} next={item.nextMessage} />
31
57
} else if (item.type === 'deleted-message') {
32
58
return <Text>Deleted message</Text>
33
59
} else if (item.type === 'pending-retry') {
34
-
return (
35
-
<View>
36
-
<Button label="Retry" onPress={item.retry}>
37
-
<ButtonText>Retry</ButtonText>
38
-
</Button>
39
-
</View>
40
-
)
60
+
return <RetryButton onPress={item.retry} />
41
61
}
42
62
43
63
return null
···
56
76
const flatListRef = useRef<FlatList>(null)
57
77
// We use this to know if we should scroll after a new clop is added to the list
58
78
const isAtBottom = useRef(false)
59
-
60
-
const [onViewableItemsChanged, viewabilityConfig] = useMemo(() => {
61
-
return [
62
-
(info: {viewableItems: Array<ViewToken>; changed: Array<ViewToken>}) => {
63
-
const firstVisibleIndex = info.viewableItems[0]?.index
64
-
65
-
isAtBottom.current = Number(firstVisibleIndex) < 2
66
-
},
67
-
{
68
-
itemVisiblePercentThreshold: 50,
69
-
minimumViewTime: 10,
70
-
},
71
-
]
72
-
}, [])
79
+
const currentOffset = React.useRef(0)
73
80
74
81
const onContentSizeChange = useCallback(() => {
75
-
if (isAtBottom.current) {
82
+
if (currentOffset.current <= 100) {
76
83
flatListRef.current?.scrollToOffset({offset: 0, animated: true})
77
84
}
78
85
}, [])
···
98
105
[chat.service],
99
106
)
100
107
108
+
const onScroll = React.useCallback(
109
+
(e: NativeSyntheticEvent<NativeScrollEvent>) => {
110
+
currentOffset.current = e.nativeEvent.contentOffset.y
111
+
},
112
+
[],
113
+
)
114
+
101
115
return (
102
116
<KeyboardAvoidingView
103
117
style={{flex: 1, marginBottom: isWeb ? 20 : 85}}
···
121
135
onEndReached={onEndReached}
122
136
onScrollToIndexFailed={onScrollToEndFailed}
123
137
onContentSizeChange={onContentSizeChange}
124
-
onViewableItemsChanged={onViewableItemsChanged}
125
-
viewabilityConfig={viewabilityConfig}
138
+
onScroll={onScroll}
139
+
// We don't really need to call this much since there are not any animations that rely on this
140
+
scrollEventThrottle={100}
126
141
maintainVisibleContentPosition={{
127
142
minIndexForVisible: 1,
128
143
}}