Comment on page
Using React Native
To get started, you will need to install MinChat React SDK in your React app.
npm
yarn
pnpm
npm install @minchat/reactnative
yarn add @minchat/reactnative
npm install @minchat/reactnative
Import the
MinChatProvider
at the top of your file.add to imports section
import { MinChatProvider} from '@minchat/reactnative';
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.const currentUser = {
username: "micheal",
name: "Micheal Saunders",
}
<MinChatProvider
apiKey={MINCHAT_API_KEY}
user={currentUser}>
{/* your chat app components */}
</MinChatProvider>
Import the
useMinChat
hook at the top of your file.add to imports section
import { useMinChat } from '@minchat/reactnative';
You can now access the MinChat SDK object.
const minchat = useMinChat()
Usually, you would create users based on the data from your database. A User is represented by a JSON object.
before you can start a conversation with another user, the user would first need to be created.
const otherUser = await minchat.createUser({
username: "example-username",
name: "Example Name",
})
You can fetch an already existing user using either their username or their id.
const otherUser = await minchat.fetchUser("example-username")
const otherUser = await minchat.fetchUserById("example-id")
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.
const chat = await minchat.chat(otherUser.username)
const chat = await minchat.groupChat({
title: "Epic Group Chat",
memberUsernames: [ otherUser.username , thirdUser.username ]
})
Messages retrieved in a conversation are paginated to 25 messages at a time.
add to imports section
import { useMessages } from '@minchat/reactnative';
const { messages, loading , error, sendMessage , paginate , paginateLoading } = useMessages(chat)
To send a message, call the
sendMessage(...)
function from useMessages
hook.sendMessage({ text: "Hello World!" })
New messages received are automatically added to the
messages
variable of useMessages(...)
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.import { useChats } from '@minchat/reactnative';
const { chats, loading, error, paginate, paginateLoading } = useChats()
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.
Last modified 2mo ago