Skip to content

Commit

Permalink
refactor: drop local asset support (#324)
Browse files Browse the repository at this point in the history 
* refactor: drop local asset support

* docs: drop local asset support

* docs: update example

* chore(example): update

* chore(example): update

* chore(example): update
  • Loading branch information
@duguyihou
duguyihou authored Aug 24, 2024
1 parent 7dab5a2 commit bff55ce
Show file tree
Hide file tree
Showing 16 changed files with 335 additions and 281 deletions.
60 changes: 25 additions & 35 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ Performant image Component for React Native. Powered by [Nuke](https://github.co
- Support authorization headers
- Support thumbhash and blurhash for placeholder
- Memory cache, aggressive LRU disk cache and HTTP disk cache
- Prefetch, cleanMemoryCache and cleanDiskCache
- Prefetch, dispose, cleanMemoryCache and cleanDiskCache
- Written in TypeScript, Swift and Kotlin
- Support special formats for remote urls (SVG, Gif, APNG)
- Support special formats (SVG, Gif, APNG)

## Installation

Expand All @@ -31,47 +31,37 @@ cd ios && pod install
```ts
import TurboImage from 'react-native-turbo-image';

// remote image

<TurboImage
source={{ uri: "https://placedog.net/300/300?id=1" }}
style={{ width: 300, height: 300 }}
cachePolicy="dataCache"
/>;

// local asset

<TurboImage
source={require('../../assets/local.png')}
source={{ uri: "https://github.com/duguyihou/react-native-turbo-image/assets/9347790/7955aa00-0b53-44d1-88bd-9b5e320db21e" }}
style={{ width: 300, height: 300 }}
/>;

```

## Properties

| Name | Type | Description | Default |
| --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| `source` | `Object`&nbsp;or&nbsp;`number` | (**Required**) Can be an object containing a `uri` string for remote image or local asset using `require`. | - |
| `style` | `ImageStyle` | Styles to be applied to the image. | - |
| `placeholder` | `object` | show placeholder while loading, either `thumbhash` or `blurhash` | - |
| `cachePolicy` | `string` | `dataCache`: aggressive LRU disk cache `urlCache`: HTTP disk cache, respect cache-control | urlCache |
| `resizeMode` | `String` | Resize the image with one of the options: `contain`&nbsp;`cover`&nbsp;`stretch`&nbsp;`center` | contain |
| `indicator` | `object` | `style`: `medium`(default) or `large`.&nbsp; `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 blur 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` | `Object` | (**Required**) an object containing a `uri` string | - |
| `style` | `ImageStyle` | Styles to be applied to the image. | - |
| `placeholder` | `object` | show placeholder while loading, either `thumbhash` or `blurhash` | - |
| `cachePolicy` | `string` | `dataCache`: aggressive LRU disk cache `urlCache`: HTTP disk cache, respect cache-control | urlCache |
| `resizeMode` | `String` | Resize the image with one of the options: `contain`&nbsp;`cover`&nbsp;`stretch`&nbsp;`center` | contain |
| `indicator` | `object` | `style`: `medium`(default) or `large`.&nbsp; `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 blur 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
17 changes: 2 additions & 15 deletions android/src/main/java/com/turboimage/TurboImageViewManager.kt
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
package com.turboimage

import android.content.ContentResolver
import android.net.Uri
import android.os.Build.VERSION.SDK_INT
import android.widget.ImageView.ScaleType
import coil.Coil
Expand All @@ -11,15 +9,13 @@ import coil.decode.SvgDecoder
import coil.dispose
import coil.drawable.CrossfadeDrawable
import coil.load
import coil.request.CachePolicy
import coil.size.Dimension
import coil.size.Size
import com.facebook.react.bridge.ReadableMap
import com.facebook.react.uimanager.PixelUtil
import com.facebook.react.uimanager.SimpleViewManager
import com.facebook.react.uimanager.ThemedReactContext
import com.facebook.react.uimanager.annotations.ReactProp
import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
import okhttp3.Headers
import com.turboimage.decoder.APNGDecoder

Expand Down Expand Up @@ -115,17 +111,8 @@ class TurboImageViewManager : SimpleViewManager<TurboImageView>() {
@ReactProp(name = "source")
fun setSource(view: TurboImageView, source: ReadableMap) {
val uri = source.toHashMap()["uri"] as? String
if (source.hasKey("__packager_asset") && uri?.startsWith("http") == false) {
val resId = ResourceDrawableIdHelper.getInstance().getResourceDrawableId(view.context, uri)
val url = Uri.Builder().scheme(ContentResolver.SCHEME_ANDROID_RESOURCE)
.authority(view.context.resources.getResourcePackageName(resId))
.appendPath(view.context.resources.getResourceTypeName(resId))
.appendPath(view.context.resources.getResourceEntryName(resId)).build()
view.uri = url.toString()
} else {
view.uri = uri
view.headers = source.toHashMap()["headers"] as? Headers
}
view.uri = uri
view.headers = source.toHashMap()["headers"] as? Headers
}

@ReactProp(name = "placeholder")
Expand Down
Loading

0 comments on commit bff55ce

Please sign in to comment.