cblProvider

react-native-cbl provides a very convenient way to access data from Couchbase Lite using HOC pattern. To activate this ability for components you first need to add <CBLConnector> component to your application, so it will be a ancestor for any underlying component requiring access to Couchbase Lite. This is somewhat similar to <Provider> component in redux:

import { CBLConnection, CBLConnector } from 'react-native-cbl'

const cblConnection = new CBLConnection({
  dbName: 'mydb',
  syncGatewayUrl: 'http://sg.myapp.com/mydb',
  views: { ... },
})

export default class App extends React.Component {
  render() {
    return (
      <CBLConnector connection={cblConnection}>
        ...
      </CBLConnector>
    )
  }
}

After that cblProvider can be used to decorate components requiring some data from Couchbase Lite:

@cblProvider( props => ({
  ...
}))
class ItemView extends React.Component {
  ...
}

Callback passed to cblProvider returns configuration object, keys of this object will be converted to corresponding component props holding data retrieved from Couchbase Lite.

@cblProvider( props => ({
  item: {
    docId: 'documentid',
  },
  subitems: {
    view: 'viewname',
  },
}))
class ItemView extends React.Component {
  render() {
    return (
      <View>
        <Text>{this.props.item.title}</Text>
        { this.props.subitems.map( subitem => <View>{subitem.text}</View> ) }
      </View>
    )
  }
}

Callback function passed to cblProvider accepts component props. This could be used to dynamically generate config:

@cblProvider( props => ({
  item: {
    docId: props.itemId,
  },
  subitems: {
    view: 'viewname',
    params: {
      descending: props.direction === 'desc',
    }
  },
}))

By default cblProvider not only retrieve data once, it also listens to any related changes in database and updates data passed to component accordingly. This behavior can be changed by using live: false parameter:

@cblProvider( props => ({
  item: {
    docId: props.itemId,
    live: false,
  },
  subitems: {
    view: 'viewname',
    live: false,
  },
}))

View queries support additional option params, which modifies the way view is queried by Couchbase Lite. The full list of available options is available at the Couchbase Lite Query API reference.

@cblProvider( props => ({
  items: {
    view: 'viewname',
    params: {
      descending: true,
      startKey: 'a',
      endKey: 'b',
    }
  },
}))