refactor(example): update

duguyihou · Sep 1, 2024 · 78d29df · 78d29df
1 parent ccae76c
commit 78d29df
Show file tree

Hide file tree

Showing 17 changed files with 230 additions and 108 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -4,18 +4,20 @@ import ProcessingScreen from './screens/ProcessingScreen';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import HomeScreen from './screens/HomeScreen';
 import { type HomeStackParamList, RouteName } from './screens/routes.type';
-import SuccessScreen from './screens/SuccessScreen';
-import FailureScreen from './screens/FailureScreen';
-import ImageScreen from './screens/ImageScreen';
-import UrlCacheScreen from './screens/UrlCacheScreen';
-import DataCacheScreen from './screens/DataCacheScreen';
-import SVGScreen from './screens/SVGScreen';
-import GifScreen from './screens/GifScreen';
+import SuccessScreen from './screens/events/SuccessScreen';
+import FailureScreen from './screens/events/FailureScreen';
+import ImageScreen from './screens/list/ImageScreen';
+import UrlCacheScreen from './screens/list/UrlCacheScreen';
+import DataCacheScreen from './screens/list/DataCacheScreen';
+import SVGScreen from './screens/formats/SVGScreen';
+import GifScreen from './screens/formats/GifScreen';
 import PrefetchScreen from './screens/PrefetchScreen';
-import PlaceholderScreen from './screens/PlaceholderScreen';
+import ThumbhashScreen from './screens/placeholder/ThumbhashScreen';
+import BlurhashScreen from './screens/placeholder/BlurhashScreen';
 import LiveTextScreen from './screens/LiveTextScreen';
-import APNGScreen from './screens/APNGScreen';
-import DetailScreen from './screens/DetailScreen';
+import APNGScreen from './screens/formats/APNGScreen';
+import MemoryCacheKeyScreen from './screens/placeholder/MemoryCacheKeyScreen';
+import MemoryCacheKeyPreviousScreen from './screens/placeholder/MemoryCacheKeyPreviousScreen';
 
 const Stack = createNativeStackNavigator<HomeStackParamList>();
 
@@ -34,8 +36,17 @@ function App() {
         </Stack.Group>
         <Stack.Group>
           <Stack.Screen
-            name={RouteName.Placeholder}
-            component={PlaceholderScreen}
+            name={RouteName.Thumbhash}
+            component={ThumbhashScreen}
+          />
+          <Stack.Screen name={RouteName.Blurhash} component={BlurhashScreen} />
+          <Stack.Screen
+            name={RouteName.MemoryCacheKeyPrevious}
+            component={MemoryCacheKeyPreviousScreen}
+          />
+          <Stack.Screen
+            name={RouteName.MemoryCacheKey}
+            component={MemoryCacheKeyScreen}
           />
         </Stack.Group>
         <Stack.Group>
@@ -44,7 +55,6 @@ function App() {
         <Stack.Group>
           <Stack.Screen name={RouteName.Success} component={SuccessScreen} />
           <Stack.Screen name={RouteName.Failure} component={FailureScreen} />
-          <Stack.Screen name={RouteName.Detail} component={DetailScreen} />
         </Stack.Group>
         <Stack.Screen
           name={RouteName.ImageProcessing}

diff --git a/example/src/data.ts b/example/src/data.ts
@@ -15,7 +15,9 @@ export const routesData = [
   {
     title: 'Placeholder',
     data: [
-      { name: 'thumbhash + blurhash', destination: RouteName.Placeholder },
+      { name: 'thumbhash', destination: RouteName.Thumbhash },
+      { name: 'blurhash', destination: RouteName.Blurhash },
+      { name: 'memoryCacheKey', destination: RouteName.MemoryCacheKeyPrevious },
     ],
   },
   {
@@ -46,7 +48,7 @@ export const routesData = [
     ],
   },
 ];
-export const listScreenData = [
+export const dataCachelistData = [
   {
     url: 'https://placedog.net/300/300?id=1',
     blurhash: 'ULKKWp^+s,_300M{t7tR~XNHE2bI00xuWBRP',
@@ -770,23 +772,6 @@ export const prefetchData = [
   },
 ];
 
-export const placeholderData = [
-  {
-    title: 'thumbhash',
-    url: 'https://placedog.net/300/300?id=127',
-    placeholder: {
-      thumbhash: 'XDkKFwKgVndpiIikloh4Z4iGp/HMDKYI',
-    },
-  },
-  {
-    title: 'blurhash',
-    url: 'https://placedog.net/300/300?id=127',
-    placeholder: {
-      blurhash: 'KBHKzp00_N_19F-V00_2D%',
-    },
-  },
-];
-
 export const liveTextData = [
   {
     url: 'https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:ejihld4sywvvqwe67cdkn4jq/bafkreibcshvfvfi4suht32tcp4ds77y2yghtcig62byqyq3ot4abpsplhu@jpeg',
@@ -796,21 +781,6 @@ export const liveTextData = [
   },
 ];
 
-export const urlCacheData = [
-  {
-    title: 'urlCache',
-    uri: 'https://github.com/duguyihou/react-native-turbo-image/assets/9347790/7955aa00-0b53-44d1-88bd-9b5e320db21e',
-    blurhash: 'UiL;8D-;%Mxut7WCt7f6~qS5RjRijuazM|WB',
-  },
-];
-export const dataCacheData = [
-  {
-    title: 'dataCache',
-    uri: 'https://placedog.net/300/300?id=236',
-    blurhash: 'UELDlXjFE3^*00x^M|M{ve9Y%1Ri~VIVV@-p',
-  },
-];
-
 export const processingData = [
   {
     title: 'Original',

diff --git a/example/src/screens/PlaceholderScreen.tsx b/example/src/screens/PlaceholderScreen.tsx
diff --git a/example/src/screens/FailureScreen.tsx → example/src/screens/events/FailureScreen.tsx b/example/src/screens/FailureScreen.tsx → example/src/screens/events/FailureScreen.tsx
@@ -1,6 +1,6 @@
 import { Text, View, type NativeSyntheticEvent } from 'react-native';
 import React, { useState } from 'react';
-import Card from '../components/Card';
+import Card from '../../components/Card';
 import type { Failure, TaskState } from 'react-native-turbo-image';
 
 type Information = {

diff --git a/example/src/screens/SuccessScreen.tsx → example/src/screens/events/SuccessScreen.tsx b/example/src/screens/SuccessScreen.tsx → example/src/screens/events/SuccessScreen.tsx
@@ -1,15 +1,12 @@
 import {
-  Pressable,
   StyleSheet,
   Text,
   View,
   type NativeSyntheticEvent,
 } from 'react-native';
 import React, { useState } from 'react';
-import Card from '../components/Card';
+import Card from '../../components/Card';
 import type { Success, TaskState } from 'react-native-turbo-image';
-import { useNavigation } from '@react-navigation/native';
-import { RouteName, type HomeStackNavigationProps } from './routes.type';
 
 type Information = {
   width: number;
@@ -24,7 +21,6 @@ const SuccessScreen = () => {
   const handleSuccess = ({ nativeEvent }: NativeSyntheticEvent<Success>) => {
     setInformation(nativeEvent);
   };
-  const navigation = useNavigation<HomeStackNavigationProps>();
 
   const handleStart = ({ nativeEvent }: NativeSyntheticEvent<TaskState>) => {
     setStart(nativeEvent.state === 'running');
@@ -35,18 +31,14 @@ const SuccessScreen = () => {
   }: NativeSyntheticEvent<TaskState>) => {
     setCompletion(nativeEvent.state === 'completed');
   };
-  const navigateToDetailScreen = () => {
-    navigation.navigate(RouteName.Detail, {
-      memoryCacheKey: 'https://placedog.net/100/100?id=121',
-    });
-  };
+
   return (
     <View style={styles.container}>
       <Card
         source={{
-          uri: 'https://placedog.net/100/100?id=121',
+          uri: 'https://placedog.net/300/300?id=121',
         }}
-        style={{ width: 100, height: 100 }}
+        style={styles.image}
         cachePolicy="dataCache"
         onStart={handleStart}
         onSuccess={handleSuccess}
@@ -61,9 +53,6 @@ const SuccessScreen = () => {
       {information?.height && <Text>height: {information?.height}</Text>}
       {information?.source && <Text>source: {information?.source}</Text>}
       {completion && <Text>Complete at {Date()}</Text>}
-      <Pressable style={styles.button} onPress={navigateToDetailScreen}>
-        <Text style={styles.text}>Go to detail</Text>
-      </Pressable>
     </View>
   );
 };
@@ -76,6 +65,10 @@ const styles = StyleSheet.create({
     width: '100%',
     alignItems: 'center',
   },
+  image: {
+    width: 300,
+    height: 300,
+  },
   button: {
     marginHorizontal: 10,
     padding: 10,

diff --git a/example/src/screens/APNGScreen.tsx → example/src/screens/formats/APNGScreen.tsx b/example/src/screens/APNGScreen.tsx → example/src/screens/formats/APNGScreen.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { apngData } from '../data';
-import Card from '../components/Card';
+import { apngData } from '../../data';
+import Card from '../../components/Card';
 import { FlatList } from 'react-native';
 
 const APNGScreen = () => {

diff --git a/example/src/screens/GifScreen.tsx → example/src/screens/formats/GifScreen.tsx b/example/src/screens/GifScreen.tsx → example/src/screens/formats/GifScreen.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { gifData } from '../data';
-import Card from '../components/Card';
+import { gifData } from '../../data';
+import Card from '../../components/Card';
 import { FlatList } from 'react-native';
 
 const GifScreen = () => {

diff --git a/example/src/screens/SVGScreen.tsx → example/src/screens/formats/SVGScreen.tsx b/example/src/screens/SVGScreen.tsx → example/src/screens/formats/SVGScreen.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { svgData } from '../data';
-import Card from '../components/Card';
+import { svgData } from '../../data';
+import Card from '../../components/Card';
 
 const SVGScreen = () => {
   return (

diff --git a/example/src/screens/DataCacheScreen.tsx → example/src/screens/list/DataCacheScreen.tsx b/example/src/screens/DataCacheScreen.tsx → example/src/screens/list/DataCacheScreen.tsx
@@ -1,7 +1,7 @@
 import { Dimensions, FlatList, StyleSheet } from 'react-native';
 import TurboImage from 'react-native-turbo-image';
 import React from 'react';
-import { listScreenData } from '../data';
+import { dataCachelistData } from '../../data';
 
 const size = Dimensions.get('window').width / 3 - 2;
 const DataCacheScreen = () => {
@@ -25,7 +25,7 @@ const DataCacheScreen = () => {
   return (
     <FlatList
       keyExtractor={(item) => item.url}
-      data={listScreenData}
+      data={dataCachelistData}
       numColumns={3}
       getItemLayout={(_, index) => ({
         length: size,

diff --git a/example/src/screens/ImageScreen.tsx → example/src/screens/list/ImageScreen.tsx b/example/src/screens/ImageScreen.tsx → example/src/screens/list/ImageScreen.tsx
@@ -1,6 +1,6 @@
 import { Dimensions, FlatList, Image, StyleSheet } from 'react-native';
 import React from 'react';
-import { listScreenData } from '../data';
+import { dataCachelistData } from '../../data';
 
 const size = Dimensions.get('window').width / 3 - 2;
 const ImageScreen = () => {
@@ -14,7 +14,7 @@ const ImageScreen = () => {
   return (
     <FlatList
       keyExtractor={(item) => item.url}
-      data={listScreenData}
+      data={dataCachelistData}
       numColumns={3}
       getItemLayout={(_, index) => ({
         length: size,

diff --git a/example/src/screens/UrlCacheScreen.tsx → example/src/screens/list/UrlCacheScreen.tsx b/example/src/screens/UrlCacheScreen.tsx → example/src/screens/list/UrlCacheScreen.tsx
@@ -1,7 +1,7 @@
 import { Dimensions, FlatList, StyleSheet } from 'react-native';
 import TurboImage from 'react-native-turbo-image';
 import React from 'react';
-import { urlCacheListData } from '../data';
+import { urlCacheListData } from '../../data';
 
 const size = Dimensions.get('window').width / 3 - 2;
 const UrlCacheScreen = () => {

diff --git a/example/src/screens/placeholder/BlurhashScreen.tsx b/example/src/screens/placeholder/BlurhashScreen.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import TurboImage from 'react-native-turbo-image';
+
+const BlurhashScreen = () => {
+  return (
+    <View style={styles.container}>
+      <TurboImage
+        style={styles.image}
+        source={{
+          uri: 'https://placedog.net/300/300?id=127',
+        }}
+        cachePolicy="dataCache"
+        placeholder={{
+          blurhash: 'KBHKzp00_N_19F-V00_2D%',
+        }}
+      />
+    </View>
+  );
+};
+
+export default BlurhashScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: 300,
+    height: 300,
+  },
+});
diff --git a/example/src/screens/DetailScreen.tsx → .../src/screens/placeholder/DetailScreen.tsx b/example/src/screens/DetailScreen.tsx → .../src/screens/placeholder/DetailScreen.tsx
@@ -2,12 +2,12 @@ import { Linking, Pressable, StyleSheet, Text, View } from 'react-native';
 import React from 'react';
 import TurboImage from 'react-native-turbo-image';
 import { useRoute } from '@react-navigation/native';
-import type { HomeRouteType, RouteName } from './routes.type';
+import type { HomeRouteType, RouteName } from '../routes.type';
 
 const DetailScreen = () => {
   const {
     params: { memoryCacheKey },
-  } = useRoute<HomeRouteType<RouteName.Detail>>();
+  } = useRoute<HomeRouteType<RouteName.MemoryCacheKey>>();
 
   const handlePress = () => {
     Linking.openURL(
@@ -17,7 +17,7 @@ const DetailScreen = () => {
   return (
     <View style={styles.container}>
       <TurboImage
-        source={{ uri: 'https://placedog.net/400/400?id=121' }}
+        source={{ uri: 'https://placedog.net/400/400?id=127' }}
         placeholder={{ memoryCacheKey }}
         style={styles.image}
       />
@@ -43,10 +43,10 @@ const styles = StyleSheet.create({
     height: 400,
   },
   text: {
-    fontSize: 18,
+    fontSize: 20,
   },
   link: {
-    fontSize: 18,
+    fontSize: 20,
     color: 'blue',
   },
 });