Android, even with file:// prefix, it is not loading into <Image>

[Noitidart]

On Android I am using the following snippet, this is right from the readme - https://github.com/wkh237/react-native-fetch-blob/#download-to-storage-directly

RNFetchBlob
  .config({
    fileCache : true,
    appendExt : ext // i use proper ext here
  })
  .fetch('GET', url)
  .then((res) => {
    imageView = <Image source={{ uri : Platform.OS === 'android' ? 'file://' + res.path() : res.path() }}/>
  })

However it is not loading. There is not even a trigger of onError nor onLoadStart nor onLoadEnd nor onLoad .

I did not add any extra permissions, as I use this same method to load videos to with react-native-video and it works fine. It's just <Image>s, does anyone know why?

[Noitidart]

I have also tried specifying the type key in source like this:

<Image source={{ uri : 'file://' + res.path(), type:ext }}/>

However this did not fix it either.

[Noitidart]

Thanks very much @lll000111 for your help and trying to google. I really appreicate your help, very much! I also searched hard but nothing helped. Doing require('absolute path here') caused a red box error of "_require@http://localhost:8081/index.android.bundle?platform=androind&dev=true&hot=false&minify=false:46:22`, with more stuff that doesnt make sense. I tried doing require('file://absolute path here') and the same happened there. I thought this made sense because require is usually transpiled into something at build time, so I didnt think it would work with a variable string at runtime. Any other ideas sir? :(

[lll000111]

and trying to google. I really appreicate your help, very much! I also searched hard but nothing helped

Well... it would be nice to see all relevant information right away.

with more stuff that doesnt make sense.

Even if it indeed doesn't provide any more information, it would still be nice to see that.

It might help, if nobody comes forward with a solution, if you could create a test case for the test repo for RNFB along the lines of the existing test cases in
https://github.com/wkh237/react-native-fetch-blob-dev/tree/master/test

Reading the description here (link) you could try reading the image as base64 encoded string and using a data: URI.

Unfortunately the example promised on the images page for Local Filesystem Images (link) does not exist, unless they meant the CameraRoll API description.

As I see it, this is mainly a React Native issue, not an RNFB one. You already got your file after all, now it's the Image component's turn to use it.

Did you specify a size?

The documentation says

Unlike with static resources, you will need to manually specify the dimensions of your image.

That's under "Network Images" but I guess that's true for the filesystem as well.

[lll000111]

Feel free to reopen if you have new information.

[Noitidart]

Thank you sir.

Reading the description here (link) you could try reading the image as base64 encoded string and using a data: URI.

If i load as base64, the resources are so big it eventually causes a crash.

Did you specify a size?

Yes I specified with and height

Feel free to reopen if you have new information.

I feel this is closed prematurely, but thanks for bearing with me. I will keep trying. I will try to take time out and write a test as you requested. I have no experience with writing these tests, if you could help me I would really appreciate it. I will go look at the tests now. Things are confusing here, ie setting window attributes - https://github.com/wkh237/react-native-fetch-blob-dev/blob/master/test/test-xmlhttp.js#L17-L22

[lll000111]

You could try asking on StackOverflow, with as detailed information as possible (or they'll get mad and you get downvotes).

[Noitidart]

Thank you sir for re-opening due to my comment. I really respect that. I will close as you originally intended and will try to add the material you recommended here.