93 card (#96)

* refactor: wip * refactor: image processing screen * refactor: rename to NativeImage
duguyihou · Apr 7, 2024 · 7b763ec · 7b763ec
1 parent 40a11e0
commit 7b763ec
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 123 deletions.
diff --git a/example/src/components/Card.tsx b/example/src/components/Card.tsx
@@ -0,0 +1,43 @@
+import { StyleSheet, Text, View, type ColorValue } from 'react-native';
+import React from 'react';
+import TurboImage, { type CachePolicy } from 'react-native-turbo-image';
+
+type Props = {
+  size: number;
+  title?: string;
+  url: string;
+  cachePolicy?: CachePolicy;
+  priority?: number;
+  rounded?: boolean;
+  monochrome?: number | ColorValue;
+  borderRadius?: number;
+  blur?: number;
+};
+const Card = ({ title, size, ...props }: Props) => {
+  return (
+    <View style={styles.card}>
+      <TurboImage
+        style={[styles.image, { width: size, height: size }]}
+        {...props}
+      />
+      {title && <Text style={styles.title}>{title}</Text>}
+    </View>
+  );
+};
+
+export default Card;
+
+const styles = StyleSheet.create({
+  card: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingBottom: 20,
+  },
+  image: {
+    margin: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
diff --git a/example/src/screens/CacheScreen.tsx b/example/src/screens/CacheScreen.tsx
@@ -1,7 +1,7 @@
-import { View, StyleSheet, Text, FlatList } from 'react-native';
-import TurboImage from 'react-native-turbo-image';
+import { FlatList } from 'react-native';
 import React from 'react';
-import type { CachePolicy } from '../../../src/types';
+import { type CachePolicy } from 'react-native-turbo-image';
+import Card from '../components/Card';
 
 const images = [
   {
@@ -21,20 +21,6 @@ const images = [
   },
 ];
 
-type Props = {
-  title: string;
-  url: string;
-  cachePolicy: CachePolicy;
-};
-const Card = ({ title, url, cachePolicy }: Props) => {
-  return (
-    <View style={styles.card}>
-      <TurboImage url={url} style={styles.image} cachePolicy={cachePolicy} />
-      <Text style={styles.title}>{title}</Text>
-    </View>
-  );
-};
-
 const CacheScreen = () => {
   return (
     <FlatList
@@ -43,6 +29,7 @@ const CacheScreen = () => {
         <Card
           title={item.title}
           url={item.url}
+          size={200}
           cachePolicy={item.cachePolicy as CachePolicy}
         />
       )}
@@ -52,19 +39,3 @@ const CacheScreen = () => {
 };
 
 export default CacheScreen;
-
-const styles = StyleSheet.create({
-  card: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingBottom: 20,
-  },
-  image: {
-    width: 200,
-    height: 200,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-});
diff --git a/example/src/screens/GridScreen.tsx b/example/src/screens/GridScreen.tsx
@@ -6,7 +6,7 @@ import { blurhashString } from '../mockData';
 const size = Dimensions.get('window').width / 3 - 2;
 const GridScreen = () => {
   const imageURLs = Array.from(
-    { length: 229 },
+    { length: 120 },
     (_, i) => `https://placedog.net/300/300?id=${i + 1}`
   );
   const renderItem = ({ item }: { item: string }) => {

diff --git a/example/src/screens/ImageProcessingScreen.tsx b/example/src/screens/ImageProcessingScreen.tsx
@@ -1,54 +1,33 @@
-import { StyleSheet, Text, View, FlatList, Dimensions } from 'react-native';
+import { FlatList, Dimensions } from 'react-native';
 import React from 'react';
-import TurboImage from '../../../src';
-
-type Processor = 'rounded' | 'blur' | 'monochrome' | 'borderRadius';
-type Props = {
-  title: string;
-  url: string;
-  processors: Processor[];
-};
-const Card = ({ title, url, processors }: Props) => {
-  return (
-    <View style={styles.card}>
-      <TurboImage
-        url={url}
-        style={styles.image}
-        rounded={processors.includes('rounded')}
-        blur={processors.includes('blur') ? 5 : undefined}
-        monochrome={processors.includes('monochrome') ? 'white' : undefined}
-        borderRadius={processors.includes('borderRadius') ? 12 : undefined}
-      />
-      <Text style={styles.title}>{title}</Text>
-    </View>
-  );
-};
+import Card from '../components/Card';
 
 const images = [
   {
     title: 'Original',
     url: 'https://placedog.net/300/300?id=238',
-    processors: [],
   },
   {
-    title: 'Monochrome',
+    title: 'Rounded Corners',
     url: 'https://placedog.net/300/300?id=238',
-    processors: ['monochrome'],
+    borderRadius: 12,
   },
   {
-    title: 'Rounded Corners',
+    title: 'Monochrome',
     url: 'https://placedog.net/300/300?id=238',
-    processors: ['borderRadius'],
+    monochrome: 'white',
+    borderRadius: 12,
   },
   {
     title: 'Circle',
     url: 'https://placedog.net/300/300?id=238',
-    processors: ['rounded'],
+    rounded: true,
   },
   {
     title: 'Blur',
     url: 'https://placedog.net/300/300?id=238',
-    processors: ['rounded', 'blur'],
+    blur: 5,
+    rounded: true,
   },
 ];
 const size = Dimensions.get('window').width / 2 - 2;
@@ -62,7 +41,11 @@ const ImageProcessingScreen = () => {
         <Card
           title={item.title}
           url={item.url}
-          processors={item.processors as Processor[]}
+          size={size}
+          rounded={item.rounded}
+          blur={item.blur}
+          monochrome={item.monochrome}
+          borderRadius={item.borderRadius}
         />
       )}
       keyExtractor={(item) => item.title}
@@ -71,20 +54,3 @@ const ImageProcessingScreen = () => {
 };
 
 export default ImageProcessingScreen;
-
-const styles = StyleSheet.create({
-  card: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingBottom: 20,
-    margin: 1,
-  },
-  image: {
-    width: size,
-    height: size,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-});
diff --git a/example/src/screens/PriorityScreen.tsx b/example/src/screens/PriorityScreen.tsx
@@ -1,20 +1,6 @@
-import { Dimensions, FlatList, StyleSheet, Text, View } from 'react-native';
+import { Dimensions, FlatList } from 'react-native';
 import React from 'react';
-import TurboImage from '../../../src';
-
-type Props = {
-  title: string;
-  url: string;
-  priority: number;
-};
-const Card = ({ title, url, priority }: Props) => {
-  return (
-    <View style={styles.card}>
-      <TurboImage url={url} style={styles.image} priority={priority} />
-      <Text style={styles.title}>{title}</Text>
-    </View>
-  );
-};
+import Card from '../components/Card';
 
 const images = [
   {
@@ -37,7 +23,6 @@ const images = [
     url: 'https://placedog.net/300/300?id=233',
     priority: 3,
   },
-
   {
     title: 'veryhigh',
     url: 'https://placedog.net/300/300?id=234',
@@ -51,27 +36,16 @@ const PriorityScreen = () => {
       data={images}
       numColumns={2}
       renderItem={({ item }) => (
-        <Card title={item.title} url={item.url} priority={item.priority} />
+        <Card
+          title={item.title}
+          url={item.url}
+          priority={item.priority}
+          size={size}
+        />
       )}
       keyExtractor={(item) => item.title}
     />
   );
 };
 
 export default PriorityScreen;
-
-const styles = StyleSheet.create({
-  card: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingBottom: 20,
-  },
-  image: {
-    width: size,
-    height: size,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-});
diff --git a/src/TurboImage.android.tsx b/src/TurboImage.android.tsx
@@ -4,10 +4,10 @@ import type { TurboImageProps } from './TurboImage';
 
 const ComponentName = 'TurboImageView';
 
-const TurboImageView = requireNativeComponent<TurboImageProps>(ComponentName);
-// TODO: 🐵 ref
+const NativeImage = requireNativeComponent<TurboImageProps>(ComponentName);
+
 const TurboImage = (props: TurboImageProps) => {
-  return <TurboImageView {...props} />;
+  return <NativeImage {...props} />;
 };
 
 export default TurboImage;
diff --git a/src/TurboImage.ios.tsx b/src/TurboImage.ios.tsx
@@ -12,10 +12,10 @@ const ComponentName = 'TurboImageView';
 interface Props extends Omit<TurboImageProps, 'monochrome'> {
   monochrome?: ProcessedColorValue | null;
 }
-const TurboImageView = requireNativeComponent<Props>(ComponentName);
+const NativeImage = requireNativeComponent<Props>(ComponentName);
 
 const TurboImage = ({ monochrome, ...props }: TurboImageProps) => {
-  return <TurboImageView {...props} monochrome={processColor(monochrome)} />;
+  return <NativeImage {...props} monochrome={processColor(monochrome)} />;
 };
 
 TurboImage.prefetch = async (urls: string[]) => {

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,3 +1,3 @@
 import TurboImage from './TurboImage';
-
+export type { CachePolicy } from './types';
 export default TurboImage;