The easiest chat UI for React Native & Web
This is a chat UI for React Native & Web. It started as a fork of react-native-gifted-chat and then diverged into something different. It's a simple chat UI that is easy to use and integrate. The original project was something I came to rely on for my own projects, but I decided to make it my own after the author and the maintainers stopped actively supporting it. Feel free to fork and contribute!
yarn add react-native-easy-chat
# or
npm install react-native-easy-chat
You need to be using, at least, React v17 or higher with the new JSX transform.
import React, { useState, useCallback, useEffect } from 'react'
import { EasyChat } from 'react-native-easy-chat'
export function Example() {
const [messages, setMessages] = useState([])
useEffect(() => {
setMessages([
{
_id: 1,
text: 'Hello developer',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://placeimg.com/140/140/any',
},
},
])
}, [])
const onSend = useCallback((messages = []) => {
setMessages((previousMessages) =>
EasyChat.append(previousMessages, messages),
)
}, [])
return (
<EasyChat
messages={messages}
onSend={(messages) => onSend(messages)}
user={{
_id: 1,
}}
/>
)
}
See App.tsx
for a working demo!
See the files in example-slack-message
for an example
of how to override the default UI to make something that looks more like Slack -
with usernames displayed and all messages on the left.
- Install
yarn global add expo-cli
- Install dependencies
yarn install
expo start
- Install
yarn global add expo-cli
- Install dependencies
yarn install
expo start -w
This documentation is a work in progress. You can check the full detailed docs here.