For react-native

Setup

To start developing apps with react native, there are two different phases of setup required:

1. Setting up the npm project

2. Setting up each target platform (currently only iOS and android are supported)

To make the setup easier and to get started quicker, you can also use the react-native-starter-app as your starting point. To do so, simply clone the repo from:

git clone https://github.com/mitterio/react-native-starter.git

And then run the following to install all the dependencies:

yarn install

Do note that you will still have to setup your credentials with APNs and FCM before you can start consuming messages.

Setting up the npm project

To setup the npm project, you simply need to add the dependencies for your project using yarn or npm:

yarn install @mitter-io/react-native @mitter-io/models

Or using npm,

npm install --save @mitter-io/react-native @mitter-io/models

Setting up react-native-firebase

For messaging support the react-native sdk uses react-native-firebase, specifically its Cloud Messaging Module. To setup the same, follow the steps as outlined on https://rnfirebase.io/docs/v5.x.x/installation/android

NOTE If you are using the starter app as a base template, you can skip the section Install Modules in the link above.

Setting up individual platforms

Since cloud messaging works at a lower level than most apps, setting up the Mitter.io SDK for react native requires further setup on each of the target platforms.

iOS

1. Initial setup https://rnfirebase.io/docs/v5.x.x/installation/ios
2. Cloud messaging setup https://rnfirebase.io/docs/v5.x.x/messaging/ios

NOTE If you are using the starter app as a base template, you can skip the section Install Modules in both of the above links.

Android

1. Initial setup https://rnfirebase.io/docs/v5.x.x/installation/android
2. Cloud messaging setup https://rnfirebase.io/docs/v5.x.x/messaging/android

Additional setup (for some optional components)

The native-sdk uses rn-fetch-blob for managing file uploads. Performing a link on the project is usually required before being able to use this package:

react-native link rn-fetch-blob

Doing the above and adding permissions from https://github.com/joltup/rn-fetch-blobshould should just work for you.

If you are facing installation problems please refer to the installation section in the following repo:

GitHub - joltup/rn-fetch-blob: A project committed to making file access and data transfer easier, efficient for React Native developers.GitHub

Additional setup (for the starter app)

React Navigation

The setup for react navigation is given in the below link

https://reactnavigation.org/docs/en/getting-started.html

React Native Elements

The starter app uses the community developed react-native-elements package as a UI toolkit

The setup for react-native-elements is given in the below link

https://react-native-training.github.io/react-native-elements/docs/getting_started.htmlreact-native-training.github.io

Usage

React native has the exact same usage as other Javascript SDKs apart from the fetching the mitter.io object:

const mitter = Mitter.forReactNative(/* your application-id */)

Using the SDK with containerized Mitter.io

If you are using the Mitter.io docker container, you will have to override the API url:

app.js

import { Mitter } from '@mitter-io/react-native'

const mitter = Mitter.forReactNative({
    applicationId: 'fb70ff76-ea33-4bb0-bd59-90853f103202', /* provide your application id here */
    mitterApiBaseUrl: '<mitter-api-url>' /* look below for the values */
}, {
    onTokenExpire: [] /* Your onTokenExpire functions */
})

For the <mitter-api-url>, use the following value:

• If you're using the cloud hosted solution, you can omit the mitterApiBaseUrl key in the config or explicitly set it to https://api.mitter.io

• If you're running it as a docker container set it to http://localhost:<port> where the port is port forwarded by docker for 11902. To find out which port it is, run the following command docker port $(docker ps --filter expose=11901-11903/tcp --format "")

Once you have the mitter object for React Native, you can continue from the Usage and user authorization section in the Javascript reference.