[expo-image] Heavy image source loads slow and blocks the rest from rendering

xmflsct commented 1 year ago

Minimal reproducible example

https://github.com/xmflsct/test-heavy-image-source

Summary

expo-image loads slowly (of heavy image source) even when reading cache from disk.

Default example shows loading some static (small) images as well as some APNG which is around 370k. It can be observed that the APNGs load significantly slower, and worse blocks the rest from rendering including static ones which should be fast.

Changing the source showcases loading static images of both small and large size. In this case, the slowness is more evenly distributed.

Use case is, building a fediverse app that loads custom emojis which mostly are APNGs. Even within one normal fold of screen width, it can be observed that the latter one slows down of loading.

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 13.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
      Yarn: 3.3.1 - ~/.nvm/versions/node/v16.19.0/bin/yarn
      npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
    Managers:
      CocoaPods: 1.12.0 - /Users/user/.rbenv/shims/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    IDEs:
      Android Studio: 2022.2 AI-222.4459.24.2221.9862592
      Xcode: 14.3/14E222b - /usr/bin/xcodebuild
    npmPackages:
      expo: 48.0.10 => 48.0.10 
      react: 18.2.0 => 18.2.0 
      react-native: 0.71.6 => 0.71.6 
    Expo Workflow: managed

alex-pominov commented 1 year ago

Having the same issue using expo-image. There are also high memory consumption when re-mount components using heave images.

RRaideRR commented 1 year ago

hey @xmflsct - I cannot access your minimal reproducible example anymore. I'm having the same problem myself :-/

xmflsct commented 1 year ago

@RRaideRR sorry it may be a mistake, don't know why that repo was private somehow. Updated the repo to be public now.

tsapeta commented 1 year ago

Hey, just wanted to make sure – on which platforms do you experience this issue?

xmflsct commented 1 year ago

@tsapeta sorry forgot to mention, it was on iOS 16.4 simulator.

expo-bot commented 1 year ago

Thank you for filing this issue! This comment acknowledges we believe this may be a bug and there’s enough information to investigate it. However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

gkasdorf commented 1 year ago

@xmflsct Just noticed this issue since there was another similar one. Anyway, tested with this and the image you referenced in that repro seems to work fine now.

Good to see other Fediverse enthusiasts, working with Lemmy myself 😍

chanphiromsok commented 1 year ago

expo-image is highly memory consumption on android with FlatList or FlashList I did not have this issue with react-native-fast-image after migrate to expo it really slow for large list start from 100 up for none nested flatlist or flashlist both are slow when scroll many item

NilsBaumgartner1994 commented 1 month ago

expo-image is highly memory consumption on android with FlatList or FlashList I did not have this issue with react-native-fast-image after migrate to expo it really slow for large list start from 100 up for none nested flatlist or flashlist both are slow when scroll many item

Expericencing the same problem. Fast Image was nice and instantly showed the image. But expo-image "loads" still those image slow

expo / expo