search

duguyihou / react-native-turbo-image

Performant image component for React Native
https://www.npmjs.com/package/react-native-turbo-image
MIT License
167 stars 9 forks source link

APNG not working in IOS #288

Closed ng-ha closed 3 months ago

ng-ha commented 3 months ago

Describe the bug

  1. file APNG, GIF not working in both Android, IOS if not specified format. Can the library automatically detect the decoder?

    <TurboImage
    source={{
      uri: 'https://apng.onevcat.com/assets/elephant.png',
    }}
    style={{width: 300, height: 300}}
    //format="apng"
  />

<TurboImage
    source={{
      uri: 'https://www.easygifanimator.net/images/samples/video-to-gif-sample.gif',
    }}
    style={{width: 300, height: 300}}
    //format="gif"
  />

  2. File APNG not working in IOS, event with format specified. On Android it works as expected.

    <TurboImage
    source={{
      uri: 'https://apng.onevcat.com/assets/elephant.png',
    }}
    style={{width: 300, height: 300}}
    format="apng"
  />

  3. Can the library support to work with react-native-color-matrix-image-filters ? I tried, it works well in Android. But in IOS, it didn't work.

    <Brightness amount={0.5}>
<TurboImage
    source={{
         uri: 'https://sample-videos.com/img/Sample-jpg-image-5mb.jpg',
    }}
    style={{width: 300, height: 300}}
    resize={200}
  />
</Brightness>

  4. Seems like those properties in package.json configured wrong because there is no folder lib. It makes the module not found by the IDE on my side.

Wrong:

  "main": "lib/commonjs/index",
  "module": "lib/module/index",
  "types": "lib/typescript/src/index.d.ts",

Correct:

  "main": "src/index",
  "module": "src/index",
  "types": "src/index",
duguyihou commented 3 months ago

@ng-ha

  1. Currently, no. https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#format-string I did not find a way to detect the format. https://github.com/duguyihou/react-native-turbo-image/issues/272
  2. Can you share more information? It works on my side. https://github.com/user-attachments/assets/dd1eb1ae-46e9-4b62-a52a-9c10dfb1b843
  3. I don't have much experience with react-native-color-matrix-image-filters. Can you provide more information? What need to be added or fixed?
  4. I did not change much about package.json. They are provided by create-react-native-library. image
ng-ha commented 3 months ago

@duguyihou

  1. Here it is 
    <TurboImage
    source={{
      uri: 'http://littlesvr.ca/apng/images/clock.png',
    }}
    style={{width: 300, height: 300}}
    format="apng"
  />
  <TurboImage
    source={{
      uri: 'http://littlesvr.ca/apng/images/o_sample.png',
    }}
    style={{width: 300, height: 300}}
    format="apng"
  />
duguyihou commented 3 months ago

@ng-ha It shows nothing on my end. I don't know what the difference among these images. Only elephant shows. I will try to fix it. Thanks for raising this. FYI, TurboImage supports apng by using third party library(APNG). If I cannot fix it, will remove it.

duguyihou commented 3 months ago

@ng-ha seems it is related to image url. It cannot download it as it starts with http instead of https

https://github.com/user-attachments/assets/7c38f39e-68d7-4880-9219-fe91b71e63a9

Error Domain=NSURLErrorDomain Code=-1022 "The resource could not be loaded because the App Transport Security policy requires the use of a secure connection." UserInfo={NSLocalizedDescription=The resource could not be loaded because the App Transport Security policy requires the use of a secure connection., NSErrorFailingURLStringKey=http://littlesvr.ca/apng/images/clock.png, NSErrorFailingURLKey=http://littlesvr.ca/apng/images/clock.png, _NSURLErrorRelatedURLSessionTaskErrorKey=(
ng-ha commented 3 months ago

@duguyihou Oh my bad. It makes sense. I tried download it, try render it by require and it does work. Thank you for checking!

ng-ha commented 3 months ago

@duguyihou Btw, about 4. I'm using yarn 3.6.4 (default package manager in RN 0.74.3). It seems prepare no longer used in yarn version 3: https://github.com/yarnpkg/berry/issues/957 https://yarnpkg.com/advanced/lifecycle-scripts. So i changed prepare to prepack and it worked.

It's my problem since Im forking this project and using it directly by github url. Yours is published through npm so yours is fine!