{"id":2108,"date":"2016-01-07T16:23:09","date_gmt":"2016-01-07T16:23:08","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=2108"},"modified":"2023-06-23T06:06:16","modified_gmt":"2023-06-23T13:06:16","slug":"introducing-the-react-native-couchbase-lite-module","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/","title":{"rendered":"Introducing the React Native Couchbase Lite Module"},"content":{"rendered":"<p>Recently, we published a series of articles on the topic of using Couchbase Lite in a React Native application. In this tutorial, you\u2019ll take it one step further and use the recommended <a href=\"https:\/\/github.com\/fraserxu\/react-native-couchbase-lite\">Couchbase Lite Module<\/a> for React Native (available as an <a href=\"https:\/\/www.npmjs.com\/package\/react-native-couchbase-lite\">npm module<\/a>). You will add the necessary Couchbase Lite code to complete the Login and List Screens for a simple Todo Application. By the end of the tutorial, you will have covered the following core concepts:<\/p>\n<ul>\n<li>Creating, deleting a database and documents within it.<\/li>\n<li>Using Couchbase Views to display List documents by date.<\/li>\n<li>Replications with Basic Authentication.<\/li>\n<li>Creating Sync Gateway Users and using a Sync Function.<\/li>\n<\/ul>\n<h2 id=\"toc_1\" style=\"margin-top: 0.7em;text-align: left\">Requirements<\/h2>\n<ul>\n<li>Node.js 4.0 +<\/li>\n<li>Xcode 7 or higher<\/li>\n<li>An iOS simulator or device running iOS 9 or higher<\/li>\n<\/ul>\n<h2 id=\"toc_1\">Getting Started<\/h2>\n<p>To save some time, I\u2019ve already put together a starter project which contains all the UI code. Go ahead and <a href=\"https:\/\/cl.ly\/2L3t2p2p001q\">download it<\/a> to your preferred directory and unzip the content. Then, from the project directory install the dependencies:<\/p>\n<pre>\r\n<code class=\"language-none\">$ npm install<\/code><\/pre>\n<p>If it\u2019s not already the case, also make sure to have the React Native CLI globally installed:<\/p>\n<pre>\r\n<code class=\"language-none\">$ npm install react-native -g<\/code><\/pre>\n<p>Next, start the React Native daemon:<\/p>\n<pre>\r\n<code class=\"language-none\">$ react-native start<\/code><\/pre>\n<p>Open the Xcode project at <code>ios\/UntitledTodoApp.xcodeproj<\/code> and run it in the simulator or device from Xcode. You should see both screens:<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/original-assets\/2016\/january\/introducing-the-react-native-couchbase-lite-module\/screens-start.png\" \/><\/p>\n<p>Notice that the Log Out button doesn\u2019t take you back to the LogIn Screen and nothing is displayed in the ListView. Don\u2019t worry, you will fix that in the next section :) Remember to enable LiveReload using the <code>Cmd+D<\/code> shortcut (and Chrome Debugging might be handy at times).<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/original-assets\/2016\/january\/introducing-the-react-native-couchbase-lite-module\/tools.png\" \/><\/p>\n<h2 id=\"toc_2\">Local Persistence with Couchbase Lite<\/h2>\n<p>The starter project already contains the React Native Couchbase Lite Module (you can follow the <a href=\"https:\/\/github.com\/fraserxu\/react-native-couchbase-lite\">repo instructions<\/a> to use it in another React Native project). In this section, you will learn how to instantiate a new manager, database and persist documents locally.<\/p>\n<p>Create a new file in <code>src\/database.js<\/code> and paste the following:<\/p>\n<pre>\r\n<code class=\"language-javascript\">\/\/ 1\r\nimport {manager, ReactCBLite} from &apos;react-native-couchbase-lite&apos;;\r\n\r\n\/\/ 2\r\nReactCBLite.init(5984, &apos;admin&apos;, &apos;pass&apos;);\r\n\r\n\/\/ 3\r\nvar database = new manager(&apos;https:\/\/admin:pass@localhost:5984\/&apos;, &apos;myapp&apos;);\r\n\r\n\/\/ 4\r\nmodule.exports = database;<\/code><\/pre>\n<p>The code does the following:<\/p>\n<ol>\n<li>Import the <code>manager<\/code> and <code>ReactCBLite<\/code> objects from the module using the <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\">de-structuring assignment syntax<\/a> in ES6.<\/li>\n<li>Start the Couchbase Lite Listener which serves an HTTP REST API that you will use later.<\/li>\n<li>Instantiate a manager instance passing the URL of the embedded server and the desired database name.<\/li>\n<li>Export the object so it can be used throughout the application life-cycle.<\/li>\n<\/ol>\n<p>Now you can turn your focus to <code>components\/Login.js<\/code>. Add a require statement to use the database object from the previous step:<\/p>\n<pre>\r\n<code class=\"language-javascript\">var database = require(&apos;.\/..\/database&apos;);<\/code><\/pre>\n<p>This component has two input fields and a button, for now you&apos;re not going to check if the user exists\u00a0because Sync Gateway isn&apos;t up and running yet. However, you&apos;ll need to bootstrap the local database\u00a0before opening the List View. Replace the body of <code>_onLoginButtonPressed<\/code> with the following:<\/p>\n<pre>\r\n<code class=\"language-javascript\">var remote = `https:\/\/${this.state.username}:${this.state.password}@localhost:4984\/todos`;\r\nvar credentials = this.state;\r\ndatabase.createDatabase()\r\n  .then((res) =&gt; {\r\n    database.replicate(&apos;myapp&apos;, remote, true);\r\n    database.replicate(remote, &apos;myapp&apos;, true);\r\n    var todoViews = {\r\n      lists: {\r\n        \"map\": function (doc) {\r\n          emit(doc.created_at, doc);\r\n        }.toString()\r\n      }\r\n    };\r\n    database.createDesignDocument(\"_design\/todo\", todoViews);\r\n  }).catch((err) =&gt; {\r\n    throw err\r\n  });\r\nvar data = {username: credentials.username};\r\nthis.props.navigator.push({id: 2, data: data});<\/code><\/pre>\n<p>Here, you\u2019re creating the database and then registering a design document with a view to query documents by their <code>created_at<\/code> property.<\/p>\n<p>Next, open <code>Lists.js<\/code> and require the database object once more:<\/p>\n<pre>\r\n<code class=\"language-none\">var database = require(&apos;.\/..\/database&apos;);<\/code><\/pre>\n<p>In the <code>render<\/code> method, notice the 2 variables <code>leftButtonConfig<\/code> and <code>rightButtonConfig<\/code> that are used in the NavigationBar component in the return statement. They correspond to the <strong>Log Out<\/strong> and <strong>New<\/strong> buttons. The click handlers don\u2019t do anything though so you will change that right away. In the <code>handler<\/code> field of the object literal <code>leftButtonConfig<\/code> add:<\/p>\n<pre>\r\n<code class=\"language-javascript\">database.deleteDatabase()\r\n  .then((res) =&gt; {\r\n    if (res.ok) {\r\n      this.props.navigator.pop();\r\n    }\r\n  });<\/code><\/pre>\n<p>You\u2019re simply deleting the database (and all the documents and potential replications in progress with it) and then returning to the LogIn View.<\/p>\n<p>Next, in the <code>handler<\/code> for the <code>rightButtonConfig<\/code> add:<\/p>\n<pre>\r\n<code class=\"language-javascript\">AlertIOS.alert(\r\n  &apos;New List Title&apos;,\r\n  null,\r\n  [\r\n    {\r\n      text: &apos;Save&apos;,\r\n      onPress: (text) =&gt; {\r\n        database.createDocument({\r\n          type: &apos;list&apos;,\r\n          title: text,\r\n          owner: that.props.data.username,\r\n          created_at: new Date().getTime()\r\n        });\r\n      }\r\n    },\r\n    {\r\n      text: &apos;Cancel&apos;,\r\n      style: &apos;cancel&apos;\r\n    }\r\n  ],\r\n  &apos;plain-text&apos;\r\n);<\/code><\/pre>\n<p>In this case, you\u2019re displaying an alert dialog to enter the new list title and then persisting it to the database (with the <code>owner<\/code> field set to the logged in user and <code>created_at<\/code> field as the current timestamp).<\/p>\n<p>Next, below the <code>getInitialState<\/code> method add the following to query the persisted documents:<\/p>\n<pre>\r\n<code class=\"language-none\">_redrawListView: function() {\r\n  \/\/ 1\r\n  database.queryView(&apos;_design\/todo&apos;, &apos;lists&apos;)\r\n    .then((res) =&gt; {\r\n      this.setState({\r\n        dataSource: this.state.dataSource.cloneWithRows(res.rows)\r\n      });\r\n    });\r\n},\r\ncomponentWillMount: function() {\r\n  \/\/ 2\r\n  var that = this;\r\n  that._redrawListView();\r\n  this.interval = setInterval(function () {\r\n    that._redrawListView();\r\n  }, 100);\r\n},\r\n\/\/ 3\r\ncomponentWillUnmount: function() {\r\n  clearInterval(this.interval);\r\n},<\/code><\/pre>\n<p>Here\u2019s the breakdown of what is happening:<\/p>\n<ol>\n<li><code>_redrawListView<\/code> is a private method that queries the <code>lists<\/code> view and updates the datasource to display the new rows (if any) on the screen.<\/li>\n<li>In <code>componentWillMount<\/code> you\u2019re using the <code>setInterval<\/code> to check for new documents periodically and update the UI.<\/li>\n<li>Stop the interval method when the component unmounts (i.e. when returning to the LogIn View).<\/li>\n<\/ol>\n<p>Create a new list and open <a href=\"https:\/\/localhost:5984\/myapp\/_design\/todo\/_view\/lists\">https:\/\/localhost:5984\/myapp\/_design\/todo\/_view\/lists<\/a> in your browser. You must provide <code>admin<\/code> for the username and <code>pass<\/code>\u00a0for the password. The JSON response should look like this:<\/p>\n<pre>\r\n<code class=\"language-javascript\">{\r\n   \"offset\":0,\r\n   \"rows\":[\r\n      {\r\n         \"key\":1452038776654,\r\n         \"value\":{\r\n            \"owner\":\"james\",\r\n            \"_id\":\"-_XbsYkL8LNqVDSMuZceW71\",\r\n            \"_rev\":\"1-e62876578d58bcdef321bb50470debf4\",\r\n            \"created_at\":1452038776654,\r\n            \"title\":\"Groceries\",\r\n            \"type\":\"list\",\r\n            \"_local_seq\":2\r\n         },\r\n         \"id\":\"-_XbsYkL8LNqVDSMuZceW71\"\r\n      },\r\n      ...\r\n   ],\r\n   \"total_rows\":2\r\n}<\/code><\/pre>\n<p>To display them on the screen you will use the <code>ListView<\/code> component. It has two mandatory attributes:<\/p>\n<ul>\n<li><code>dataSource<\/code> to provide the data: you can pass <code>this.state.dataSource<\/code>.<\/li>\n<li><code>renderRow<\/code> takes a function that returns a <code>View<\/code> object given a list item.<\/li>\n<\/ul>\n<p>You\u2019re missing the method to draw the row, below <code>render<\/code>, add a <code>renderRow<\/code> method with the following:<\/p>\n<pre>\r\n<code class=\"language-javascript\">renderRow: function(list) {\r\n  var list = list.value;\r\n  return (\r\n    \r\n      {list.title}\r\n      {list.owner}\r\n    \r\n  );\r\n}<\/code><\/pre>\n<p>The desired data is held in the <code>value<\/code> field and you\u2019re displaying the title and owner fields in <code>Text<\/code> elements. Back in the return statement of the <code>render<\/code> method, add the <code>ListView<\/code> below the <code>NavigationBar<\/code> component like so:<\/p>\n<pre>\r\n<code class=\"language-none\">\r\n  \r\n  \r\n<\/code><\/pre>\n<p>Persist documents and notice the screen updating itself:<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/original-assets\/2016\/january\/introducing-the-react-native-couchbase-lite-module\/render-list.png\" \/><\/p>\n<h2 id=\"toc_3\">Sync Gateway Configuration<\/h2>\n<p>In this section, you will use Sync Gateway to introduce bi-directional synchronization and server-side user authentication so multiple users can log in. First, download Sync Gateway from <a href=\"https:\/\/www.couchbase.com\/nosql-databases\/downloads\/\">here<\/a> and in the root directory of the project, create a new file named <code>sync-gateway-config.json<\/code> with the following JSON:<\/p>\n<pre>\r\n<code class=\"language-javascript\">{\r\n  \"log\": [\"*\"],\r\n  \"databases\": {\r\n    \"todos\": {\r\n      \"users\": {\r\n        \"moderator\": {\"password\": \"pass\", \"admin_channels\": [\"*\"]},\r\n        \"laura\": {\"password\": \"pass\"},\r\n        \"james\": {\"password\": \"pass\"},\r\n        \"adam\": {\"password\": \"pass\"}\r\n      },\r\n      \"sync\": `function(doc, oldDoc) {\r\n        var channelname = \"chan_\" + doc.owner\r\n        channel(channelname);\r\n        access(doc.owner, channelname);\r\n      }`\r\n    }\r\n  }\r\n}<\/code><\/pre>\n<p>A few important things to note here are:<\/p>\n<ul>\n<li>The <code>GUEST<\/code> mode is disabled (in fact, it\u2019s the case by default) so any unauthenticated requests will be treated as unauthorized and return a 401 status code. For that matter, 4 different users have been created (with names moderator, laura, james, adam). The user named <strong>moderator<\/strong> has access to all channels.<\/li>\n<li>The Sync Function routes a document to a channel named after the <code>owner<\/code> field and grants the <code>owner<\/code> access to that channel.<\/li>\n<\/ul>\n<p>So, in theory, the <strong>moderator<\/strong> should see all List documents where as the <strong>other users<\/strong> will see their own List documents only.<\/p>\n<p>Start Sync Gateway from the command line:<\/p>\n<pre>\r\n<code class=\"language-none\">$ ~\/Downloads\/couchbase-sync-gateway\/bin\/sync_gateway .\/sync-gateway-config.json<\/code><\/pre>\n<p>In <code>Login.js<\/code>, update the <code>_onLoginButtonPressed<\/code> as follow:<\/p>\n<pre>\r\n<code class=\"language-javascript\">\/\/ 1 - Request configuration\r\nvar remote = `https:\/\/${this.state.username}:${this.state.password}@localhost:4984\/todos`;\r\nvar credentials = this.state;\r\nvar settings = {\r\n  method: &apos;POST&apos;,\r\n  headers: {\r\n    &apos;Content-Type&apos;: &apos;application\/json&apos;\r\n  },\r\n  body: JSON.stringify({\r\n    name: credentials.username,\r\n    password: credentials.password\r\n  })\r\n};\r\nvar that = this;\r\n\/\/ 2 - Check that the name\/password are valid\r\nfetch(remote + &apos;\/_session&apos;, settings)\r\n  .then((res) =&gt; {\r\n    switch (res.status) {\r\n      case 200:\r\n        \/\/ 3 - Bootstrap application\r\n        database.createDatabase()\r\n          .then((res) =&gt; {\r\n            database.replicate(&apos;myapp&apos;, remote, true);\r\n            database.replicate(remote, &apos;myapp&apos;, true);\r\n            var todoViews = {\r\n              lists: {\r\n                \"map\": function (doc) {\r\n                  emit(doc.created_at, doc);\r\n                }.toString()\r\n              }\r\n            };\r\n            database.createDesignDocument(\"_design\/todo\", todoViews);\r\n          }).catch((err) =&gt; {\r\n            throw err\r\n          });\r\n        \r\n        var data = {username: credentials.username};\r\n        that.props.navigator.push({id: 2, data: data});\r\n        break;\r\n      case 401:\r\n        \/\/ 4 - Wrong credentials\r\n        alert(&apos;User not found or password incorrect&apos;);\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  });<\/code><\/pre>\n<p>Here\u2019s what is happening:<\/p>\n<ol>\n<li>Construct the URL of the remote database (in this case it\u2019s a Sync Gateway database) and set the name\/password JSON fields in the request body.<\/li>\n<li>Use the <a href=\"https:\/\/developer.couchbase.com\/documentation\/mobile\/1.1.0\/develop\/references\/sync-gateway\/admin-rest-api\/session\/post---db--_session-\/index.html\">POST \/_session<\/a> endpoint to check the name\/password with Sync Gateway.<\/li>\n<li>If the credentials are valid, create the database and once that\u2019s done kick off continuous push\/pull replications and register a design document with a view to query document by their <code>created_at<\/code> property.<\/li>\n<li>If the credentials are invalid, display an alert window.<\/li>\n<\/ol>\n<p>Run the application and login as different users. If possible, run the app on two devices to observe the continuous replication and different read permissions for the moderator:<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/original-assets\/2016\/january\/introducing-the-react-native-couchbase-lite-module\/screens-final.png\" \/><\/p>\n<h2 id=\"toc_4\">Conclusion<\/h2>\n<p>In this tutorial, you learnt how to use the React Native Couchbase Lite module to build a simple Todo application where multiple users can log in.<\/p>\n<p>The final project can be found on <a href=\"https:\/\/github.com\/jamiltz\/ReactNative-UntitledTodoApp\">GitHub<\/a>.<\/p>\n<p>Feel free to share your feedback, findings or ask any questions in the comments below or in the forums. Talk to you soon!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently, we published a series of articles on the topic of using Couchbase Lite in a React Native application. In this tutorial, you\u2019ll take it one step further and use the recommended Couchbase Lite Module for React Native (available as [&hellip;]<\/p>\n","protected":false},"author":51,"featured_media":13873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1810],"tags":[],"ppma_author":[9028],"class_list":["post-2108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-couchbase-mobile"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.7.1 (Yoast SEO v25.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing the React Native Couchbase Lite Module - The Couchbase Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing the React Native Couchbase Lite Module\" \/>\n<meta property=\"og:description\" content=\"Recently, we published a series of articles on the topic of using Couchbase Lite in a React Native application. In this tutorial, you\u2019ll take it one step further and use the recommended Couchbase Lite Module for React Native (available as [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-07T16:23:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-23T13:06:16+00:00\" \/>\n<meta name=\"author\" content=\"James Nocentini, Technical Writer, Mobile, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Nocentini, Technical Writer, Mobile, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\"},\"author\":{\"name\":\"James Nocentini, Technical Writer, Mobile, Couchbase\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/ec4dfbd349cb4a321fb6a92b71a9a7f6\"},\"headline\":\"Introducing the React Native Couchbase Lite Module\",\"datePublished\":\"2016-01-07T16:23:08+00:00\",\"dateModified\":\"2023-06-23T13:06:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\"},\"wordCount\":1133,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"articleSection\":[\"Couchbase Mobile\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\",\"name\":\"Introducing the React Native Couchbase Lite Module - The Couchbase Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2016-01-07T16:23:08+00:00\",\"dateModified\":\"2023-06-23T13:06:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing the React Native Couchbase Lite Module\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/ec4dfbd349cb4a321fb6a92b71a9a7f6\",\"name\":\"James Nocentini, Technical Writer, Mobile, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/09977bdd14473dc23a125f2f74c3e816\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g\",\"caption\":\"James Nocentini, Technical Writer, Mobile, Couchbase\"},\"description\":\"James Nocentini is the Technical Writer in charge of the documentation for Couchbase Mobile. Previously, he worked as a Developer Advocate and before that as a front-end developer for HouseTrip. He also enjoys writing Android tutorials for raywenderlich.com in his spare time.\",\"url\":\"https:\/\/www.couchbase.com\/blog\/author\/james-nocentini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducing the React Native Couchbase Lite Module - The Couchbase Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/","og_locale":"en_US","og_type":"article","og_title":"Introducing the React Native Couchbase Lite Module","og_description":"Recently, we published a series of articles on the topic of using Couchbase Lite in a React Native application. In this tutorial, you\u2019ll take it one step further and use the recommended Couchbase Lite Module for React Native (available as [&hellip;]","og_url":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/","og_site_name":"The Couchbase Blog","article_published_time":"2016-01-07T16:23:08+00:00","article_modified_time":"2023-06-23T13:06:16+00:00","author":"James Nocentini, Technical Writer, Mobile, Couchbase","twitter_card":"summary_large_image","twitter_misc":{"Written by":"James Nocentini, Technical Writer, Mobile, Couchbase","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/"},"author":{"name":"James Nocentini, Technical Writer, Mobile, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/ec4dfbd349cb4a321fb6a92b71a9a7f6"},"headline":"Introducing the React Native Couchbase Lite Module","datePublished":"2016-01-07T16:23:08+00:00","dateModified":"2023-06-23T13:06:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/"},"wordCount":1133,"commentCount":1,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","articleSection":["Couchbase Mobile"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/","url":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/","name":"Introducing the React Native Couchbase Lite Module - The Couchbase Blog","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","datePublished":"2016-01-07T16:23:08+00:00","dateModified":"2023-06-23T13:06:16+00:00","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing the React Native Couchbase Lite Module"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"The Couchbase Blog","description":"Couchbase, the NoSQL Database","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"The Couchbase Blog","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/ec4dfbd349cb4a321fb6a92b71a9a7f6","name":"James Nocentini, Technical Writer, Mobile, Couchbase","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/09977bdd14473dc23a125f2f74c3e816","url":"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g","caption":"James Nocentini, Technical Writer, Mobile, Couchbase"},"description":"James Nocentini is the Technical Writer in charge of the documentation for Couchbase Mobile. Previously, he worked as a Developer Advocate and before that as a front-end developer for HouseTrip. He also enjoys writing Android tutorials for raywenderlich.com in his spare time.","url":"https:\/\/www.couchbase.com\/blog\/author\/james-nocentini\/"}]}},"authors":[{"term_id":9028,"user_id":51,"is_guest":0,"slug":"james-nocentini","display_name":"James Nocentini, Technical Writer, Mobile, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g","author_category":"","last_name":"Nocentini","first_name":"James","job_title":"","user_url":"","description":"James Nocentini is the Technical Writer in charge of the documentation for Couchbase Mobile. Previously, he worked as a Developer Advocate and before that as a front-end developer for HouseTrip. He also enjoys writing Android tutorials for raywenderlich.com in his spare time."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/2108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/comments?post=2108"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/2108\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media?parent=2108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/categories?post=2108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/tags?post=2108"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=2108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}