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 ( -