chore: replace Flatlist to Flashlist

theo-mesnil · Dec 15, 2024 · bab92b5 · bab92b5
1 parent 742bfcd
commit bab92b5
Show file tree

Hide file tree

Showing 27 changed files with 298 additions and 225 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@react-navigation/elements": "^1.3.30",
     "@react-navigation/native": "^7.0.0",
     "@react-navigation/stack": "^6.3.29",
+    "@shopify/flash-list": "1.7.1",
     "@tanstack/react-query": "^5.62.7",
     "axios": "^1.7.9",
     "date-fns": "^4.1.0",

diff --git a/src/app/(tabs)/search.tsx b/src/app/(tabs)/search.tsx
@@ -1,8 +1,8 @@
+import type { FlashListProps } from '@shopify/flash-list';
 import { useNavigation } from 'expo-router';
 import debounce from 'lodash.debounce';
 import * as React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import type { ListRenderItemInfo } from 'react-native';
 import { Animated, StyleSheet, View } from 'react-native';
 import { routeByType } from 'routes/utils';
 
@@ -23,6 +23,8 @@ import { theme } from 'theme';
 import type { ContentType } from 'types/content';
 import type { HeaderOptions } from 'types/navigation';
 
+type Item = UseGetTrendingApiResponse['all']['results'][number];
+
 export default function Search() {
   const [querySearch, setQuerySearch] = React.useState(null);
   const [scrollYPosition, getScrollYPosition] = React.useState(
@@ -61,12 +63,10 @@ export default function Search() {
     }
   };
 
-  const renderItem = ({
+  const renderItem: FlashListProps<Item>['renderItem'] = ({
     // @ts-expect-error wrong ts api from tmdb
     item: { id, media_type, name, poster_path, profile_path, title }
-  }: ListRenderItemInfo<
-    UseGetTrendingApiResponse['all']['results'][number]
-  >) => {
+  }) => {
     const isLoadingItem = isLoading || isSearchLoading;
 
     return (
@@ -142,7 +142,7 @@ export default function Search() {
   return (
     <BasicLayout isView>
       <GradientHeader scrollY={scrollYPosition} />
-      <VerticalList
+      <VerticalList<Item>
         id="search-trending"
         isLoading={isLoading || isSearchLoading}
         renderItem={renderItem}

diff --git a/src/app/genre/[id]/movie.tsx b/src/app/genre/[id]/movie.tsx
@@ -1,6 +1,7 @@
+import type { FlashListProps } from '@shopify/flash-list';
 import { useLocalSearchParams } from 'expo-router';
 import * as React from 'react';
-import { Animated, type ListRenderItemInfo } from 'react-native';
+import { Animated } from 'react-native';
 
 import type { UseGetDiscoverMovieApiResponse } from 'api/discover';
 import { useGetDiscoverMovie } from 'api/discover';
@@ -12,6 +13,8 @@ import { useSafeHeights } from 'constants/useSafeHeights';
 import GenreLayout from 'layouts/Genre';
 import { moviePath } from 'routes';
 
+type Item = UseGetDiscoverMovieApiResponse['results'][number];
+
 export default function Movie() {
   const [scrollYPosition, getScrollYPosition] = React.useState(
     new Animated.Value(0)
@@ -26,9 +29,9 @@ export default function Movie() {
 
   const firstItem = !isLoading && data?.pages[0].results[0];
 
-  const renderItem = ({
+  const renderItem: FlashListProps<Item>['renderItem'] = ({
     item: { id, poster_path }
-  }: ListRenderItemInfo<UseGetDiscoverMovieApiResponse['results'][number]>) => (
+  }) => (
     <ThumbLink isLoading={isLoading} href={moviePath({ id })}>
       <Thumb type="movie" imageUrl={poster_path} />
     </ThumbLink>
@@ -42,7 +45,7 @@ export default function Movie() {
 
   return (
     <GenreLayout scrollYPosition={scrollYPosition}>
-      <VerticalList
+      <VerticalList<Item>
         renderItem={renderItem}
         id="genre"
         ListHeaderComponent={

diff --git a/src/app/genre/[id]/tv.tsx b/src/app/genre/[id]/tv.tsx
@@ -1,6 +1,7 @@
+import type { FlashListProps } from '@shopify/flash-list';
 import { useLocalSearchParams } from 'expo-router';
 import * as React from 'react';
-import { Animated, type ListRenderItemInfo } from 'react-native';
+import { Animated } from 'react-native';
 
 import type { UseGetDiscoverTvApiResponse } from 'api/discover';
 import { useGetDiscoverTv } from 'api/discover';
@@ -12,6 +13,8 @@ import { useSafeHeights } from 'constants/useSafeHeights';
 import GenreLayout from 'layouts/Genre';
 import { tvPath } from 'routes';
 
+type Item = UseGetDiscoverTvApiResponse['results'][number];
+
 export default function Tv() {
   const [scrollYPosition, getScrollYPosition] = React.useState(
     new Animated.Value(0)
@@ -26,9 +29,9 @@ export default function Tv() {
 
   const firstItem = !isLoading && data?.pages[0].results[0];
 
-  const renderItem = ({
+  const renderItem: FlashListProps<Item>['renderItem'] = ({
     item: { id, poster_path }
-  }: ListRenderItemInfo<UseGetDiscoverTvApiResponse['results'][number]>) => (
+  }) => (
     <ThumbLink isLoading={isLoading} href={tvPath({ id })}>
       <Thumb type="tv" imageUrl={poster_path} />
     </ThumbLink>
@@ -42,7 +45,7 @@ export default function Tv() {
 
   return (
     <GenreLayout scrollYPosition={scrollYPosition}>
-      <VerticalList
+      <VerticalList<Item>
         renderItem={renderItem}
         id="genre"
         ListHeaderComponent={

diff --git a/src/app/movie/[id]/index.tsx b/src/app/movie/[id]/index.tsx
@@ -1,7 +1,7 @@
+import type { FlashListProps } from '@shopify/flash-list';
 import { useLocalSearchParams } from 'expo-router';
 import * as React from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
-import type { ListRenderItemInfo } from 'react-native';
 import { StyleSheet, View } from 'react-native';
 
 import { useGetContentLogo } from 'api/logo';
@@ -34,6 +34,10 @@ import { globalStyles } from 'styles';
 import { theme } from 'theme';
 import { formatTime } from 'utils/time';
 
+type CastItem = UseGetMovieCreditsApiResponse['cast'][number];
+type MovieItem = UseGetMovieSimilarApiResponse['results'][number];
+type VideoItem = UseGetMovieVideosApiResponse['results'][number];
+
 export default function Movie() {
   const params = useLocalSearchParams<{ id: string }>();
   const movieID = Number(params?.id);
@@ -73,27 +77,25 @@ export default function Movie() {
     (video) => video.type === 'Trailer'
   )?.[0];
 
-  const renderItemCast = ({
+  const renderItemCast: FlashListProps<CastItem>['renderItem'] = ({
     item: { character, id, name, profile_path }
-  }: ListRenderItemInfo<UseGetMovieCreditsApiResponse['cast'][number]>) => (
+  }) => (
     <ThumbLink href={personPath({ id })}>
       <PersonThumb imageUrl={profile_path} name={name} character={character} />
     </ThumbLink>
   );
 
-  const renderItemMovie = ({
+  const renderItemMovie: FlashListProps<MovieItem>['renderItem'] = ({
     item: { id, poster_path }
-  }: ListRenderItemInfo<UseGetMovieSimilarApiResponse['results'][number]>) => (
+  }) => (
     <ThumbLink href={moviePath({ id })}>
       <Thumb type="movie" imageUrl={poster_path} />
     </ThumbLink>
   );
 
-  const renderItemVideo = ({
+  const renderItemVideo: FlashListProps<VideoItem>['renderItem'] = ({
     item: { key, name, site }
-  }: ListRenderItemInfo<UseGetMovieVideosApiResponse['results'][number]>) => (
-    <VideoThumb id={key} type="movie" platform={site} name={name} />
-  );
+  }) => <VideoThumb id={key} type="movie" platform={site} name={name} />;
 
   return (
     <ContentLayout
@@ -150,7 +152,7 @@ export default function Movie() {
           </Text>
         )}
         {!!casting && casting.length > 0 && (
-          <List
+          <List<CastItem>
             title={<FormattedMessage defaultMessage="Casting" id="arTEbw" />}
             isLoading={isLoadingCredits}
             id="cast"
@@ -160,7 +162,7 @@ export default function Movie() {
         )}
         {(isLoadingVideos ||
           (!!videos?.results && videos.results.length > 0)) && (
-          <List
+          <List<VideoItem>
             numberOfItems={1}
             title={<FormattedMessage defaultMessage="Videos" id="4XfMux" />}
             isLoading={isLoadingVideos}
@@ -181,7 +183,7 @@ export default function Movie() {
           </View>
         )}
         {(isLoadingSimilar || similar?.results.length > 0) && (
-          <List
+          <List<MovieItem>
             title={
               <FormattedMessage
                 defaultMessage="In the same spirit"

diff --git a/src/app/network/[id].tsx b/src/app/network/[id].tsx
@@ -1,6 +1,6 @@
+import type { FlashListProps } from '@shopify/flash-list';
 import { useLocalSearchParams, useNavigation } from 'expo-router';
 import * as React from 'react';
-import type { ListRenderItemInfo } from 'react-native';
 import { Animated } from 'react-native';
 
 import type { UseGetDiscoverTvApiResponse } from 'api/discover';
@@ -19,6 +19,8 @@ import { theme } from 'theme';
 import type { NetworkId } from 'types/content';
 import { getNetworkColor } from 'utils/networks';
 
+type Item = UseGetDiscoverTvApiResponse['results'][number];
+
 export default function Network() {
   const params = useLocalSearchParams<{ id: string }>();
   const networkID = Number(params?.id) as NetworkId;
@@ -39,9 +41,9 @@ export default function Network() {
 
   const firstItem = !isLoading && data?.pages[0].results[0];
 
-  const renderItem = ({
+  const renderItem: FlashListProps<Item>['renderItem'] = ({
     item: { id, poster_path }
-  }: ListRenderItemInfo<UseGetDiscoverTvApiResponse['results'][number]>) => (
+  }) => (
     <ThumbLink isLoading={isLoading} href={tvPath({ id })}>
       <Thumb type="tv" imageUrl={poster_path} />
     </ThumbLink>
@@ -76,7 +78,7 @@ export default function Network() {
         colors={[...getNetworkColor(networkID), theme.colors.behind]}
         scrollY={scrollYPosition}
       />
-      <VerticalList
+      <VerticalList<Item>
         renderItem={renderItem}
         id="network"
         ListHeaderComponent={

diff --git a/src/app/person/[id]/index.tsx b/src/app/person/[id]/index.tsx
@@ -1,8 +1,8 @@
+import type { FlashListProps } from '@shopify/flash-list';
 import { intervalToDuration } from 'date-fns';
 import { useLocalSearchParams } from 'expo-router';
 import * as React from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
-import type { ListRenderItemInfo } from 'react-native';
 import { StyleSheet, View } from 'react-native';
 import { routeByType } from 'routes/utils';
 
@@ -28,6 +28,9 @@ import { personImagePath, personMoviesPath, personTvPath } from 'routes';
 import { globalStyles } from 'styles';
 import { theme } from 'theme';
 
+type ImageItem = UseGetPersonImagesApiResponse['profiles'][number];
+type CastItem = UseGetPersonCreditsApiResponse['cast'][number];
+
 export default function Person() {
   const params = useLocalSearchParams<{ id: string }>();
   const personID = Number(params?.id);
@@ -61,18 +64,18 @@ export default function Person() {
   const numberOfMovies = movies?.length;
   const numberOfTvShows = tv?.length;
 
-  const renderItemImage = ({
+  const renderItemImage: FlashListProps<ImageItem>['renderItem'] = ({
     index,
     item: { file_path }
-  }: ListRenderItemInfo<UseGetPersonImagesApiResponse['profiles'][number]>) => (
+  }) => (
     <ThumbLink href={personImagePath({ id: personID, start: index })}>
       <Thumb type="person" imageUrl={file_path} />
     </ThumbLink>
   );
 
-  const renderCreditImage = ({
+  const renderCreditImage: FlashListProps<CastItem>['renderItem'] = ({
     item: { id, media_type, poster_path }
-  }: ListRenderItemInfo<UseGetPersonCreditsApiResponse['cast'][number]>) => {
+  }) => {
     const type = media_type === 'movie' ? 'movie' : 'tv';
 
     return (
@@ -172,7 +175,7 @@ export default function Person() {
           </View>
         )}
         {(isLoadingCredits || credits?.length > 0) && (
-          <List
+          <List<CastItem>
             title={<FormattedMessage defaultMessage="Know for" id="//VHfC" />}
             id="similar"
             numberOfItems={2}
@@ -214,7 +217,7 @@ export default function Person() {
           </View>
         )}
         {(isLoadingImages || images?.length > 0) && (
-          <List
+          <List<ImageItem>
             title={<FormattedMessage defaultMessage="Pictures" id="DOPilz" />}
             id="similar"
             isLoading={isLoadingImages}