Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor(example) update #334

Merged
merged 2 commits into from
Sep 1, 2024
Merged

Refactor(example) update #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ccae76c
docs: update
duguyihou Sep 1, 2024
78d29df
refactor(example): update
duguyihou Sep 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 23 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,28 +40,28 @@ import TurboImage from 'react-native-turbo-image';

## Properties

| Name | Type | Description | Default |
| --------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| `source` | [`Source`](https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#source) | (**Required**) an object containing a `uri` string | - |
| `style` | `ImageStyle` | Styles to be applied to the image. | - |
| `placeholder` | [`Placeholder`](https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#placeholder) | show placeholder while loading | - |
| `cachePolicy` | [`CachePolicy`](https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#cachepolicy) | Determines how to cache the image | urlCache |
| `resizeMode` | `String` | Resize the image with one of the options: `contain` `cover` `stretch` `center` | contain |
| `indicator` | `object` | `style`: `medium`(default) or `large`.  `color`: `number / ColorValue` | - |
| `fadeDuration` | `number` | The transition duration of the image. Note: To avoid flicking, it will be set to 0 when a placeholder is provided | 300(iOS) / 100(Android) |
| `resize` | `number` | Scales an image to the given width preserving aspect ratio | - |
| `blur` | `number` | The blur radius of the blur filter added to the image | - |
| `monochrome` | `number / ColorValue` | The color applied to the image. note: For iOS and Android Q+, it works with any color. For Android Q-, it only supports grayscale | - |
| `tint` | `number / ColorValue` | The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color. This effect is not applied to placeholders | - |
| `showPlaceholderOnFailure` | `boolean` | Show the placeholder image in the case of a failure | false |
| `rounded` | `boolean` | Round the image into a circle | false |
| `enableLiveTextInteraction` | `boolean` | Enables Live Text interaction with the image (iOS 16+ only) | false |
| `allowHardware` | `boolean` | Setting this to false this will reduce performance on API 26 and above. Only disable this if necessary. [Coil's docs](https://coil-kt.github.io/coil/recipes/#shared-element-transitions) (Android only) | false |
| `format` | `string` | Specify the format for special image, e.g. `svg`, `gif` and `apng`. In general, TurboImage will determine the decoder automatically. | - |
| `onStart` | `Function` | The function to call when the image is fetching. | - |
| `onSuccess` | `Function` | The function to call when the image is successfully loaded | - |
| `onFailure` | `Function` | The function to call when the request failed | - |
| `onCompletion` | `Function` | The function to call when the request is completed | - |
| Name | Type | Description | Default |
| --------------------------- | ----------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| `source` | [`Source`](https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#source) | (**Required**) an object containing a `uri` string | - |
| `style` | `ImageStyle` | Styles to be applied to the image. | - |
| `placeholder` | [`Placeholder`](https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#placeholder) | show placeholder while loading | - |
| `cachePolicy` | [`CachePolicy`](https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#cachepolicy) | Determines how to cache the image | urlCache |
| `resizeMode` | `String` | Resize the image with one of the options: `contain` `cover` `stretch` `center` | contain |
| `indicator` | `object` | `style`: `medium`(default) or `large`.  `color`: `number / ColorValue` | - |
| `fadeDuration` | `number` | The transition duration of the image. Note: To avoid flicking, it will be set to 0 when a placeholder is provided | 300(iOS) / 100(Android) |
| `resize` | `number` | Scales an image to the given width preserving aspect ratio | - |
| `blur` | `number` | The blur radius of the blur filter added to the image | - |
| `monochrome` | `number / ColorValue` | The color applied to the image. note: For iOS and Android Q+, it works with any color. For Android Q-, it only supports grayscale | - |
| `tint` | `number / ColorValue` | The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color. This effect is not applied to placeholders | - |
| `showPlaceholderOnFailure` | `boolean` | Show the placeholder image in the case of a failure | false |
| `rounded` | `boolean` | Round the image into a circle | false |
| `enableLiveTextInteraction` | `boolean` | Enables Live Text interaction with the image (iOS 16+ only) | false |
| `allowHardware` | `boolean` | Setting this to false this will reduce performance on API 26 and above. Only disable this if necessary. [Coil's docs](https://coil-kt.github.io/coil/recipes/#shared-element-transitions) (Android only) | false |
| `format` | `string` | Specify the format for special image, e.g. `svg`, `gif` and `apng`. In general, TurboImage will determine the decoder automatically. | - |
| `onStart` | `Function` | The function to call when the image is fetching. | - |
| `onSuccess` | `Function` | The function to call when the image is successfully loaded | - |
| `onFailure` | `Function` | The function to call when the request failed | - |
| `onCompletion` | `Function` | The function to call when the request is completed | - |


## Methods
Expand Down Expand Up @@ -113,7 +113,7 @@ await TurboImage.clearDiskCache();
| Name | Type | Description |
| ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `urlCache` | `string` | Allows the server to manage caching precisely through cache-control HTTP headers. You can determine which images to cache and caching duration |
| `dataCache` | `string` | Ignores [HTTP cache control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) |
| `dataCache` | `string` | Ignores [HTTP cache control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) |


## Contributing
Expand Down
36 changes: 23 additions & 13 deletions example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>();

Expand All @@ -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>
Expand All @@ -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}
Expand Down
38 changes: 4 additions & 34 deletions example/src/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
],
},
{
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand Down
Loading
Loading