# 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*](/reference/user.md)*.*

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](/reference/user.md) is a person that uses your app. Typically, you will have one MinChat [User](/reference/user.md) for each user in your own database.&#x20;

Usually, you would create users based on the data from your database. A [User](/reference/user.md) 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*](/reference/user.md)*.*

## 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](/reference/user.md).

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*](/react-native-sdk/overview.md#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*](/react-native-sdk/overview.md#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*](/react-native-sdk/usemessages-hook.md)*.*

## 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*](/react-native-sdk/usemessages-hook.md#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*](/react-native-sdk/usechats-hook.md)*.*

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](/react-native-sdk.md).


---

# 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.minchat.io/getting-started/using-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.
