diff --git a/src/components/Swimlane/PopularMovies/Item/index.tsx b/src/components/Swimlane/PopularMovies/Item/index.tsx index 3918dde..4a3de71 100644 --- a/src/components/Swimlane/PopularMovies/Item/index.tsx +++ b/src/components/Swimlane/PopularMovies/Item/index.tsx @@ -1,6 +1,6 @@ import { NavigationProp, useNavigation } from '@react-navigation/native'; import Card from 'components/Card'; -import Touchable from 'components/Touchable'; +import { Touchable } from 'components/Touchable'; import { Route, RouteParams } from 'navigation'; import React, { memo } from 'react'; import { useMovie } from 'store/movies/hooks'; diff --git a/src/components/Swimlane/PopularMovies/index.tsx b/src/components/Swimlane/PopularMovies/index.tsx index d3f9043..e15ef7a 100644 --- a/src/components/Swimlane/PopularMovies/index.tsx +++ b/src/components/Swimlane/PopularMovies/index.tsx @@ -34,9 +34,6 @@ const PopularMoviesSwimlane = ({ hideTitle }: Props) => { showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} data={isLoading && data.length === 0 ? new Array(6).fill(null) : data} - keyExtractor={(item, index) => - `swimlane.popular-movies.${item?.id || `index-${index}`}` - } renderItem={({ item }) => } /> diff --git a/src/components/Swimlane/PopularTVShows/Item/index.tsx b/src/components/Swimlane/PopularTVShows/Item/index.tsx index 14d0a0f..7e6626c 100644 --- a/src/components/Swimlane/PopularTVShows/Item/index.tsx +++ b/src/components/Swimlane/PopularTVShows/Item/index.tsx @@ -1,6 +1,6 @@ import { NavigationProp, useNavigation } from '@react-navigation/native'; import Card from 'components/Card'; -import Touchable from 'components/Touchable'; +import { Touchable } from 'components/Touchable'; import { Route, RouteParams } from 'navigation'; import React, { memo } from 'react'; import { useShow } from 'store/shows/hooks'; diff --git a/src/components/Swimlane/PopularTVShows/index.tsx b/src/components/Swimlane/PopularTVShows/index.tsx index 041f59d..e156ccf 100644 --- a/src/components/Swimlane/PopularTVShows/index.tsx +++ b/src/components/Swimlane/PopularTVShows/index.tsx @@ -34,9 +34,6 @@ const PopularTVShowsSwimlane = ({ hideTitle }: Props) => { showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} data={isLoading && data.length === 0 ? new Array(6).fill(null) : data} - keyExtractor={(item, index) => - `swimlane.popular-tv-shows.${item?.id || `index-${index}`}` - } renderItem={({ item }) => } /> diff --git a/src/components/Swimlane/TopRatedMovies/Item/index.tsx b/src/components/Swimlane/TopRatedMovies/Item/index.tsx index d30ff6f..8295dcf 100644 --- a/src/components/Swimlane/TopRatedMovies/Item/index.tsx +++ b/src/components/Swimlane/TopRatedMovies/Item/index.tsx @@ -1,6 +1,6 @@ import { NavigationProp, useNavigation } from '@react-navigation/native'; import Card from 'components/Card'; -import Touchable from 'components/Touchable'; +import { Touchable } from 'components/Touchable'; import { Route, RouteParams } from 'navigation'; import React, { memo } from 'react'; import { useMovie } from 'store/movies/hooks'; diff --git a/src/components/Swimlane/TopRatedMovies/index.tsx b/src/components/Swimlane/TopRatedMovies/index.tsx index e69bf92..1d69e24 100644 --- a/src/components/Swimlane/TopRatedMovies/index.tsx +++ b/src/components/Swimlane/TopRatedMovies/index.tsx @@ -34,9 +34,6 @@ const TopRatedMoviesSwimlane = ({ hideTitle }: Props) => { showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} data={isLoading && data.length === 0 ? new Array(6).fill(null) : data} - keyExtractor={(item, index) => - `swimlane.top-rated-movies.${item?.id || `index-${index}`}` - } renderItem={({ item }) => } /> diff --git a/src/components/Swimlane/TopRatedTVShows/Item/index.tsx b/src/components/Swimlane/TopRatedTVShows/Item/index.tsx index dc7fa99..bfdec7c 100644 --- a/src/components/Swimlane/TopRatedTVShows/Item/index.tsx +++ b/src/components/Swimlane/TopRatedTVShows/Item/index.tsx @@ -1,6 +1,6 @@ import { NavigationProp, useNavigation } from '@react-navigation/native'; import Card from 'components/Card'; -import Touchable from 'components/Touchable'; +import { Touchable } from 'components/Touchable'; import { Route, RouteParams } from 'navigation'; import React, { memo } from 'react'; import { useShow } from 'store/shows/hooks'; diff --git a/src/components/Swimlane/TopRatedTVShows/index.tsx b/src/components/Swimlane/TopRatedTVShows/index.tsx index 5d25b04..5c5918b 100644 --- a/src/components/Swimlane/TopRatedTVShows/index.tsx +++ b/src/components/Swimlane/TopRatedTVShows/index.tsx @@ -34,9 +34,6 @@ const TopRatedTVShowsSwimlane = ({ hideTitle }: Props) => { showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} data={isLoading && data.length === 0 ? new Array(6).fill(null) : data} - keyExtractor={(item, index) => - `swimlane.top-rated-tv-shows.${item?.id || `index-${index}`}` - } renderItem={({ item }) => } /> diff --git a/src/components/Swimlane/TrendingToday/Item/index.tsx b/src/components/Swimlane/TrendingToday/Item/index.tsx index c42b169..957bbc0 100644 --- a/src/components/Swimlane/TrendingToday/Item/index.tsx +++ b/src/components/Swimlane/TrendingToday/Item/index.tsx @@ -1,6 +1,6 @@ import { NavigationProp, useNavigation } from '@react-navigation/native'; import Card from 'components/Card'; -import Touchable from 'components/Touchable'; +import { Touchable } from 'components/Touchable'; import { Route, RouteParams } from 'navigation'; import React, { memo } from 'react'; import { useMovie } from 'store/movies/hooks'; diff --git a/src/components/Swimlane/TrendingToday/index.tsx b/src/components/Swimlane/TrendingToday/index.tsx index 8a1fc08..59b78e9 100644 --- a/src/components/Swimlane/TrendingToday/index.tsx +++ b/src/components/Swimlane/TrendingToday/index.tsx @@ -35,11 +35,6 @@ const TrendingTodaySwimlane = ({ hideTitle, hasTVPreferredFocus }: Props) => { showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} data={isLoading && data.length === 0 ? new Array(6).fill(null) : data} - keyExtractor={(item, index) => - `swimlane.trending-today.${ - item ? `${item?.type}:${item?.id}` : `index-${index}` - }` - } renderItem={({ item, index }) => ( { + const [hasFocus, setHasFocus] = useState(false); + + const onFocusProxy = useCallback( + (e: NativeSyntheticEvent) => { + setHasFocus(true); + onFocus?.(e); + }, + [onFocus], + ); + + const onBlurProxy = useCallback( + (e: NativeSyntheticEvent) => { + setHasFocus(false); + onBlur?.(e); + }, + [onBlur], + ); + + return ( + }> + + {children} + + + ); + }, +); diff --git a/src/components/Touchable/index.tsx b/src/components/Touchable/index.tsx index 1034727..5eae156 100644 --- a/src/components/Touchable/index.tsx +++ b/src/components/Touchable/index.tsx @@ -1,62 +1,3 @@ -import React, { - forwardRef, - LegacyRef, - memo, - useCallback, - useState, -} from 'react'; -import { - NativeSyntheticEvent, - Platform, - TargetedEvent, - TouchableOpacity, - TouchableOpacityProps, - ViewProps, -} from 'react-native'; - -import { TouchableContextProvider } from './context'; - -interface Props extends TouchableOpacityProps, ViewProps {} - -export type TouchableProps = Props; - -const Touchable = forwardRef( - ({ onFocus, onBlur, children, ...props }: Props, ref) => { - const [hasFocus, setHasFocus] = useState(false); - - const onFocusProxy = useCallback( - (e: NativeSyntheticEvent) => { - setHasFocus(true); - onFocus?.(e); - }, - [onFocus], - ); - - const onBlurProxy = useCallback( - (e: NativeSyntheticEvent) => { - setHasFocus(false); - onBlur?.(e); - }, - [onBlur], - ); - - return ( - }> - - {children} - - - ); - }, -); - -export default memo(Touchable); - +export * from './component'; export * from './useTouchable'; export * from './withTouchable'; diff --git a/src/components/Touchable/types.ts b/src/components/Touchable/types.ts new file mode 100644 index 0000000..dc8647f --- /dev/null +++ b/src/components/Touchable/types.ts @@ -0,0 +1,5 @@ +import { TouchableOpacityProps, ViewProps } from 'react-native'; + +interface Props extends TouchableOpacityProps, ViewProps {} + +export type TouchableProps = Props; diff --git a/src/components/Touchable/withTouchable.tsx b/src/components/Touchable/withTouchable.tsx index 66cdca5..94aa5c9 100644 --- a/src/components/Touchable/withTouchable.tsx +++ b/src/components/Touchable/withTouchable.tsx @@ -1,6 +1,7 @@ import React, { ComponentType, forwardRef } from 'react'; -import Touchable, { TouchableProps } from './index'; +import { Touchable } from './component'; +import { TouchableProps } from './types'; export const withTouchable = >( Component: ComponentType,