# 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 upload&#x73;**.**  Performing a link on the project is usually required before being able to use this package:

`react-native link rn-fetch-blob`&#x20;

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:

{% embed url="<https://github.com/joltup/rn-fetch-blob>" %}

### **Additional setup (for the starter app)**

#### React Navigation

The setup for react navigation is given in the below link

{% embed url="<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

{% embed url="<https://react-native-training.github.io/react-native-elements/docs/getting_started.html>" %}

## Usage

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

```javascript
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:

{% code title="app.js" %}

```javascript
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 */
})

```

{% endcode %}

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](/sdks/web.md#usage-and-user-authorization) section in the Javascript reference.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mitter.io/sdks/web/for-react-native.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.