# Using React Native

## Installation

To get started, you will need to install MinChat React SDK in your React app.

{% tabs %}
{% tab title="npm" %}

```bash
npm install @minchat/reactnative
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add @minchat/reactnative
```

{% endtab %}

{% tab title="pnpm" %}

```bash
npm install @minchat/reactnative
```

{% endtab %}
{% endtabs %}

## Initialize MinChatProvider

Import the `MinChatProvider` at the top of your file.

{% code title="add to imports section" %}

```jsx
import { MinChatProvider} from '@minchat/reactnative';
```

{% endcode %}

Wrap your chat app with the `MinChatProvider` passing the `MINCHAT_API_KEY` as well as the user as props. The API Key can be found on the [Minchat dashboard](https://minchat.io/sdk).

```jsx
const currentUser = {
        username: "micheal",
        name: "Micheal Saunders",
}

<MinChatProvider
        apiKey={MINCHAT_API_KEY}
        user={currentUser}>
                
                {/* your chat app components  */}

</MinChatProvider>
```

*You can view more details about the currentUser parameters* [*here*](https://docs.minchat.io/reference/user)*.*

Import the `useMinChat` hook at the top of your file.

{% code title="add to imports section" %}

```javascript
import { useMinChat } from '@minchat/reactnative';
```

{% endcode %}

You can now access the MinChat SDK object.

```javascript
const minchat = useMinChat()
```

## Creating a user

In MinChat, a [User](https://docs.minchat.io/reference/user) is a person that uses your app. Typically, you will have one MinChat [User](https://docs.minchat.io/reference/user) for each user in your own database.&#x20;

Usually, you would create users based on the data from your database. A [User](https://docs.minchat.io/reference/user) is represented by a JSON object.

before you can start a conversation with another user, the user would first need to be created.

```javascript
const otherUser = await minchat.createUser({ 
                                  username: "example-username", 
                                  name: "Example Name",
                            })
                            
```

*You can view more details about the user parameters* [*here*](https://docs.minchat.io/reference/user)*.*

## Fetching a user

You can fetch an already existing user using either their username or their id.

<pre class="language-javascript"><code class="lang-javascript"><strong>
</strong><strong>const otherUser = await minchat.fetchUser("example-username")
</strong><strong>
</strong></code></pre>

```javascript

const otherUser = await minchat.fetchUserById("example-id")

```

## Starting a conversation <a href="#start-a-conversation" id="start-a-conversation"></a>

There's not much point in a chat app with only one person using it, so let's create another [User](https://docs.minchat.io/reference/user).

A Conversation(Chat) is a place for two or more users to chat. That could mean a simple direct message between users, or it might be something fancier. MinChat works with all kinds of conversations, from group chats to one on one conversations.

A Conversation(Chat) is a place for two or more users to chat. That could mean a simple direct message between users, or it might be something fancier. MinChat works with all kinds of conversations, from group chats to one on one conversations.

#### One-to-One Conversation

```javascript
const chat = await minchat.chat(otherUser.username)
```

*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/react-native-sdk/overview#start-one-to-one-conversation)*.*

#### Group Chat

```javascript

const chat = await minchat.groupChat({
                                title: "Epic Group Chat", 
                                memberUsernames: [ otherUser.username , thirdUser.username ] 
                            })

```

*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/react-native-sdk/overview#start-group-chat)*.*

## Get Messages

Messages retrieved in a conversation are paginated to 25 messages at a time.

{% code title="add to imports section" %}

```javascript
import { useMessages } from '@minchat/reactnative';
```

{% endcode %}

```javascript
const {
         messages,
         loading,
         error,
         paginate,
         paginateLoading,
         sendMessage,
         updateMessage,
         deleteMessage

      } = useMessages(chat)
```

*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/react-native-sdk/usemessages-hook)*.*

## Send Message

To send a message, call the `sendMessage(...)` function from `useMessages` hook.

```javascript
sendMessage({ text: "Hello World!" })
```

*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/react-native-sdk/usemessages-hook#send-message)*.*

New messages received are automatically added to the `messages` variable of `useMessages(...)`

## Get list of conversations of current user

You can get a list of the conversations of the current user. conversations retrieved are paginated to 25 messages at a time. New conversations started by other users or messages sent to conversations that are on a different page are automatically added to the `chats` array.

```javascript
import { useChats } from '@minchat/reactnative';
```

```javascript
const { chats, loading, error, paginate, paginateLoading } = useChats()
```

*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/react-native-sdk/usechats-hook)*.*

This concludes our setup instructions for our most basic form of integration. In this short guide, you've taken your React Native app to the next level with powerful user-to-user chat. You also learned more about the fundamentals of MinChat, and how it all fits together. Most importantly, you've built a starting point to try out all the features MinChat offers.

For more additional features, view the [Reference Docs](https://docs.minchat.io/react-native-sdk).