Using React Native
To get started, you will need to install MinChat React SDK in your React app.
npm
yarn
npm install @minchat/reactnative
yarn add @minchat/reactnative
Usually, you would create users based on the data from your database. A user is represented by a JSON object.
const currentUser = {
id: "8843223323423" ,
name: "Micheal Saunders" ,
avatar: "urltoavatar.com/avatar.jpg" //optional
}
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 in the currentUser
and the MINCHAT_API_KEY
as props. The API Key can be found on the Minchat dashboard.<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()
const otherUser = {
id: "d8432reb323423" ,
name: "Mercy Wells" ,
avatar: "urltoavatar.com/mercyavatar.jpg" //optional
}
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 = minchat.chat(otherUser)
const chat = minchat.groupChat({name: "Epic Group Chat", members: [ otherUser , thirdUser ] })
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!" }, (error, data)=> { /** */ })
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 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 4mo ago