1

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.

ssomnoremac
  • 729
  • 1
  • 8
  • 16
  • Are you storing the image data as a base64 string in Couchbase? – Nic Raboy Jan 25 '16 at 17:22
  • 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? : http://developer.couchbase.com/documentation/mobile/1.1.0/develop/references/sync-gateway/rest-api/document/get---db---doc---attachment-/index.html – sweetiewill Jan 25 '16 at 20:45
  • @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 Jan 25 '16 at 21:34
  • @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 Jan 28 '16 at 22:38
  • It turns out to be React Native stripping out the credentials from the URL https://github.com/fraserxu/react-native-couchbase-lite/issues/11#issuecomment-176881153 So nothing wrong with the CBL Listener :) – jamiltz Jan 29 '16 at 17:47
  • @jamiltz, can this be solved on the RN side? RN uses okhttp and there's a [recipe](https://github.com/square/okhttp/wiki/Recipes) to add credentials. How to do you recompile the react-native npm modules? I modified `OkHttpClientProvider.java` to see if this would work but the file doesn't get recompiled. – ssomnoremac Jan 29 '16 at 21:22
  • I haven't looked into that yet but let's take this discussion to the github issue link above. – jamiltz Jan 30 '16 at 08:19

1 Answers1

1

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}}
ssomnoremac
  • 729
  • 1
  • 8
  • 16
  • Can reference the source too from: https://github.com/InfiniteLibrary/infinite-reader/blob/master/android/app/components/CatalogCell.js#L22 – sweetiewill Feb 05 '16 at 21:11