feat(a11y): use FlashList to fix inverted screen reader focus

app/containers/message/index.tsx

@@ -451,6 +451,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 					translateLanguage: canTranslateMessage ? autoTranslateLanguage : undefined,
 					isEncrypted: this.isEncrypted
 				}}>
+				<MessageSeparator ts={dateSeparator} unread={showUnreadSeparator} />
 				{/* @ts-ignore*/}
 				<Message
 					id={id}
@@ -507,7 +508,6 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 					pinned={pinned}
 					autoTranslateLanguage={autoTranslateLanguage}
 				/>
-				<MessageSeparator ts={dateSeparator} unread={showUnreadSeparator} />
 			</MessageContext.Provider>
 		);
 	}

app/views/RoomView/List/components/List.tsx

@@ -1,11 +1,9 @@
-import React, { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import Animated, { runOnJS, useAnimatedScrollHandler } from 'react-native-reanimated';
+import React, { useEffect, useMemo, useState } from 'react';
+import { type NativeScrollEvent, type NativeSyntheticEvent, StyleSheet, View, Keyboard } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
 
-import { isIOS } from '../../../../lib/methods/helpers';
-import scrollPersistTaps from '../../../../lib/methods/helpers/scrollPersistTaps';
-import NavBottomFAB from './NavBottomFAB';
 import { type IListProps } from '../definitions';
+import NavBottomFAB from './NavBottomFAB';
 import { SCROLL_LIMIT } from '../constants';
 import { useRoomContext } from '../../context';
 
@@ -21,37 +19,54 @@ const styles = StyleSheet.create({
 const List = ({ listRef, jumpToBottom, ...props }: IListProps) => {
 	const [visible, setVisible] = useState(false);
 	const { isAutocompleteVisible } = useRoomContext();
-	const scrollHandler = useAnimatedScrollHandler({
-		onScroll: event => {
-			if (event.contentOffset.y > SCROLL_LIMIT) {
-				runOnJS(setVisible)(true);
-			} else {
-				runOnJS(setVisible)(false);
-			}
+
+	const maintainVisibleContentPositionConfig = useMemo(
+		() => ({
+			autoscrollToBottomThreshold: 0.05,
+			startRenderingFromBottom: true,
+			animateAutoScrollToBottom: true
+		}),
+		[]
+	);
+
+	const onScrollHandler = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+		const currentScroll = Math.round(e.nativeEvent?.contentSize?.height) - Math.round(e.nativeEvent?.contentOffset.y);
+		const layoutLimit = e.nativeEvent.layoutMeasurement.height + SCROLL_LIMIT;
+
+		if (layoutLimit < currentScroll) {
+			setVisible(true);
+		} else {
+			setVisible(false);
 		}
-	});
+	};
+
+	// Scroll to end when keyboard opens
+	useEffect(() => {
+		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+			if (listRef?.current) {
+				listRef.current.scrollToEnd({ animated: true });
+			}
+		});
+
+		return () => {
+			keyboardDidShowListener.remove();
+		};
+	}, [listRef]);
 
 	return (
 		<View style={styles.list}>
-			{/* @ts-ignore */}
-			<Animated.FlatList
+			<FlashList
+				ref={listRef}
 				accessibilityElementsHidden={isAutocompleteVisible}
 				importantForAccessibility={isAutocompleteVisible ? 'no-hide-descendants' : 'yes'}
 				testID='room-view-messages'
-				ref={listRef}
-				keyExtractor={item => item.id}
 				contentContainerStyle={styles.contentContainer}
 				style={styles.list}
-				inverted
-				removeClippedSubviews={isIOS}
-				initialNumToRender={7}
-				onEndReachedThreshold={0.5}
-				maxToRenderPerBatch={5}
-				windowSize={10}
+				onScroll={onScrollHandler}
 				scrollEventThrottle={16}
-				onScroll={scrollHandler}
+				keyboardShouldPersistTaps='handled'
+				maintainVisibleContentPosition={maintainVisibleContentPositionConfig}
 				{...props}
-				{...scrollPersistTaps}
 			/>
 			<NavBottomFAB visible={visible} onPress={jumpToBottom} />
 		</View>

app/views/RoomView/List/definitions.ts

@@ -1,14 +1,13 @@
 import { type RefObject } from 'react';
-import { type FlatListProps } from 'react-native';
-import { type FlatList } from 'react-native-gesture-handler';
+import { type FlashListProps, type FlashListRef } from '@shopify/flash-list';
 
 import { type TAnyMessageModel } from '../../../definitions';
 
-export type TListRef = RefObject<FlatList<TAnyMessageModel> | null>;
+export type TListRef = RefObject<FlashListRef<TAnyMessageModel>> | undefined;
 
 export type TMessagesIdsRef = RefObject<string[]>;
 
-export interface IListProps extends FlatListProps<TAnyMessageModel> {
+export interface IListProps extends FlashListProps<TAnyMessageModel> {
 	listRef: TListRef;
 	jumpToBottom: () => void;
 }

app/views/RoomView/List/hooks/useMessages.ts

@@ -81,7 +81,8 @@ export const useMessages = ({
 			}
 
 			readThread();
-			setMessages(newMessages);
+			const reversedList = newMessages.reverse();
+			setMessages(reversedList);
 			messagesIds.current = newMessages.map(m => m.id);
 		});
 	}, [rid, tmid, showMessageInMainThread, serverVersion, hideSystemMessages]);

app/views/RoomView/List/hooks/useScroll.ts

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { type ViewToken, type ViewabilityConfigCallbackPairs } from 'react-native';
+import { type ViewToken } from 'react-native';
 
-import { type IListContainerRef, type IListProps, type TListRef, type TMessagesIdsRef } from '../definitions';
-import { VIEWABILITY_CONFIG } from '../constants';
+import { type IListContainerRef, type TListRef, type TMessagesIdsRef } from '../definitions';
 
 export const useScroll = ({ listRef, messagesIds }: { listRef: TListRef; messagesIds: TMessagesIdsRef }) => {
 	const [highlightedMessageId, setHighlightedMessageId] = useState<string | null>(null);
@@ -21,21 +20,9 @@ export const useScroll = ({ listRef, messagesIds }: { listRef: TListRef; message
 	);
 
 	const jumpToBottom = useCallback(() => {
-		listRef.current?.scrollToOffset({ offset: -100 });
+		listRef?.current?.scrollToEnd();
 	}, [listRef]);
 
-	const onViewableItemsChanged: IListProps['onViewableItemsChanged'] = ({ viewableItems: vi }) => {
-		viewableItems.current = vi;
-	};
-
-	const viewabilityConfigCallbackPairs = useRef<ViewabilityConfigCallbackPairs>([
-		{ onViewableItemsChanged, viewabilityConfig: VIEWABILITY_CONFIG }
-	]);
-
-	const handleScrollToIndexFailed: IListProps['onScrollToIndexFailed'] = params => {
-		listRef.current?.scrollToIndex({ index: params.highestMeasuredFrameIndex, animated: false });
-	};
-
 	const setHighlightTimeout = () => {
 		if (highlightTimeout.current) {
 			clearTimeout(highlightTimeout.current);
@@ -59,7 +46,7 @@ export const useScroll = ({ listRef, messagesIds }: { listRef: TListRef; message
 
 			// if found message, scroll to it
 			if (index !== -1) {
-				listRef.current?.scrollToIndex({ index, viewPosition: 0.5, viewOffset: 100 });
+				listRef?.current?.scrollToIndex({ index, viewPosition: 0.5, viewOffset: 100 });
 
 				// wait for scroll animation to finish
 				await new Promise(res => setTimeout(res, 300));
@@ -76,7 +63,7 @@ export const useScroll = ({ listRef, messagesIds }: { listRef: TListRef; message
 				resolve();
 			} else {
 				// if message not on state yet, scroll to top, so it triggers onEndReached and try again
-				listRef.current?.scrollToEnd();
+				listRef?.current?.scrollToEnd();
 				await setTimeout(() => resolve(jumpToMessage(messageId)), 600);
 			}
 		});
@@ -98,8 +85,6 @@ export const useScroll = ({ listRef, messagesIds }: { listRef: TListRef; message
 		jumpToBottom,
 		jumpToMessage,
 		cancelJumpToMessage,
-		viewabilityConfigCallbackPairs,
-		handleScrollToIndexFailed,
 		highlightedMessageId
 	};
 };

app/views/RoomView/List/index.tsx

@@ -15,14 +15,10 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 			serverVersion,
 			hideSystemMessages
 		});
-		const {
-			jumpToBottom,
-			jumpToMessage,
-			cancelJumpToMessage,
-			viewabilityConfigCallbackPairs,
-			handleScrollToIndexFailed,
-			highlightedMessageId
-		} = useScroll({ listRef, messagesIds });
+		const { jumpToBottom, jumpToMessage, cancelJumpToMessage, highlightedMessageId } = useScroll({
+			listRef,
+			messagesIds
+		});
 
 		const onEndReached = useDebounce(() => {
 			fetchMessages();
@@ -33,7 +29,7 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 			cancelJumpToMessage
 		}));
 
-		const renderItem: IListProps['renderItem'] = ({ item, index }) => renderRow(item, messages[index + 1], highlightedMessageId);
+		const renderItem: IListProps['renderItem'] = ({ item, index }) => renderRow(item, messages[index - 1], highlightedMessageId);
 
 		return (
 			<>
@@ -42,14 +38,9 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 					listRef={listRef}
 					data={messages}
 					renderItem={renderItem}
-					onEndReached={onEndReached}
-					onScrollToIndexFailed={handleScrollToIndexFailed}
-					viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
+					onStartReached={onEndReached}
+					onStartReachedThreshold={0.9}
 					jumpToBottom={jumpToBottom}
-					maintainVisibleContentPosition={{
-						minIndexForVisible: 0,
-						autoscrollToTopThreshold: 0
-					}}
 				/>
 			</>
 		);

app/views/RoomView/index.tsx

@@ -199,7 +199,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 
 		this.messageComposerRef = React.createRef();
 		this.list = React.createRef();
-		this.flatList = React.createRef();
+		this.flatList = React.createRef() as TListRef;
 		this.joinCode = React.createRef();
 		this.mounted = false;
 

app/views/RoomsListView/index.tsx

@@ -1,8 +1,9 @@
 import { useNavigation } from '@react-navigation/native';
 import React, { memo, useContext, useEffect } from 'react';
-import { BackHandler, FlatList, RefreshControl } from 'react-native';
+import { BackHandler, RefreshControl } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { shallowEqual } from 'react-redux';
+import { FlashList } from '@shopify/flash-list';
 
 import ActivityIndicator from '../../containers/ActivityIndicator';
 import BackgroundContainer from '../../containers/BackgroundContainer';
@@ -13,7 +14,7 @@ import { SupportedVersionsExpired } from '../../containers/SupportedVersions';
 import i18n from '../../i18n';
 import { MAX_SIDEBAR_WIDTH } from '../../lib/constants/tablet';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
-import { getRoomAvatar, getRoomTitle, getUidDirectMessage, isIOS, isRead, isTablet } from '../../lib/methods/helpers';
+import { getRoomAvatar, getRoomTitle, getUidDirectMessage, isIOS, isRead } from '../../lib/methods/helpers';
 import { goRoom } from '../../lib/methods/helpers/goRoom';
 import { events, logEvent } from '../../lib/methods/helpers/log';
 import { getUserSelector } from '../../selectors/login';
@@ -22,13 +23,9 @@ import Container from './components/Container';
 import ListHeader from './components/ListHeader';
 import SectionHeader from './components/SectionHeader';
 import RoomsSearchProvider, { RoomsSearchContext } from './contexts/RoomsSearchProvider';
-import { useGetItemLayout } from './hooks/useGetItemLayout';
 import { useHeader } from './hooks/useHeader';
 import { useRefresh } from './hooks/useRefresh';
 import { useSubscriptions } from './hooks/useSubscriptions';
-import styles from './styles';
-
-const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12;
 
 const RoomsListView = memo(function RoomsListView() {
 	'use memo';
@@ -44,7 +41,6 @@ const RoomsListView = memo(function RoomsListView() {
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 	const navigation = useNavigation();
 	const { width } = useSafeAreaFrame();
-	const getItemLayout = useGetItemLayout();
 	const { subscriptions, loading } = useSubscriptions();
 	const subscribedRoom = useAppSelector(state => state.room.subscribedRoom);
 	const changingServer = useAppSelector(state => state.server.changingServer);
@@ -128,19 +124,15 @@ const RoomsListView = memo(function RoomsListView() {
 	}
 
 	return (
-		<FlatList
+		<FlashList
 			data={searchEnabled ? searchResults : subscriptions}
 			extraData={searchEnabled ? searchResults : subscriptions}
 			keyExtractor={item => `${item.rid}-${searchEnabled}`}
-			style={[styles.list, { backgroundColor: colors.surfaceRoom }]}
 			renderItem={renderItem}
 			ListHeaderComponent={ListHeader}
-			getItemLayout={getItemLayout}
 			removeClippedSubviews={isIOS}
 			keyboardShouldPersistTaps='always'
-			initialNumToRender={INITIAL_NUM_TO_RENDER}
 			refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.fontSecondaryInfo} />}
-			windowSize={9}
 			onEndReachedThreshold={0.5}
 			keyboardDismissMode={isIOS ? 'on-drag' : 'none'}
 		/>

metro.config.js

@@ -12,9 +12,16 @@ const config = {
 		unstable_allowRequireContext: true
 	},
 	resolver: {
-		// When running E2E tests, prioritize .mock.ts files for app code
-		// Note: react-native-mmkv's internal mock file is disabled via patch-package
-		sourceExts: process.env.RUNNING_E2E_TESTS === 'true' ? ['mock.ts', ...sourceExts] : sourceExts
+		sourceExts: process.env.RUNNING_E2E_TESTS ? ['mock.ts', ...sourceExts] : sourceExts,
+		// Force flash-list to use source files so our patch is applied
+		resolveRequest: (context, moduleName, platform) => {
+			// Redirect flash-list dist imports to src
+			if (moduleName.startsWith('@shopify/flash-list')) {
+				const newModuleName = moduleName.replace('@shopify/flash-list', '@shopify/flash-list/src');
+				return context.resolveRequest(context, newModuleName, platform);
+			}
+			return context.resolveRequest(context, moduleName, platform);
+		}
 	}
 };
 

package.json

@@ -41,7 +41,7 @@
 		"@react-native-firebase/app": "^21.12.2",
 		"@react-native-firebase/crashlytics": "^21.12.2",
 		"@react-native-masked-view/masked-view": "^0.3.1",
-		"@react-native-picker/picker": "^2.11.0",
+		"@react-native-picker/picker": "2.11.0",
 		"@react-native/codegen": "^0.80.0",
 		"@react-navigation/drawer": "^7.5.5",
 		"@react-navigation/elements": "^2.6.1",
@@ -51,6 +51,7 @@
 		"@rocket.chat/mobile-crypto": "RocketChat/rocket.chat-mobile-crypto",
 		"@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile",
 		"@rocket.chat/ui-kit": "0.31.19",
+		"@shopify/flash-list": "^2.0.3",
 		"bytebuffer": "5.0.1",
 		"color2k": "1.2.4",
 		"dayjs": "^1.11.18",