diff --git a/__tests__/Movie.test.tsx b/__tests__/Movie.test.tsx
index b5ed53d..6430225 100644
--- a/__tests__/Movie.test.tsx
+++ b/__tests__/Movie.test.tsx
@@ -25,7 +25,7 @@ describe('', () => {
);
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
index 2a2f360..fcb18a2 100644
--- a/__tests__/person.test.tsx
+++ b/__tests__/person.test.tsx
@@ -34,7 +34,7 @@ describe('', () => {
'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
index 277c035..a36116a 100644
--- a/__tests__/tv.test.tsx
+++ b/__tests__/tv.test.tsx
@@ -23,7 +23,7 @@ describe('', () => {
);
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
index d31c76b..53a2afe 100644
--- 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['renderItem'] = ({
+ const renderItem = ({
item: { aspect_ratio, file_path }
- }) => (
+ }: ListRenderItemInfo) => (
;
+ 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 (
-
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
index 4eb9d14..7057d95 100644
--- 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({
return (
{!!title && renderTitle}
-
diff --git a/src/components/VerticalList/index.tsx b/src/components/VerticalList/index.tsx
index 8fd7574..98840c4 100644
--- 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({
}
return (
- ({
}
)}
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
index 03877ee..39a1a8b 100644
--- 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 (
-