Add pagination

docs/advanced-usage.md

@@ -337,3 +337,51 @@ const App = () => {
 
 export default App
 ```
+
+## Custom messages
+
+Use the `renderCustomMessage` function to render whatever message you want. To store the data use a `metadata` map of the `CustomMessage`. You can have multiple different custom messages, you will need to identify them based on some property inside the `metadata` and render accordingly.
+
+## Pagination
+
+Use `onEndReached`, `onEndReachedThreshold` (available through `flatListProps`) and `isLastPage` parameters to control pagination. Here is a simple example based on a [basic usage](basic-usage):
+
+```ts
+// ...
+
+const App = () => {
+  const [page, setPage] = useState(0)
+  // ...
+  useEffect(() => {
+    handleEndReached()
+  }, [])
+
+  const handleEndReached = async () => {
+    const response = await fetch(
+      `https://api.instantwebtools.net/v1/passenger?page=${page}&size=20`
+    )
+    const json = await response.json()
+    const m = json.data.map((e: any) => ({
+      author: user,
+      id: e._id,
+      text: e.name,
+      type: 'text',
+    }))
+    setMessages([...messages, ...m])
+    setPage(page + 1)
+  }
+
+  return (
+    <Chat
+      // ...
+      onEndReached={handleEndReached}
+    />
+  )
+}
+
+export default App
+```
+
+## User avatars & names
+
+To show user avatars & names use `showUserAvatars` and `showUserNames` parameters. Can be used separately. By default, the chat will select one of 10 provided colors as an avatar background and name text color. Color is calculated based on the user's `id` hash code, so it is unique in different rooms. To modify provided colors use `userAvatarNameColors` parameter in [theme](themes). If you want to have one color for everyone, just pass this color as a single item in the `userAvatarNameColors` list.