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,