duguyihou / react-native-turbo-image

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

bug: resizeMode behaves differently in Android and IOS with GIF format #342

Closed ng-ha closed 2 months ago

ng-ha commented 2 months ago

What's happening?

resizeMode behaves differently in Android and IOS with GIF format

Reproduceable Code

<TurboImage
        source={{uri: "https://private-user-images.githubusercontent.com/115610452/365133983-03664cbe-6e80-43ab-9432-86b938419d3e.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MTkzNDIsIm5iZiI6MTcyNTYxOTA0MiwicGF0aCI6Ii8xMTU2MTA0NTIvMzY1MTMzOTgzLTAzNjY0Y2JlLTZlODAtNDNhYi05NDMyLTg2YjkzODQxOWQzZS5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNlQxMDM3MjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05Mjc3YTg3M2YxYmJlYzBjMzcyODFlYmJiZTNmNWRjZmZlZGRjNWQ5Mzc3NWE1NjJhYjVjOTMzMzU3MTQ3Njg5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ub8FzrVUDDao_qIdjQAG0cfRxDtNjy1S3DNLdpZt5Gc"}}
        format="gif"
        resizeMode="contain" // or other modes
        style={{width: 200, height: 52, backgroundColor: 'red'}}
      />

Here is the image: f14956ae5657af89dea206f279e81024ade909a7e0489b7ad646f44eea2beff4

Relevant log output

Strech: strech

Cover: cover

Center: center

Contain: contain

Device

iPhone 15

TurboImage Version

1.13.0

Can you reproduce this issue in the TurboImage Example app?

Yes, I can reproduce the same issue in the Example app

duguyihou commented 2 months ago
image

The url does not work for me. I will try to reproduce it with one of the urls in the example

duguyihou commented 2 months ago

@ng-ha

seems it happens to all the images no matter gif or not I was wrong but found another issue, no value passed to Android if I did not set resizemode. It should be contain by default for two platforms.

image
ng-ha commented 2 months ago

@duguyihou i did set resizeMode in Reproduceable Code

duguyihou commented 2 months ago

@ng-ha

duguyihou commented 2 months ago

@ng-ha

The root cause is contentMode is always scaleToFill in iOS. We use Gifu to handle gif image. will check it later if we can fix it in our code.

image
duguyihou commented 2 months ago

@ng-ha Will raise a pr and close it. Let me know if you still have this issue. Thanks

Xnip2024-09-13_07-10-39 Xnip2024-09-13_07-11-21 Xnip2024-09-13_07-12-54 Xnip2024-09-13_07-15-06