kylefang/react-native-chat-ui
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-chat-ui.git synced 2026-05-28 15:44:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feature/v2 (#28)

Browse Source 
* Update types and corresponding properties (#27)

* Update types and corresponding properties

* Change authorId to author object

* Fixes after PR

Co-authored-by: Alex Demchenko <alexdemchenko@yahoo.com>

* Update utils

* Add onMessagePRess and disableImageGallery

* Change message types

* Change onMessagePress

* Change Message and tests

* Add excludeInitialMessage

* Fixes after PR

Co-authored-by: vdanylov <vitaliidanylov1992@gmail.com>
This commit is contained in:
Alex
2021-08-15 21:53:08 +02:00
committed by GitHub
parent 04598cddc1
commit 992464d949
61 changed files with 1529 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/basic-usage.md
View File

@@ -5,15 +5,15 @@ title: Basic Usage
You start with a `<Chat />` component that will render a chat screen. It has 3 required props:
* `messages` - an array of messages to be rendered. Accepts any message, see [types](types). If you have your message types you will need to map those to any of the defined ones. Let us know if we need to add more message types or add more fields to the existing ones.
* `onSendPress` - a function that will have a partial text message as a parameter. See [types](types) for more info on how types are structured. From the partial text message you need to create a text message which will at least have `authorId`, `id`, `text` and `type: 'text'`, this is done by you because we wanted to give you more control over those values.
* `user` - a [User](types#user) object, that has only one required field - an `id`, used to determine the message author.
- `messages` - an array of messages to be rendered. Accepts any message, see [types](types). If you have your message types you will need to map those to any of the defined ones. Let us know if we need to add more message types or add more fields to the existing ones.
- `onSendPress` - a function that will have a partial text message as a parameter. See [types](types) for more info on how types are structured. From the partial text message you need to create a text message which will at least have `author`, `id`, `text` and `type: 'text'`, this is done by you because we wanted to give you more control over those values.
- `user` - a [User](types#user) object, that has only one required field - an `id`, used to determine the message author.
Below you will find a drop-in example of the chat with only text messages.
:::note
Try to write any URL, for example, https://flyer.chat, it should be unwrapped in a rich preview.
Try to write any URL, for example, flyer.chat, it should be unwrapped in a rich preview.
:::
@@ -35,22 +35,22 @@ const uuidv4 = () => {
const v = c === 'x' ? r : (r % 4) + 8
return v.toString(16)
})
}
}
const App = () => {
const userId = '06c33e8b-e835-4736-80f4-63f44b66666c'
const [messages, setMessages] = useState<MessageType.Any[]>([])
const user = { id: '06c33e8b-e835-4736-80f4-63f44b66666c' }
const addMessage = (message: MessageType.Any) => {
setMessages([{ ...message, status: 'read' }, ...messages])
setMessages([message, ...messages])
}
const handleSendPress = (message: MessageType.PartialText) => {
const textMessage: MessageType.Text = {
authorId: userId,
author: user,
createdAt: Date.now(),
id: uuidv4(),
text: message.text,
timestamp: Math.floor(Date.now() / 1000),
type: 'text',
}
addMessage(textMessage)
@@ -63,7 +63,7 @@ const App = () => {
<Chat
messages={messages}
onSendPress={handleSendPress}
user={{ id: userId }}
user={user}
/>
</SafeAreaProvider>
)