Skip to content

Commit

Permalink
Mobile chats scrolling improvements (#3153)
Browse files Browse the repository at this point in the history
  • Loading branch information
dharit-tan authored Apr 4, 2023
1 parent e820e3f commit 3ae27d1
Showing 1 changed file with 26 additions and 13 deletions.
39 changes: 26 additions & 13 deletions packages/mobile/src/screens/chat-screen/ChatScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -142,16 +142,22 @@ export const ChatScreen = () => {
const styles = useStyles()
const palette = useThemePalette()
const dispatch = useDispatch()
const navigation = useNavigation<AppTabScreenParamList>()

const { params } = useRoute<'Chat'>()
const { chatId } = params
const url = `/chat/${encodeUrlName(chatId ?? '')}`

const [shouldShowPopup, setShouldShowPopup] = useState(false)
const hasScrolledToUnreadTag = useRef(false)
const [popupChatIndex, setPopupChatIndex] = useState<number | null>(null)
const flatListRef = useRef<FlatListT<ChatMessage>>(null)
const itemsRef = useRef<(View | null)[]>([])
const composeRef = useRef<View | null>(null)
const chatContainerRef = useRef<View | null>(null)
const messageTop = useRef(0)
const chatContainerBottom = useRef(0)
const chatContainerTop = useRef(0)
const [popupChatIndex, setPopupChatIndex] = useState<number | null>(null)
const navigation = useNavigation<AppTabScreenParamList>()
const chatContainerBottom = useRef(0)

const userId = useSelector(getUserId)
const userIdEncoded = encodeHashId(userId)
Expand All @@ -160,10 +166,6 @@ export const ChatScreen = () => {
const chatMessages = useSelector((state) =>
getChatMessages(state, chatId ?? '')
)
const flatListRef = useRef<FlatListT<ChatMessage>>(null)
const itemsRef = useRef<(View | null)[]>([])
const composeRef = useRef<View | null>(null)
const chatContainerRef = useRef<View | null>(null)
const unreadCount = chat?.unread_message_count ?? 0
const isLoading =
chat?.messagesStatus === Status.LOADING && chatMessages?.length === 0
Expand Down Expand Up @@ -209,17 +211,21 @@ export const ChatScreen = () => {
)

useEffect(() => {
// Scroll to earliest unread index, but only the first time
// entering this chat.
if (
earliestUnreadIndex &&
chatMessages &&
earliestUnreadIndex > 0 &&
earliestUnreadIndex < chatMessages.length
earliestUnreadIndex < chatMessages.length &&
!hasScrolledToUnreadTag.current
) {
flatListRef.current?.scrollToIndex({
index: earliestUnreadIndex,
viewPosition: 0.5,
viewPosition: 0.95,
animated: false
})
hasScrolledToUnreadTag.current = true
}
}, [earliestUnreadIndex, chatMessages])

Expand All @@ -228,7 +234,7 @@ export const ChatScreen = () => {
setTimeout(() => {
flatListRef.current?.scrollToIndex({
index: e.index,
viewPosition: 0.5,
viewPosition: 0.95,
animated: false
})
}, 10)
Expand Down Expand Up @@ -276,14 +282,14 @@ export const ChatScreen = () => {
if (index < 0 || index >= chatMessages.length) {
return
}
const popupViewRef = itemsRef.current[index]
if (popupViewRef === null || popupViewRef === undefined) {
const messageRef = itemsRef.current[index]
if (messageRef === null || messageRef === undefined) {
return
}
// Measure position of selected message to create a copy of it on top
// of the dimmed background inside the portal.
const messageY = await new Promise<number>((resolve) => {
popupViewRef.measureInWindow((x, y, width, height) => {
messageRef.measureInWindow((x, y, width, height) => {
resolve(y)
})
})
Expand Down Expand Up @@ -400,6 +406,13 @@ export const ChatScreen = () => {
ref={flatListRef}
onScrollToIndexFailed={handleScrollToIndexFailed}
refreshing={chat?.messagesStatus === Status.LOADING}
maintainVisibleContentPosition={{
minIndexForVisible: 0,
autoscrollToTopThreshold:
(chatContainerBottom.current -
chatContainerTop.current) /
4
}}
/>
</View>
) : (
Expand Down

0 comments on commit 3ae27d1

Please sign in to comment.