feat(rooms-list): render rooms list with Legend List

app/views/RoomsListView/hooks/useGetItemLayout.ts → app/views/RoomsListView/hooks/useGetFixedItemSize.ts

@@ -1,23 +1,15 @@
 import { useCallback } from 'react';
 import { shallowEqual } from 'react-redux';
 
+import { type IRoomItem } from '~/containers/RoomItem/interfaces';
 import { DisplayMode } from '~/lib/constants/constantDisplayMode';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useResponsiveLayout } from '~/lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
-export const useGetItemLayout = () => {
+export const useGetFixedItemSize = () => {
 	const { rowHeight, rowHeightCondensed } = useResponsiveLayout();
 	const { displayMode } = useAppSelector(state => state.sortPreferences, shallowEqual);
 	const height = displayMode === DisplayMode.Condensed ? rowHeightCondensed : rowHeight;
 
-	const getItemLayout = useCallback(
-		(_: any, index: number) => ({
-			length: height,
-			offset: height * index,
-			index
-		}),
-		[height]
-	);
-
-	return getItemLayout;
+	return useCallback((item: IRoomItem) => (item.separator ? undefined : height), [height]);
 };

app/views/RoomsListView/index.tsx

@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import { memo, useContext, useEffect } from 'react';
-import { BackHandler, FlatList, RefreshControl } from 'react-native';
+import { LegendList } from '@legendapp/list/react-native';
+import { BackHandler, RefreshControl } from 'react-native';
 import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { shallowEqual } from 'react-redux';
 
@@ -14,7 +15,7 @@ import i18n from '~/i18n';
 import { MAX_SIDEBAR_WIDTH } from '~/lib/constants/tablet';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
-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';
@@ -23,14 +24,12 @@ 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 { useGetFixedItemSize } from './hooks/useGetFixedItemSize';
 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() {
 	useHeader();
 	const { searching, searchEnabled, searchResults, stopSearch } = useContext(RoomsSearchContext);
@@ -44,7 +43,7 @@ const RoomsListView = memo(function RoomsListView() {
 	const navigation = useNavigation();
 	const { width } = useSafeAreaFrame();
 	const { bottom } = useSafeAreaInsets();
-	const getItemLayout = useGetItemLayout();
+	const getFixedItemSize = useGetFixedItemSize();
 	const { subscriptions, loading } = useSubscriptions();
 	const subscribedRoom = useAppSelector(state => state.room.subscribedRoom);
 	const changingServer = useAppSelector(state => state.server.changingServer);
@@ -125,22 +124,32 @@ const RoomsListView = memo(function RoomsListView() {
 		return <ChangePasswordRequired navigation={navigation} />;
 	}
 
+	const rooms = searchEnabled ? searchResults : subscriptions;
+
 	return (
-		<FlatList
-			data={searchEnabled ? searchResults : subscriptions}
-			extraData={searchEnabled ? searchResults : subscriptions}
+		<LegendList
+			data={rooms}
+			extraData={{
+				rooms,
+				username,
+				useRealName,
+				showLastMessage,
+				displayMode,
+				showAvatar,
+				subscribedRoom,
+				isMasterDetail,
+				width
+			}}
 			keyExtractor={item => `${item.rid}-${searchEnabled}`}
+			getItemType={item => (item.separator ? 'separator' : 'room')}
+			getFixedItemSize={getFixedItemSize}
 			style={[styles.list, { backgroundColor: colors.surfaceRoom }]}
 			contentContainerStyle={{ paddingBottom: bottom }}
 			renderItem={renderItem}
 			ListHeaderComponent={ListHeader}
-			ListFooterComponent={searching ? () => <ActivityIndicator /> : undefined}
-			getItemLayout={getItemLayout}
+			ListFooterComponent={searching ? <ActivityIndicator /> : undefined}
 			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'}
 		/>
 	);

package.json

@@ -29,6 +29,7 @@
 		"@bugsnag/react-native": "8.4.0",
 		"@expo/vector-icons": "^15.0.3",
 		"@hookform/resolvers": "^2.9.10",
+		"@legendapp/list": "3.4.0",
 		"@lodev09/react-native-true-sheet": "~3.7.0",
 		"@magrinj/expo-quick-look": "0.4.0",
 		"@nozbe/watermelondb": "^0.28.1-0",