Introduction

In this tutorial, you will learn how to use Couchbase Lite in a React Native project.

The sample project is an application that allows users to search and bookmark hotels from a Couchbase Lite database. The application contains 2 screens:

  • Bookmarks Screen: to list the bookmarked hotels. You can unbookmark a previously bookmarked hotel from this screen

  • Search Screen: to search for hotels by providing a location and/or full-text search query. You can bookmark (or unbookmark) a hotel from this screen.

  • Android

  • iOS

android flow
ios flow

Architecture

The user Interface is written in JavaScript while the business logic and data model is written in native Java. The data model uses Couchbase Lite as the embedded data persistence layer. React Native module acts as the bridging layer between the JavaScript layer and the native Java layer.

This architecture allows you to write the User Interface code once for both iOS and Android apps while leveraging Couchbase Lite’s native Android framework for data management.

  • Android

  • iOS

arch android
arch ios

Data Model

The data model for the app is very straightforward. There are two types of documents:

  • The "bookmarkedhotels" document which includes the list of Ids corresponding to the hotels that have been bookmarked

  • The "hotel" document which contains the details of the bookmarked hotel. The bookmarkedhotels document references the hotel document.

datamodel

Note that although we have modeled our data using a "by Reference" /normalized model, since Couchbase Lite is JSON Document store, you have the flexibility to embed the details of the hotels within the bookmarkedhotels hotels.