React-Native Android Image Source from Couchbase Lite

Question

Using this couchbase module with react-native Android provides a great API to get and put to the local couchbase-lite database. However, what I want to do is use a thumbnail attachment of a document as the URI for the source attribute of the Image component. Like this:

var imageURI = 'http://localhost:5984/demoapp/' + this.props.book.thumbnail
...
<Image source={{uri: imageURI}} \>

I've logged the uri and verified that it is properly constructed and also forwarded out the local database port to make sure the attachment was replicated from the source. Yet when the ListView of items renders it's missing the thumbnails. I've also tested the ListView with a web url for the images and it worked sometimes and other times not. Like with a couchdb attachment, yes; but with a cloudant attachment, no.

I'd imagine this has something to do with the http service that is used for the Image component in Android and the request headers or the response headers from the couchbase lite instance on the device. So far, I haven't found anything though.

Are you storing the image data as a base64 string in Couchbase? — Nic Raboy
The inconsistencies that occur, are they always yes for CouchDB and no for Cloudant or it varies? Assuming that your binary data stored in JSON is base64-encoded, do you know if the return is a JSON or MIME multipart/related ? Also do you get 200's from all your sources? : developer.couchbase.com/documentation/mobile/1.1.0/develop/… — sweetiewill
@sweetiewill, it's not JSON base64, it's MIME as attachment, which works when hitting the internet consistently using couchDB . Do you know how to monitor network in RN? Could it be a CORS issue? Again, where can I see that? — ssomnoremac
@NicRaboy, this isn't a react-native issue; rather, an Android one. What are your thoughts. How I am supposed to interpret the docs that say: Each attachment is also tagged with a MIME type, which isn't used by Couchbase Lite but can help your application interpret its contents — ssomnoremac
It turns out to be React Native stripping out the credentials from the URL github.com/fraserxu/react-native-couchbase-lite/issues/… So nothing wrong with the CBL Listener :) — jamiltz

ssomnoremac ssomnoremac · Accepted Answer · 2016-02-05T21:08:09

More of a workaround than a solution: store images as base64 data and access them like so:

var imageURI = 'data:image/jpeg;base64,' + this.props.book._attachments["thumbnail.jpg"].data;
...

<Image source={{uri: imageURI}}

React-Native Android Image Source from Couchbase Lite

1 Answers