@poolse/react-native 0.1.2 → 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/CHANGELOG.md +35 -0
- package/README.md +76 -30
- package/dist/index.cjs +2939 -954
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +259 -31
- package/dist/index.d.ts +259 -31
- package/dist/index.js +2917 -957
- package/dist/index.js.map +1 -1
- package/package.json +12 -7
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,41 @@ All notable changes to `@poolse/react-native` are documented here.
|
|
|
4
4
|
Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/);
|
|
5
5
|
versions follow [semver](https://semver.org).
|
|
6
6
|
|
|
7
|
+
## [0.1.5] — 2026-06-03
|
|
8
|
+
|
|
9
|
+
### Added
|
|
10
|
+
|
|
11
|
+
- **`<ImageMosaic>`** — WhatsApp-style multi-image grid (n1 / n2 /
|
|
12
|
+
n3 / n4+ with `+N more` overlay) used inside `<MessageBubble>`
|
|
13
|
+
whenever a message has more than one image attachment. Tapping a
|
|
14
|
+
tile opens a full-screen modal viewer with tap-anywhere-to-close.
|
|
15
|
+
Exported standalone so you can use the layout outside the bubble
|
|
16
|
+
if you want.
|
|
17
|
+
- **Haptic feedback on long-press** in `<MessageRow>` —
|
|
18
|
+
`Haptics.impactAsync(ImpactFeedbackStyle.Medium)` fires when the
|
|
19
|
+
action sheet opens. `expo-haptics` is loaded via a cached lazy
|
|
20
|
+
`require()` — falls back to a silent no-op if you haven't
|
|
21
|
+
installed it, so no peer dep is forced on consumers that don't
|
|
22
|
+
want haptics.
|
|
23
|
+
|
|
24
|
+
### Changed
|
|
25
|
+
|
|
26
|
+
- **Cleaner bubble meta row**: relative timestamp formatting
|
|
27
|
+
(`HH:MM`, `Yesterday HH:MM`, `Mon HH:MM`, `MMM D`), tabular-num
|
|
28
|
+
font variant so the time width stays stable, the read tick sits
|
|
29
|
+
flush with the timestamp, and `edited` is its own italic pill
|
|
30
|
+
rather than inline text.
|
|
31
|
+
|
|
32
|
+
### Notes
|
|
33
|
+
|
|
34
|
+
- `expo-image-picker`, `expo-document-picker`, and `expo-haptics`
|
|
35
|
+
remain OPTIONAL peer dependencies. (0.1.4 briefly promoted them
|
|
36
|
+
to required — that caused npm to reorganize the dep tree on
|
|
37
|
+
consumer installs, ended up with two copies of `@poolse/react` in
|
|
38
|
+
Metro's bundle, and broke `PoolseProvider` context resolution.
|
|
39
|
+
0.1.5 reverts that. 0.1.3 and 0.1.4 were both burned slots and
|
|
40
|
+
should not be used.)
|
|
41
|
+
|
|
7
42
|
## [0.1.0] — 2026-06-03
|
|
8
43
|
|
|
9
44
|
First release. Plug-and-play React Native UI for poolse, mirroring
|
package/README.md
CHANGED
|
@@ -15,12 +15,49 @@ Works out of the box with Expo (SDK 50+) and bare React Native
|
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
17
|
npm install @poolse/sdk @poolse/react @poolse/react-native react-native-svg
|
|
18
|
-
|
|
19
|
-
npx expo install expo-image-picker expo-document-picker
|
|
18
|
+
npx expo install expo-image-picker expo-document-picker expo-haptics
|
|
20
19
|
```
|
|
21
20
|
|
|
21
|
+
All four Expo modules are required peer dependencies — `expo-haptics`
|
|
22
|
+
powers long-press feedback in `<MessageRow>`, and the two pickers
|
|
23
|
+
back `<AttachmentPicker>`. The `npx expo install` form picks
|
|
24
|
+
versions compatible with your installed Expo SDK automatically.
|
|
25
|
+
|
|
22
26
|
## Quick start
|
|
23
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
|
+
|
|
24
61
|
```tsx
|
|
25
62
|
import { PoolseProvider } from '@poolse/react';
|
|
26
63
|
import { PoolseTheme, ConversationView } from '@poolse/react-native';
|
|
@@ -36,33 +73,32 @@ export default function ChatScreen({ conversationId }: { conversationId: string
|
|
|
36
73
|
}
|
|
37
74
|
```
|
|
38
75
|
|
|
39
|
-
The same `<PoolseProvider>` you use on web. Wrap it once at the app
|
|
40
|
-
root if you have multiple chat screens. Drop the `<PoolseTheme>`
|
|
41
|
-
wrapper if you don't need to override the brand defaults — every
|
|
42
|
-
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.
|
|
43
77
|
|
|
44
78
|
## What ships
|
|
45
79
|
|
|
46
|
-
| Component | What it does
|
|
47
|
-
| --------------------------------------------- |
|
|
48
|
-
| `<
|
|
49
|
-
| `<
|
|
50
|
-
| `<
|
|
51
|
-
| `<
|
|
52
|
-
| `<
|
|
53
|
-
| `<
|
|
54
|
-
| `<
|
|
55
|
-
| `<
|
|
56
|
-
| `<
|
|
57
|
-
| `<
|
|
58
|
-
| `<
|
|
59
|
-
| `<
|
|
60
|
-
| `<
|
|
61
|
-
| `<
|
|
62
|
-
| `<
|
|
63
|
-
| `<
|
|
64
|
-
| `<
|
|
65
|
-
| `<
|
|
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`. |
|
|
66
102
|
|
|
67
103
|
## Theming
|
|
68
104
|
|
|
@@ -137,8 +173,18 @@ The wire still carries `user_id` (the poolse uuid) alongside
|
|
|
137
173
|
| Mention picker | Inline dropdown | Modal sheet |
|
|
138
174
|
| Attachment picker | `<input type=file>` | `expo-image-picker` + `expo-document-picker` |
|
|
139
175
|
| Message list | Reversed CSS flexbox | Inverted `FlatList` |
|
|
140
|
-
| 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
|
|
141
189
|
|
|
142
|
-
|
|
143
|
-
hook signatures — is intentionally identical so a web codebase
|
|
144
|
-
ports across with mostly mechanical changes.
|
|
190
|
+
MIT
|