You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/advanced-usage.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -65,7 +65,7 @@ You can use this URL https://bit.ly/2P0cn2g to test the file message presentatio
65
65
66
66
:::
67
67
68
-
On tap, images will be previewed inside an interactive image gallery. To disable the image gallery pass `disableImageGallery`prop to the `Chat` component.
68
+
On tap, images will be previewed inside an interactive image gallery. To disable the image gallery pass `disableImageGallery`property to the `Chat` component.
69
69
70
70
## Files
71
71
@@ -142,7 +142,7 @@ export default App
142
142
143
143
## Link preview
144
144
145
-
Link preview works automatically, we created a separate library for that, you can found it [here](https://github.com/flyerhq/react-native-link-preview). Usually, however, you'll want to save the preview data so it stays the same, you can do that using `onPreviewDataFetched` callback:
145
+
Link preview works automatically, we created a separate package for that, you can found it [here](https://github.com/flyerhq/react-native-link-preview). It can be disabled by setting `usePreviewData` to false. Usually, however, you'll want to save the preview data so it stays the same, you can do that using `onPreviewDataFetched` callback:
Copy file name to clipboardExpand all lines: docs/basic-usage.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,17 +3,17 @@ id: basic-usage
3
3
title: Basic Usage
4
4
---
5
5
6
-
You start with a `<Chat />` component that will render a chat screen. It has 3 required props:
6
+
You start with a `Chat` component that will render a chat. It has 3 required properties:
7
7
8
-
-`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.
9
-
-`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.
10
-
-`user` - a [User](types#user) object, that has only one required field - an `id`, used to determine the message author.
8
+
*`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.
9
+
*`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.
10
+
*`user` - a [User](types#user) object, that has only one required field - an `id`, used to determine the message author.
11
11
12
12
Below you will find a drop-in example of the chat with only text messages.
13
13
14
14
:::note
15
15
16
-
Try to write any URL, for example, flyer.chat, it should be unwrapped in a rich preview.
16
+
Try to write any URL, for example, `flyer.chat`, it should be unwrapped in a rich preview.
If you created a theme from scratch just pass it to the `theme` prop. We also provide `darkTheme` implementation, you can import it from the library and pass to the `theme` prop.
Copy file name to clipboardExpand all lines: docs/types.md
+1-76Lines changed: 1 addition & 76 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,79 +3,4 @@ id: types
3
3
title: Types
4
4
---
5
5
6
-
There are 3 supported message types at the moment - `File`, `Image` and `Text`. All of them have corresponding "partial" message types, that include only the message's content. "Partial" messages are useful to create the content and then pass it to some kind of a backend service, which will assign fields like `id` or `author` etc, returning a "full" message which can be passed to `messages` prop of the `<Chat />`. In addition to that, there are `Custom` and `Unsupported` types. `Custom` can be used to build anything you want, and `Unsupported` is just a placeholder to have backwards compatibility.
7
-
8
-
## Base
9
-
10
-
All messages should have this, most of these fields will be set by the backend service (you can set `type` and maybe an `error` or `sending` status).
| uri | string | Supports both local resource and remote URL |
36
-
37
-
### File
38
-
39
-
File message is a combination of base and partial file types, where the base's `type` is set to `file`. This is what the chat expects in the `messages` array.
40
-
41
-
## Partial image
42
-
43
-
Even though `height` and `width` are optional, we recommend setting those (because you will anyway have them from the image picker) for a better overall look and feel, since the placeholder of this size will be rendered and when the image is available it will just replace it.
| uri | string | Supports both local resource and remote URL |
51
-
| width? | number | Image's width |
52
-
53
-
### Image
54
-
55
-
Image message is a combination of base and partial image types, where the base's `type` is set to `image`. This is what the chat expects in the `messages` array.
| previewData? |[PreviewData](https://github.com/flyerhq/react-native-link-preview/blob/main/src/types.ts)| You shouldn't probably set this field directly, use `onPreviewDataFetched` callback |
62
-
| text | string | Text |
63
-
64
-
### Text
65
-
66
-
Text message is a combination of base and partial text types, where the base's `type` is set to `text`. This is what the chat expects in the `messages` array.
67
-
68
-
## User
69
-
70
-
The only required field for the user is the `id`, used to determine the message author, however, you can pass additional data if you will want to render all available users for the chat or a conversation tile.
| createdAt? | number | Created user timestamp, in **milliseconds**|
75
-
| firstName? | string | User's first name |
76
-
| id | string | Unique ID |
77
-
| imageUrl? | string | User's avatar remote URL |
78
-
| lastName? | string | User's last name |
79
-
| lastSeen? | number | Timestamp when user was last visible, in **milliseconds**|
80
-
| metadata? | Record<string, any> | Additional custom metadata or attributes related to the user |
81
-
| role? |`admin``agent``moderator``user`| User's role |
6
+
There are 3 supported message types at the moment - `File`, `Image` and `Text`. All of them have corresponding "partial" message types, that include only the message's content. "Partial" messages are useful to create the content and then pass it to some kind of a backend service, which will assign fields like `id` or `author` etc, returning a "full" message which can be passed to `messages` prop of the `Chat` component. In addition to that, there are `Custom` and `Unsupported` types. `Custom` can be used to render anything you want, and `Unsupported` is just a placeholder to have backwards compatibility.
0 commit comments