expo: [expo-image] considerable slower than RN Image

Minimal reproducible example

https://github.com/RRaideRR/expo-image-slow

Summary

I have a view inside my app where I display GIFs. For Android, using the Image component from React Native is a lot faster rendering these media files. With expo-image, it will take (on my Android phone) around 5 seconds before the screen comes into view (see attached video).

Notes:

  • after successfully rendering the expo-image screen for the first time, the next opening of the screen is super fast.
  • its also super slow when displaying the same media files in webp format.

The github repro also contains a build of the sample app build-1680256008378.apk.

https://user-images.githubusercontent.com/3411292/229103707-bd0eb848-94c5-4843-919b-6962bb7c34e8.mp4

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 13.3
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
      Yarn: 1.22.19 - ~/.yarn/bin/yarn
      npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
      Watchman: 2023.03.06.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.12.0 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    IDEs:
      Android Studio: 2022.1 AI-221.6008.13.2211.9619390
      Xcode: 14.2/14C18 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~48.0.9 => 48.0.9 
      react: 18.2.0 => 18.2.0 
      react-native: 0.71.4 => 0.71.4 
    npmGlobalPackages:
      eas-cli: 3.8.1
    Expo Workflow: bare

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 5
  • Comments: 16 (6 by maintainers)

Commits related to this issue

Most upvoted comments

In iOS, expo image is causing low FPS in screen transition using react navigation when rendering GIF. anyone experience the same issue?

Same issue over here, is there a timeline when this will be addressed?

@RRaideRR can you please check if there’s a memory leak? I’ve noticed increased memory consumption on my app even though I’ve not used cachePolicy prop (which defaults to disk)