84 update example (#85)

* refactor: wip * refactor: wip * chore: wip
duguyihou · Apr 5, 2024 · ceb71fc · ceb71fc
1 parent dbba2c6
commit ceb71fc
Show file tree

Hide file tree

Showing 10 changed files with 393 additions and 194 deletions.
diff --git a/example-server/public/101.jpeg b/example-server/public/101.jpeg
diff --git a/example-server/public/237.jpeg b/example-server/public/237.jpeg
diff --git a/example/package.json b/example/package.json
@@ -10,8 +10,8 @@
     "build:ios": "cd ios && xcodebuild -workspace TurboImageExample.xcworkspace -scheme TurboImageExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO"
   },
   "dependencies": {
-    "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.9.26",
     "react": "18.2.0",
     "react-native": "0.73.6",
     "react-native-safe-area-context": "^4.9.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,20 +1,23 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import CacheScreen from './screens/CacheScreen';
-import ListScreen from './screens/ListScreen';
+import GridScreen from './screens/GridScreen';
 import ProcessScreen from './screens/ProcessScreen';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomeScreen from './screens/HomeScreen';
+import { type HomeStackParamList, RouteName } from './screens/routes.type';
 
-const Tab = createBottomTabNavigator();
+const Stack = createNativeStackNavigator<HomeStackParamList>();
 
 function App() {
   return (
     <NavigationContainer>
-      <Tab.Navigator>
-        <Tab.Screen name="Cache" component={CacheScreen} />
-        <Tab.Screen name="List" component={ListScreen} />
-        <Tab.Screen name="Process" component={ProcessScreen} />
-      </Tab.Navigator>
+      <Stack.Navigator>
+        <Stack.Screen name={RouteName.Home} component={HomeScreen} />
+        <Stack.Screen name={RouteName.Cache} component={CacheScreen} />
+        <Stack.Screen name={RouteName.Grid} component={GridScreen} />
+        <Stack.Screen name={RouteName.Process} component={ProcessScreen} />
+      </Stack.Navigator>
     </NavigationContainer>
   );
 }

diff --git a/example/src/screens/CacheScreen.tsx b/example/src/screens/CacheScreen.tsx
@@ -1,16 +1,56 @@
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Text, FlatList } from 'react-native';
 import TurboImage from 'react-native-turbo-image';
 import React from 'react';
+import type { CachePolicy } from '../../../src/types';
 
-const CacheScreen = () => {
-  const imgUrl = 'http://localhost:3000/101.jpeg';
+const images = [
+  {
+    title: 'shared',
+    url: 'https://placedog.net/300/300?id=235',
+    cachePolicy: 'dataCache',
+  },
+  {
+    title: 'dataCache',
+    url: 'https://placedog.net/300/300?id=236',
+    cachePolicy: 'dataCache',
+  },
+  {
+    title: 'urlCache',
+    url: 'http://localhost:3000/237.jpeg',
+    cachePolicy: 'urlCache',
+  },
+];
+
+type Props = {
+  title: string;
+  url: string;
+  cachePolicy: CachePolicy;
+};
+const Card = ({ title, url, cachePolicy }: Props) => {
   return (
-    <View style={styles.container}>
-      <TurboImage url={imgUrl} style={styles.box} cachePolicy="urlCache" />
+    <View style={styles.card}>
+      <TurboImage url={url} style={styles.image} cachePolicy={cachePolicy} />
+      <Text style={styles.title}>{title}</Text>
     </View>
   );
 };
 
+const CacheScreen = () => {
+  return (
+    <FlatList
+      data={images}
+      renderItem={({ item }) => (
+        <Card
+          title={item.title}
+          url={item.url}
+          cachePolicy={item.cachePolicy as CachePolicy}
+        />
+      )}
+      keyExtractor={(item) => item.title}
+    />
+  );
+};
+
 export default CacheScreen;
 
 const styles = StyleSheet.create({
@@ -19,9 +59,19 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  box: {
-    marginVertical: 20,
-    width: 300,
+  card: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingBottom: 20,
+    borderBottomColor: '#23272E',
+    // borderBottomWidth: 1,
+  },
+  image: {
+    width: 200,
     height: 200,
   },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
 });
diff --git a/example/src/screens/ListScreen.tsx → example/src/screens/GridScreen.tsx b/example/src/screens/ListScreen.tsx → example/src/screens/GridScreen.tsx
@@ -4,10 +4,10 @@ import React from 'react';
 import { blurhashString } from '../mockData';
 
 const size = Dimensions.get('window').width / 3;
-const ListScreen = () => {
+const GridScreen = () => {
   const imageURLs = Array.from(
-    { length: 180 },
-    (_, i) => `https://placedog.net/300/200?id=${i + 1}`
+    { length: 234 },
+    (_, i) => `https://placedog.net/300/300?id=${i + 1}`
   );
   const renderItem = ({ item }: { item: string }) => {
     return (
@@ -17,7 +17,6 @@ const ListScreen = () => {
         showActivityIndicator
         blurhash={blurhashString}
         cachePolicy="dataCache"
-        borderRadius={8}
       />
     );
   };
@@ -40,7 +39,7 @@ const ListScreen = () => {
   );
 };
 
-export default ListScreen;
+export default GridScreen;
 
 const styles = StyleSheet.create({
   container: {
@@ -54,7 +53,6 @@ const styles = StyleSheet.create({
   },
   listContent: {
     alignItems: 'center',
-    justifyContent: 'space-between',
     width: '100%',
   },
   card: {

diff --git a/example/src/screens/HomeScreen.tsx b/example/src/screens/HomeScreen.tsx
@@ -0,0 +1,104 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  FlatList,
+} from 'react-native';
+import React from 'react';
+import { useNavigation } from '@react-navigation/native';
+import {
+  RouteName,
+  type HomeStackNavigationProps,
+  type HomeStackParamList,
+} from './routes.type';
+import TurboImage from '../../../src';
+
+const ListItem = ({
+  name,
+  destination,
+}: {
+  name: string;
+  destination: keyof HomeStackParamList;
+}) => {
+  const navigation = useNavigation<HomeStackNavigationProps>();
+  const handlePress = () => {
+    navigation.push(destination);
+  };
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.itemTitle}>{name}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const ButtonItem = ({
+  title,
+  handlePress,
+}: {
+  title: string;
+  handlePress: () => void;
+}) => {
+  return (
+    <TouchableOpacity style={styles.button} onPress={handlePress}>
+      <Text style={styles.buttonTitle}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+const routes = [
+  { name: 'Grid', destination: RouteName.Grid },
+  { name: 'Cache', destination: RouteName.Cache },
+  { name: 'Process', destination: RouteName.Process },
+];
+
+const HomeScreen = () => {
+  const handleClearMemoryCache = async () => {
+    return await TurboImage.clearMemoryCache();
+  };
+  const handleClearDiskCache = async () => {
+    return await TurboImage.clearDiskCache();
+  };
+  return (
+    <View>
+      <FlatList
+        data={routes}
+        renderItem={({ item }) => (
+          <ListItem
+            name={item.name}
+            destination={item.destination as keyof HomeStackParamList}
+          />
+        )}
+        keyExtractor={(item) => item.name}
+      />
+      <ButtonItem
+        title="Clean Memory Cache"
+        handlePress={handleClearMemoryCache}
+      />
+      <ButtonItem title="Clean Disk Cache" handlePress={handleClearDiskCache} />
+    </View>
+  );
+};
+
+export default HomeScreen;
+
+const styles = StyleSheet.create({
+  itemTitle: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  buttonTitle: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  button: {
+    backgroundColor: '#f54338',
+    padding: 5,
+    borderRadius: 5,
+    margin: 5,
+  },
+});
diff --git a/example/src/screens/ProcessScreen.tsx b/example/src/screens/ProcessScreen.tsx
@@ -1,23 +1,57 @@
-import { StyleSheet, Text, ScrollView } from 'react-native';
+import { StyleSheet, Text, View, FlatList } from 'react-native';
 import React from 'react';
 import TurboImage from '../../../src';
 
-const ProcessScreen = () => {
-  const imgUrl = 'https://placedog.net/300/200?id=181';
+type Process = 'rounded' | 'blur' | null;
+type Props = {
+  title: string;
+  url: string;
+  process: Process;
+};
+const Card = ({ title, url, process }: Props) => {
   return (
-    <ScrollView contentContainerStyle={styles.container}>
-      <Text style={styles.title}>Original</Text>
-      <TurboImage url={imgUrl} style={styles.card} showActivityIndicator />
-      <Text style={styles.title}>Rounded</Text>
+    <View style={styles.card}>
       <TurboImage
-        url={imgUrl}
-        style={styles.card}
-        // showActivityIndicator
-        rounded
+        url={url}
+        style={styles.image}
+        rounded={process === 'rounded'}
+        blur={process === 'blur'}
       />
-      <Text style={styles.title}>Blur</Text>
-      <TurboImage url={imgUrl} style={styles.card} showActivityIndicator blur />
-    </ScrollView>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  );
+};
+
+const images = [
+  {
+    title: 'Original',
+    url: 'https://placedog.net/300/300?id=238',
+    process: null,
+  },
+  {
+    title: 'Rounded',
+    url: 'https://placedog.net/300/300?id=238',
+    process: 'rounded',
+  },
+  {
+    title: 'Blur',
+    url: 'https://placedog.net/300/300?id=238',
+    process: 'blur',
+  },
+];
+const ProcessScreen = () => {
+  return (
+    <FlatList
+      data={images}
+      renderItem={({ item }) => (
+        <Card
+          title={item.title}
+          url={item.url}
+          process={item.process as Process}
+        />
+      )}
+      keyExtractor={(item) => item.title}
+    />
   );
 };
 
@@ -30,8 +64,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   card: {
-    width: 200,
-    height: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingBottom: 20,
+  },
+  image: {
+    width: 300,
+    height: 300,
   },
   title: {
     fontSize: 16,

diff --git a/example/src/screens/routes.type.ts b/example/src/screens/routes.type.ts
@@ -0,0 +1,29 @@
+import type { RouteProp } from '@react-navigation/native';
+import type {
+  NativeStackNavigationProp,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+
+export type HomeStackParamList = {
+  Home: undefined;
+  Cache: undefined;
+  Grid: undefined;
+  Process: undefined;
+};
+
+export type HomeStackProps = NativeStackScreenProps<HomeStackParamList>;
+export type HomeStackNavigationProps =
+  NativeStackNavigationProp<HomeStackParamList>;
+
+export type HomeRouteType<K extends keyof HomeStackParamList> = RouteProp<
+  HomeStackParamList,
+  K
+>;
+
+export enum RouteName {
+  HomeStack = 'HomeStack',
+  Home = 'Home',
+  Cache = 'Cache',
+  Grid = 'Grid',
+  Process = 'Process',
+}