Move Image component to content folder

src/components/Image/index.tsx → src/components/content/Image/Image.tsx

@@ -1,7 +1,11 @@
-import { Image as ExpoImage, ImageProps as ExpoImageProps } from 'expo-image';
+import {
+  Image as ExpoImage,
+  type ImageProps as ExpoImageProps,
+} from 'expo-image';
 import React from 'react';
+import Animated from 'react-native-reanimated';
 
-import { FragmentOf, graphql } from '@/utils/graphql';
+import { graphql, type FragmentOf } from '@/utils/graphql';
 
 export const ImageFragment = graphql(`
   fragment ImageFragment on Image @_unmask {
@@ -35,13 +39,19 @@ export type ImageProps = {
   source?: FragmentOf<typeof ImageFragment> | null;
 } & Omit<ExpoImageProps, 'source'>;
 
-export default function Image({ source, ...props }: ImageProps) {
-  return source ? (
-    <ExpoImage
-      source={viewsToSource(source?.views)}
-      placeholder={source.blurhash ? { blurhash: source.blurhash } : null}
-      transition={500}
-      {...props}
-    />
-  ) : null;
-}
+export default Animated.createAnimatedComponent(
+  React.forwardRef<ExpoImage, ImageProps>(function Image(
+    { source, ...props }: ImageProps,
+    ref
+  ) {
+    return (
+      <ExpoImage
+        ref={ref}
+        source={source ? viewsToSource(source?.views) : null}
+        placeholder={source?.blurhash ? { blurhash: source.blurhash } : null}
+        transition={500}
+        {...props}
+      />
+    );
+  })
+);

src/components/content/Image/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './Image';
+export * from './Image';

src/screens/Landing/Intro/ScrollingPosters.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { StyleSheet, View, ViewStyle, useWindowDimensions } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  useWindowDimensions,
+  type ViewStyle,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   useDerivedValue,
@@ -9,7 +14,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useQuery } from 'urql';
 
-import Image, { ImageFragment } from '@/components/Image';
+import Image, { ImageFragment } from '@/components/content/Image';
 import { graphql } from '@/utils/graphql';
 
 const ScrollingPostersQuery = graphql(