Local ImageSource uri (file://) throwing an error, possible bug?

[James-Firth]

I'm trying to set an image overlay using a local image saved to the device (testing on iOS currently but also need it working on Android).

My code all works when I use remote URLs, but not the local ones!
I'm using Expo's FileSystem (and I'm using the Bare workflow, mapbox is working otherwise).

I tested the same URI with a basic <Image source={{ uri: 'localuri'}} /> to make sure the file existed and wasn't corrupted ✅ When I use with <MapboxGL.Animated.ImageSource url="localuri"> it errors though!

EDIT: My images are downloaded for offline use which is why my url is a file:// url and can't be hardcoded via the import syntax.

Any ideas or suggestions?
I need local images for offline support in my app so this is a dealbreaker if I can't get it working again.

---

I say "possible bug?" because everything seems like it should be working. I've tried hardcoding in case #1358 was relevant. I also tried implementing the changes they suggested to test just in case.

---

Example logs
First shows the image url (on the simulator), then it prints the props which I pass to the ImageSource and RasterLayer
Then finally the iOS error.
I get a similar log on-device for the path (though it's appropriately file://var/mobileContainers/Data/Application/...)

[Sat Jul 10 2021 22:35:48.309]  LOG      IMAGE URL file:///Users/jamesfirth/Library/Developer/CoreSimulator/Devices/<REDACTED ID>/data/Containers/Data/Application/<REDACTED ID>/Documents/6c75c14e-fbcd-4120-ba1b-e059eea42305.png
[Sat Jul 10 2021 22:35:48.369]  LOG      PROPS {"coordinates": [[-0.0020588235294117644, 0.001], [0.0020588235294117644, 0.001], [0.0020588235294117644, -0.001], [-0.0020588235294117644, -0.001]], "id": "jamestest", "url": "file:///Users/jamesfirth/Library/Developer/CoreSimulator/Devices/9<REDACTED ID>/data/Containers/Data/Application/<REDACTED ID>/Documents/6c75c14e-fbcd-4120-ba1b-e059eea42305.png"}
[Sat Jul 10 2021 22:35:48.668]  ERROR    Mapbox error [event]:Style [code]:-1 [message]:Failed to load source jamestest:  {"filePath": "virtual bool mbgl::MGLCoreLoggingObserver::onRecord(mbgl::EventSeverity, mbgl::Event, int64_t, const std::string &)", "level": "error", "line": 30, "message": "[event]:Style [code]:-1 [message]:Failed to load source jamestest: "}

"jamestest" is the id I gave the imagesource

[ferdicus]

hey there,
did you check out this example?
https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/ImageOverlay.js

Should be doing exactly what you're trying to achieve, if I'm not mistaken.

[ferdicus]

Sorry for all the posts figured a stream was better than a dead convo for anyone in the future.

Oh, please don't be - I prefer the way to the solution documented, all good 👍🏿

If the solution requires code changes, sure, go for a PR 👍🏿
Otherwise I think this Discussion thread with an updated Description Body will suffice.

Thanks again

[James-Firth]

@ferdicus Okay I did a bit more testing today.

The simplest solution would be a documentation change, but I also think we could make a code change to automatically handle it.

Documentation Clarification/Example Route

This is is the doc that would need to be updated: https://github.com/react-native-mapbox-gl/maps/blob/master/docs/ImageSource.md

I think it would be useful to provide clarification on the path format for url with locally stored images and perhaps providing an example:

On Android I believe you must begin the url with file:// eg: file:///var/path/to/image.png.
On iOS you explicitly must not include the file:// protocol and simply provide a full system path. eg: /var/path/to/image.png

In #1358 they mentioned using joltup/rn-fetch-blob (which is no longer maintained) which does not include the protocol prefix. Expo's FileSystem library however does (which I was initially using).

Dev Experience/Code Change Route

The alternative would be a code change in ImageSource.m (and ideally the Android equivalent but I haven't looked into it yet), which I would be happy to make if you think it would be useful?

My idea is similar to how it checks for the http prefix, we could check for file:// and strip it out if it exists and leave it as-is if it's not provided.

[ferdicus]

Hey @James-Firth,
we can go either way, I'll leave it up to you.

In any case, I'd ask for a reproducible example of before/ after with both platforms.

As for the code change, if it's just about altering the url when passing it on, I think we could also take care of that before we patch it though to native in the JS layer via react-native Platform api:
Test for it here javascript/components/Images.js and substring where required.

WDYT?

[James-Firth]

@ferdicus Okay cool, I'm pretty busy with work for the next week or two but I'll see if I can sneak in Repro examples.

I think if we can change it in the JS layer that would be easier for more react-native devs to understand so I think I'd prefer doing it there if possible for maintainability especially if that's the area of comfort for the Maintainers here too.

[James-Firth]

Just wanted to say I hadn't forgotten about this, the project we're on (using this!) has just gotten surprisingly busy!