Load local images from documents folder in a DOM component

[zocario]

Minimal reproducible example

https://github.com/zocario/dom-component-local-images

What platform(s) does this occur on?

iOS, Android

Where did you reproduce the issue?

in a development build

Summary

Hello,

I'm implementing a DOM Component that needs access to user-created images (photos taken with the camera) stored locally in the app for offline support.

While struggling to make this work in my DOM Component, I tested it with a manual WebView, and it worked correctly on both Android and iOS by:

• Writing the HTML file in the same folder as the downloaded images (otherwise, it doesn’t work on iOS).
• Setting allowFileAccess={true} on Android.
• Using originWhitelist={["*"]} and allowingReadAccessToURL="file://" on iOS.

I tried applying the same parameters to my DOM Component, but I can't control where the HTML file is located—which, as far as I know, is a requirement on iOS. As a result, it doesn't work on either platform. I don’t see how to solve this with DOM Components unless I use something like react-native-static-server. The Expo documentation mentions public assets, but I don’t think this applies to my use case.

To illustrate the issue, I’ve created a sample project that compares both implementations:

• The WebView approach, which works.
• The DOM Component approach, which doesn’t.

The sample downloads an image to the documents folder and attempts to display it.

Would you say what I’m trying to achieve is actually possible with DOM Components, or is this something that is simply not supported?

Environment

System:
      OS: macOS 15.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
      Yarn: 1.22.22 - /opt/homebrew/bin/yarn
      npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
      Watchman: 2025.02.17.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 24.2, iOS 18.2, macOS 15.2, tvOS 18.2, visionOS 2.2, watchOS 11.2
      Android SDK:
        API Levels: 33, 34, 35
        Build Tools: 30.0.3, 33.0.0, 33.0.1, 34.0.0, 35.0.0
        System Images: android-34 | Google APIs ARM 64 v8a, android-Baklava | Google Play ARM 64 v8a
    IDEs:
      Android Studio: 2023.2 AI-232.10300.40.2321.11567975
      Xcode: 16.2/16C5032a - /usr/bin/xcodebuild
    npmPackages:
      expo: ~52.0.37 => 52.0.37 
      expo-router: ~4.0.17 => 4.0.17 
      react: 18.3.1 => 18.3.1 
      react-dom: 18.3.1 => 18.3.1 
      react-native: 0.76.7 => 0.76.7 
      react-native-web: ~0.19.13 => 0.19.13 
    npmGlobalPackages:
      eas-cli: 15.0.12
    Expo Workflow: bare

Expo Doctor Diagnostics

✔ Check package.json for common issues
✔ Check Expo config for common issues
✔ Check native tooling versions
✔ Check if the project meets version requirements for submission to app stores
✔ Check for common project setup issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for app config fields that may not be synced in a non-CNG project
✔ Check for issues with Metro config
✔ Check npm/ yarn versions
✔ Validate packages against React Native Directory package metadata
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that packages match versions required by installed Expo SDK
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that native modules use compatible support package versions for installed Expo SDK

15/15 checks passed. No issues detected!

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.

[zocario]

Hello, this issue isn't solved, as no answer has been given and the question on how to load local images is still present. In the documentation the mention is made about static public assets but no mention about how we can display content created dynamically in the App, and located for example in the documents folder.

I've updated my sample with last versions of Expo / react native.

@Kudo @EvanBacon At least would it be possible to have a feedback of the Expo team to know if I'm missing something obvious or if it is an actual limitation of DOM components?