@poolse/react-native 2.0.5 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -28
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -25,6 +25,39 @@ versions compatible with your installed Expo SDK automatically.
|
|
|
25
25
|
|
|
26
26
|
## Quick start
|
|
27
27
|
|
|
28
|
+
The drop-in inbox — list + detail with a slide animation between them, edge-swipe back, plus built-in pickers when you provide a user directory:
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { PoolseProvider } from '@poolse/react';
|
|
32
|
+
import { PoolseInbox, PoolseTheme } from '@poolse/react-native';
|
|
33
|
+
|
|
34
|
+
const users = [
|
|
35
|
+
{ externalId: 'alice', name: 'Alice', avatarUrl: 'https://…' },
|
|
36
|
+
{ externalId: 'bob', name: 'Bob', avatarUrl: 'https://…' },
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
export default function InboxScreen() {
|
|
40
|
+
return (
|
|
41
|
+
<PoolseProvider config={{ getToken, userResolver }}>
|
|
42
|
+
<PoolseTheme>
|
|
43
|
+
<PoolseInbox
|
|
44
|
+
title="Chats"
|
|
45
|
+
users={users}
|
|
46
|
+
labelFor={(externalId) =>
|
|
47
|
+
users.find((u) => u.externalId === externalId)?.name ?? externalId
|
|
48
|
+
}
|
|
49
|
+
avatarFor={(externalId) =>
|
|
50
|
+
users.find((u) => u.externalId === externalId)?.avatarUrl ?? null
|
|
51
|
+
}
|
|
52
|
+
/>
|
|
53
|
+
</PoolseTheme>
|
|
54
|
+
</PoolseProvider>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
If you'd rather render a single conversation (your app already owns the navigation), use `<ConversationView>` directly:
|
|
60
|
+
|
|
28
61
|
```tsx
|
|
29
62
|
import { PoolseProvider } from '@poolse/react';
|
|
30
63
|
import { PoolseTheme, ConversationView } from '@poolse/react-native';
|
|
@@ -40,33 +73,32 @@ export default function ChatScreen({ conversationId }: { conversationId: string
|
|
|
40
73
|
}
|
|
41
74
|
```
|
|
42
75
|
|
|
43
|
-
The same `<PoolseProvider>` you use on web. Wrap it once at the app
|
|
44
|
-
root if you have multiple chat screens. Drop the `<PoolseTheme>`
|
|
45
|
-
wrapper if you don't need to override the brand defaults — every
|
|
46
|
-
component has a fallback theme baked in.
|
|
76
|
+
The same `<PoolseProvider>` you use on web. Wrap it once at the app root if you have multiple chat screens. Drop the `<PoolseTheme>` wrapper if you don't need to override the brand defaults — every component has a fallback theme baked in.
|
|
47
77
|
|
|
48
78
|
## What ships
|
|
49
79
|
|
|
50
|
-
| Component | What it does
|
|
51
|
-
| --------------------------------------------- |
|
|
52
|
-
| `<
|
|
53
|
-
| `<
|
|
54
|
-
| `<
|
|
55
|
-
| `<
|
|
56
|
-
| `<
|
|
57
|
-
| `<
|
|
58
|
-
| `<
|
|
59
|
-
| `<
|
|
60
|
-
| `<
|
|
61
|
-
| `<
|
|
62
|
-
| `<
|
|
63
|
-
| `<
|
|
64
|
-
| `<
|
|
65
|
-
| `<
|
|
66
|
-
| `<
|
|
67
|
-
| `<
|
|
68
|
-
| `<
|
|
69
|
-
| `<
|
|
80
|
+
| Component | What it does |
|
|
81
|
+
| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
82
|
+
| `<PoolseInbox>` | Full inbox shell — list + detail with an iOS-style slide animation between them, left-edge-swipe-back to return to the list, built-in `New chat` / `New group` picker sheets when `users` is provided. Imperative ref API: `open`, `openDirect`, `openGroup`, `promptNewChat`, `promptNewGroup`, `close`. |
|
|
83
|
+
| `<ChatHeader>` | Title bar — direct chats resolve the other member's name + avatar via `labelFor` / `avatarFor`, groups show member count, presence-driven green dot. Optional `onBack` button. |
|
|
84
|
+
| `<ConversationView>` | Composed chat surface — message list + composer + typing strip + thread modal. Single `KeyboardAvoidingView` covers the whole thing so the composer stays above the keyboard on both platforms. |
|
|
85
|
+
| `<ThreadView>` | Bottom-sheet modal for thread replies. Reactions + attachments + pull-down-to-close via a 60-pt header drag strip. Composer reuses the same `UploadProvider` queue as the picker. |
|
|
86
|
+
| `<GroupDetailsSheet>` | Bottom sheet showing a group's name, avatar, and member roster with presence. Opened from `<ChatHeader>`'s members button. |
|
|
87
|
+
| `<MessageBubble>` / `<EditableMessageBubble>` | Single message render — body, meta, read receipt, quoted card, in-bubble attachments. |
|
|
88
|
+
| `<MessageRow>` | Bubble + alignment + swipe-to-reply (capture-phase, 1:1 finger follow, sqrt-damped past 50pt threshold). |
|
|
89
|
+
| `<MessageList>` | Inverted `FlatList` wrapper — stick-to-bottom, hold-position, auto-load-more. |
|
|
90
|
+
| `<MessageComposer>` | Text input with auto-grow, send button, attach button, quote chip. |
|
|
91
|
+
| `<MessageActions>` | Long-press menu (reply / quote / edit / delete / copy / react). |
|
|
92
|
+
| `<TypingIndicator>` | Animated three-dot indicator + labels. |
|
|
93
|
+
| `<ConversationList>` | `FlatList` of conversation rows. Direct rows pull the other member's name + avatar via `labelFor` / `avatarFor`; preview reads `last_message_preview` updated in realtime by the SDK's `conversation:updated` subscription. Unread badges. |
|
|
94
|
+
| `<MemberList>` | Member roster with avatars + remove action. |
|
|
95
|
+
| `<MentionInput>` | `TextInput` + autocomplete popover. |
|
|
96
|
+
| `<ReactionStrip>` / `<ReactionPicker>` | Reaction summary + emoji picker sheet. |
|
|
97
|
+
| `<AttachmentPreview>` / `<AttachmentPicker>` | Image or file card. Picker wraps `expo-image-picker` + `expo-document-picker`. |
|
|
98
|
+
| `<UploadQueueStrip>` | Pending uploads with cancel. |
|
|
99
|
+
| `<UserName>` / `useDisplayName(externalId)` | Display name resolution via the SDK's `userResolver`. |
|
|
100
|
+
| `<Avatar>` | Initials + URL fallback, stable color per user. |
|
|
101
|
+
| `<PoolseIcon>` / `<PoolseLogo>` | Brand chrome via `react-native-svg`. |
|
|
70
102
|
|
|
71
103
|
## Theming
|
|
72
104
|
|
|
@@ -141,8 +173,18 @@ The wire still carries `user_id` (the poolse uuid) alongside
|
|
|
141
173
|
| Mention picker | Inline dropdown | Modal sheet |
|
|
142
174
|
| Attachment picker | `<input type=file>` | `expo-image-picker` + `expo-document-picker` |
|
|
143
175
|
| Message list | Reversed CSS flexbox | Inverted `FlatList` |
|
|
144
|
-
| Markdown | `react-markdown` | Plain text
|
|
176
|
+
| Markdown | `react-markdown` | Plain text |
|
|
177
|
+
|
|
178
|
+
Everything else — feature flags, prop names, callback shapes, hook signatures — is intentionally identical so a web codebase ports across with mostly mechanical changes.
|
|
179
|
+
|
|
180
|
+
## Links
|
|
181
|
+
|
|
182
|
+
- Docs: [poolse.dev/docs/sdk/react-native](https://poolse.dev/docs/sdk/react-native)
|
|
183
|
+
- Source: [github.com/poolse-hq/js-sdk](https://github.com/poolse-hq/js-sdk/tree/main/packages/react-native)
|
|
184
|
+
- Web sibling: [`@poolse/react-ui`](https://www.npmjs.com/package/@poolse/react-ui)
|
|
185
|
+
- Hooks (used internally): [`@poolse/react`](https://www.npmjs.com/package/@poolse/react)
|
|
186
|
+
- Core client: [`@poolse/sdk`](https://www.npmjs.com/package/@poolse/sdk)
|
|
187
|
+
|
|
188
|
+
## License
|
|
145
189
|
|
|
146
|
-
|
|
147
|
-
hook signatures — is intentionally identical so a web codebase
|
|
148
|
-
ports across with mostly mechanical changes.
|
|
190
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@poolse/react-native",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.6",
|
|
4
4
|
"description": "Plug-and-play React Native components for poolse — realtime chat infrastructure. Brand-aligned defaults, JS theme tokens, Expo-friendly out of the box.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"keywords": [
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"CHANGELOG.md"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@poolse/react": "2.0.
|
|
48
|
-
"@poolse/sdk": "2.0.
|
|
47
|
+
"@poolse/react": "2.0.6",
|
|
48
|
+
"@poolse/sdk": "2.0.6"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": ">=18",
|