fix: issues with Flashlist

theo-mesnil · Dec 22, 2024 · a840868 · a840868
1 parent 71ec5ff
commit a840868
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 38 deletions.
diff --git a/__tests__/Movie.test.tsx b/__tests__/Movie.test.tsx
@@ -25,7 +25,7 @@ describe('<Movie />', () => {
     );
     expect(screen.queryByTestId('cover-title')).toBeFalsy();
     expect(screen.queryByTestId('cover-image')).toHaveProp('source', {
-      uri: 'https://image.tmdb.org/t/p/w780/hziiv14OpD73u9gAak4XDDfBKa2.jpg'
+      uri: 'https://image.tmdb.org/t/p/w1280/hziiv14OpD73u9gAak4XDDfBKa2.jpg'
     });
     expect(screen.queryByTestId('cover-logo')).toHaveProp(
       'src',

diff --git a/__tests__/person.test.tsx b/__tests__/person.test.tsx
@@ -34,7 +34,7 @@ describe('<Person />', () => {
       'Daniel Radcliffe'
     );
     expect(screen.queryByTestId('cover-image')).toHaveProp('source', {
-      uri: 'https://image.tmdb.org/t/p/w780/iPg0J9UzAlPj1fLEJNllpW9IhGe.jpg'
+      uri: 'https://image.tmdb.org/t/p/w1280/iPg0J9UzAlPj1fLEJNllpW9IhGe.jpg'
     });
   });
 

diff --git a/__tests__/tv.test.tsx b/__tests__/tv.test.tsx
@@ -23,7 +23,7 @@ describe('<Tv />', () => {
     );
     expect(screen.queryByTestId('cover-title')).toBeFalsy();
     expect(screen.queryByTestId('cover-image')).toHaveProp('source', {
-      uri: 'https://image.tmdb.org/t/p/w780/etj8E2o0Bud0HkONVQPjyCkIvpv.jpg'
+      uri: 'https://image.tmdb.org/t/p/w1280/etj8E2o0Bud0HkONVQPjyCkIvpv.jpg'
     });
     expect(screen.queryByTestId('cover-logo')).toHaveProp(
       'src',

diff --git a/src/components/FullScreenImagesList/index.tsx b/src/components/FullScreenImagesList/index.tsx
@@ -1,7 +1,6 @@
-import type { FlashListProps } from '@shopify/flash-list';
-import { FlashList } from '@shopify/flash-list';
 import * as React from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import type { ListRenderItemInfo } from 'react-native';
+import { Animated, Dimensions, StyleSheet, View } from 'react-native';
 
 import type { UseGetMovieImagesApiResponse } from 'api/movie';
 import type { UseGetPersonImagesApiResponse } from 'api/person';
@@ -34,11 +33,9 @@ export default function FullScreenImagesList({
   startAt = 0,
   type
 }: FullScreenImagesProps) {
-  const flashListRef = React.useRef(null);
-
-  const renderItem: FlashListProps<Images[number]>['renderItem'] = ({
+  const renderItem = ({
     item: { aspect_ratio, file_path }
-  }) => (
+  }: ListRenderItemInfo<Images[number]>) => (
     <View style={[{ width: CARD_WIDTH }, styles.thumb]}>
       <Thumb
         type={type}
@@ -53,37 +50,32 @@ export default function FullScreenImagesList({
     return CARD_WIDTH * index + GAP * index - CARD_LIST_INSET - GAP / 2;
   }
 
-  function onLoad() {
-    if (startAt === images?.length) {
-      flashListRef.current.scrollToEnd();
-    } else {
-      flashListRef.current.scrollToOffset({
-        offset: getItemOffset(startAt)
-      });
-    }
-  }
-
-  function renderSeparators() {
-    return <View style={{ width: GAP }} />;
+  function getItemLayout(_: any, index: number) {
+    return {
+      length: CARD_WIDTH,
+      offset:
+        CARD_WIDTH * index +
+        CARD_LIST_INSET +
+        GAP * index -
+        Dimensions.get('window').width * 0.1,
+      index
+    };
   }
 
   return (
     <View style={styles.list}>
-      <FlashList
-        onLoad={onLoad}
-        ref={flashListRef}
+      <Animated.FlatList
         numColumns={1}
-        ItemSeparatorComponent={renderSeparators}
-        estimatedItemSize={CARD_WIDTH}
+        initialScrollIndex={startAt}
+        initialNumToRender={2}
         pagingEnabled
         id="images"
         decelerationRate="fast"
         snapToOffsets={[...Array(images?.length)].map((_, i) =>
           getItemOffset(i)
         )}
-        contentContainerStyle={{
-          paddingHorizontal: CARD_LIST_INSET
-        }}
+        contentContainerStyle={styles.listContainer}
+        getItemLayout={getItemLayout}
         data={images}
         keyExtractor={(item, index) =>
           isLoading
@@ -104,6 +96,10 @@ const styles = StyleSheet.create({
     height: '80%',
     justifyContent: 'center'
   },
+  listContainer: {
+    paddingHorizontal: CARD_LIST_INSET,
+    gap: GAP
+  },
   thumb: {
     alignSelf: 'center',
     justifyContent: 'center'

diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx
@@ -1,5 +1,5 @@
 import type { FlashListProps, ListRenderItemInfo } from '@shopify/flash-list';
-import { FlashList } from '@shopify/flash-list';
+import { AnimatedFlashList } from '@shopify/flash-list';
 import type { Href } from 'expo-router';
 import * as React from 'react';
 import { Dimensions, View } from 'react-native';
@@ -100,7 +100,7 @@ export function List<ItemProps>({
   return (
     <View>
       {!!title && renderTitle}
-      <FlashList
+      <AnimatedFlashList
         bounces={false}
         data={dataFormatted}
         keyExtractor={(_, index: number) =>

diff --git a/src/components/VerticalList/index.tsx b/src/components/VerticalList/index.tsx
@@ -1,5 +1,5 @@
 import type { FlashListProps, ListRenderItemInfo } from '@shopify/flash-list';
-import { FlashList } from '@shopify/flash-list';
+import { AnimatedFlashList } from '@shopify/flash-list';
 import * as React from 'react';
 import { Animated, Dimensions, View } from 'react-native';
 
@@ -83,7 +83,7 @@ export function VerticalList<ItemProps>({
   }
 
   return (
-    <FlashList
+    <AnimatedFlashList
       onEndReached={onEndReached}
       bounces={false}
       data={dataFormatted}
@@ -103,7 +103,7 @@ export function VerticalList<ItemProps>({
         }
       )}
       numColumns={numColumns}
-      onEndReachedThreshold={0.5}
+      onEndReachedThreshold={0.6}
       ListHeaderComponent={renderListHeaderComponent}
       renderItem={internalRenderItem}
       showsVerticalScrollIndicator={false}

diff --git a/src/components/app/index/Overview/index.tsx b/src/components/app/index/Overview/index.tsx
@@ -1,5 +1,5 @@
 import type { FlashListProps, ViewToken } from '@shopify/flash-list';
-import { FlashList } from '@shopify/flash-list';
+import { AnimatedFlashList } from '@shopify/flash-list';
 import * as React from 'react';
 import { Animated, Dimensions, StyleSheet, View } from 'react-native';
 import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
@@ -108,7 +108,7 @@ export function Overview() {
   }
   return (
     <View>
-      <FlashList
+      <AnimatedFlashList
         onScroll={onScroll}
         onScrollBeginDrag={onScrollBeginDrag}
         onScrollEndDrag={onScrollEndDrag}

diff --git a/src/layouts/Content/Cover/index.tsx b/src/layouts/Content/Cover/index.tsx
@@ -27,7 +27,7 @@ export const Cover = React.memo(
         <ImageBackground
           testID="cover-image"
           source={{
-            uri: getImageUrl(imageUrl, 'w780')
+            uri: getImageUrl(imageUrl, 'w1280')
           }}
           style={styles.image}
         >