[expo-image] Multi-second startup stall on low-end Android

[gaearon]

Minimal reproducible example

https://github.com/bluesky-social/social-app/tree/expo-bug-image-stall-repro

git clone https://github.com/bluesky-social/social-app.git
cd social-app
git checkout expo-bug-image-stall-repro

yarn
yarn prepare -p android
yarn android --device --variant release

This might look like a huge repo but the entire thing is in src/App.native.ts. Ignore other files.

Summary

Rendering even a single expo-image on initial render stalls the startup time on low-end Android by ~4.5 seconds.

I'm testing on Samsung Galaxy A12.

With expo-image

import React, {useEffect} from 'react'
import {Image} from 'expo-image'
import * as SplashScreen from 'expo-splash-screen'

SplashScreen.preventAutoHideAsync()

export default function App() {
  // init
  useEffect(() => {
    SplashScreen.hideAsync()
    console.log('hiding splash')
  }, [])

  return (
    <Image
      style={{
        flex: 1,
      }}
      source={{
        uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/IMO_9811000_EVER_GIVEN_%2809%29.JPG/800px-IMO_9811000_EVER_GIVEN_%2809%29.JPG',
      }}
    />
  )
}

It takes eight seconds to see any content:

before.mov

This is a production build.

With RN Image

import React, {useEffect} from 'react'
import {Image} from 'react-native' // <-- I only changed this line
import * as SplashScreen from 'expo-splash-screen'

SplashScreen.preventAutoHideAsync()

export default function App() {
  // init
  useEffect(() => {
    SplashScreen.hideAsync()
    console.log('hiding splash')
  }, [])

  return (
    <Image
      style={{
        flex: 1,
      }}
      source={{
        uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/IMO_9811000_EVER_GIVEN_%2809%29.JPG/800px-IMO_9811000_EVER_GIVEN_%2809%29.JPG',
      }}
    />
  )
}

Bam, it shows content immediately (okay, in two seconds):

after.mov

Environment

expo-env-info 1.0.5 environment info:
System:
OS: macOS 13.2.1
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.16.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.5.1 - /usr/local/bin/npm
Watchman: 2023.10.23.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.13.0 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9514443
Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
npmPackages:
@expo/webpack-config: ^19.0.0 => 19.0.0
expo: ^49.0.8 => 49.0.8
react: 18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
react-native: 0.72.5 => 0.72.5
react-native-web: ~0.19.6 => 0.19.8
Expo Workflow: bare

[lukmccall]

Hi @gaearon, thanks for reporting this issue. We are actively working on finding a solution and will keep you informed of any updates.

[lukmccall]

Just wanted to give a quick update on the progress. I have identified the root cause of the slow boot time and developed some easy fixes. Currently, 4 PRs have been created, and with these changes, the startup time should be much smoother. Although the react-native version still seems a bit faster, I will continue working on it to ensure the difference becomes unnoticeable.

[gaearon]

Thank you!!