react-native-gifted-chat 3.0.0-alpha.0 → 3.0.0
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 +295 -0
- package/README.md +71 -95
- package/package.json +2 -2
- package/src/Actions.tsx +27 -18
- package/src/Composer.tsx +21 -84
- package/src/Constant.ts +0 -9
- package/src/GiftedChat/index.tsx +52 -163
- package/src/GiftedChat/types.ts +11 -12
- package/src/InputToolbar.tsx +6 -11
- package/src/MessageImage.tsx +135 -65
- package/src/{MessageContainer → MessagesContainer}/components/Item/index.tsx +21 -17
- package/src/{MessageContainer → MessagesContainer}/components/Item/types.ts +3 -2
- package/src/{MessageContainer → MessagesContainer}/index.tsx +18 -14
- package/src/{MessageContainer → MessagesContainer}/styles.ts +12 -5
- package/src/{MessageContainer → MessagesContainer}/types.ts +4 -2
- package/src/Send.tsx +40 -22
- package/src/__tests__/DayAnimated.test.tsx +1 -1
- package/src/__tests__/GiftedChat.test.tsx +0 -28
- package/src/__tests__/{MessageContainer.test.tsx → MessagesContainer.test.tsx} +7 -7
- package/src/__tests__/__snapshots__/Actions.test.tsx.snap +31 -23
- package/src/__tests__/__snapshots__/Composer.test.tsx.snap +29 -30
- package/src/__tests__/__snapshots__/Constant.test.tsx.snap +0 -2
- package/src/__tests__/__snapshots__/GiftedChat.test.tsx.snap +31 -54
- package/src/__tests__/__snapshots__/InputToolbar.test.tsx.snap +102 -31
- package/src/__tests__/__snapshots__/MessageImage.test.tsx.snap +252 -1
- package/src/__tests__/__snapshots__/Send.test.tsx.snap +189 -49
- package/src/index.ts +1 -1
- package/src/styles.ts +5 -0
- package/src/types.ts +1 -1
- package/CHANGELOG_2.8.1_to_2.8.2-alpha.5.md +0 -374
- /package/src/{MessageContainer → MessagesContainer}/components/DayAnimated/index.tsx +0 -0
- /package/src/{MessageContainer → MessagesContainer}/components/DayAnimated/styles.ts +0 -0
- /package/src/{MessageContainer → MessagesContainer}/components/DayAnimated/types.ts +0 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## [3.0.0] - 2025-11-23
|
|
4
|
+
|
|
5
|
+
This is a major release with significant breaking changes, new features, and improvements. The library has been completely rewritten in TypeScript with improved type safety, better keyboard handling, and enhanced customization options.
|
|
6
|
+
|
|
7
|
+
### 🚨 Breaking Changes
|
|
8
|
+
|
|
9
|
+
#### Renamed Props (GiftedChat)
|
|
10
|
+
- `onInputTextChanged` → moved to `textInputProps.onChangeText` (follows React Native naming pattern)
|
|
11
|
+
- `alwaysShowSend` → `isSendButtonAlwaysVisible` (consistent boolean naming convention)
|
|
12
|
+
- `onPress` → `onPressMessage` (more specific naming)
|
|
13
|
+
- `onLongPress` → `onLongPressMessage` (more specific naming)
|
|
14
|
+
- `options` → `actions` (better semantic naming, different type signature)
|
|
15
|
+
- `optionTintColor` → `actionSheetOptionTintColor` (clearer naming)
|
|
16
|
+
- `renderUsernameOnMessage` → `isUsernameVisible` (consistent boolean naming)
|
|
17
|
+
- `showUserAvatar` → `isUserAvatarVisible` (consistent boolean naming)
|
|
18
|
+
- `showAvatarForEveryMessage` → `isAvatarVisibleForEveryMessage` (consistent boolean naming)
|
|
19
|
+
- `renderAvatarOnTop` → `isAvatarOnTop` (consistent boolean naming)
|
|
20
|
+
- `focusOnInputWhenOpeningKeyboard` → `shouldFocusInputOnKeyboardOpen` (consistent boolean naming)
|
|
21
|
+
- `messageContainerRef` → `messagesContainerRef` (typo fix)
|
|
22
|
+
- `alignTop` → `isAlignedTop` (consistent boolean naming)
|
|
23
|
+
- `inverted` → `isInverted` (consistent boolean naming)
|
|
24
|
+
|
|
25
|
+
#### Removed Props (GiftedChat)
|
|
26
|
+
- `bottomOffset` - use `keyboardAvoidingViewProps.keyboardVerticalOffset` instead
|
|
27
|
+
- `disableKeyboardController` - removed keyboard controller configuration
|
|
28
|
+
- `isKeyboardInternallyHandled` - keyboard handling now always uses react-native-keyboard-controller
|
|
29
|
+
- `lightboxProps` - custom Modal implementation replaced react-native-lightbox-v2
|
|
30
|
+
- `placeholder` - moved to `textInputProps.placeholder`
|
|
31
|
+
- `disableComposer` - moved to `textInputProps.editable={false}`
|
|
32
|
+
- `keyboardShouldPersistTaps` - moved to `listProps.keyboardShouldPersistTaps`
|
|
33
|
+
- `maxInputLength` - moved to `textInputProps.maxLength`
|
|
34
|
+
- `extraData` - moved to `listProps.extraData`
|
|
35
|
+
- `infiniteScroll` - use `loadEarlierMessagesProps.isInfiniteScrollEnabled` instead
|
|
36
|
+
- `parsePatterns` - removed, automatic link parsing improved
|
|
37
|
+
|
|
38
|
+
#### Props Moved to MessagesContainer (via spreading)
|
|
39
|
+
These props moved from `GiftedChatProps` to `MessagesContainerProps` but are still accessible on `GiftedChat` via prop spreading:
|
|
40
|
+
- `messages` - now in MessagesContainerProps
|
|
41
|
+
- `isTyping` - now in MessagesContainerProps (via TypingIndicatorProps)
|
|
42
|
+
- `loadEarlier` → `loadEarlierMessagesProps.isAvailable`
|
|
43
|
+
- `isLoadingEarlier` → `loadEarlierMessagesProps.isLoading`
|
|
44
|
+
- `onLoadEarlier` → `loadEarlierMessagesProps.onPress`
|
|
45
|
+
- `renderLoadEarlier` - now in MessagesContainerProps
|
|
46
|
+
- `renderDay` - now in MessagesContainerProps
|
|
47
|
+
- `renderMessage` - now in MessagesContainerProps
|
|
48
|
+
- `renderFooter` - now in MessagesContainerProps
|
|
49
|
+
- `renderChatEmpty` - now in MessagesContainerProps
|
|
50
|
+
- `scrollToBottomStyle` - now in MessagesContainerProps
|
|
51
|
+
- `isScrollToBottomEnabled` - now in MessagesContainerProps
|
|
52
|
+
- `scrollToBottomComponent` - now in MessagesContainerProps
|
|
53
|
+
- `onQuickReply` - now in MessagesContainerProps
|
|
54
|
+
- `listViewProps` → `listProps` (renamed in MessagesContainerProps)
|
|
55
|
+
|
|
56
|
+
#### Type Signature Changes
|
|
57
|
+
- `options`: changed from `{ [key: string]: () => void }` to `Array<{ title: string, action: () => void }>`
|
|
58
|
+
- `textInputProps`: changed from `object` to `Partial<React.ComponentProps<typeof TextInput>>`
|
|
59
|
+
- `renderInputToolbar`: now accepts `React.ComponentType | React.ReactElement | function | null` (can be component, element, function, or null)
|
|
60
|
+
- All callback props now use arrow function syntax instead of function syntax for better type inference
|
|
61
|
+
|
|
62
|
+
#### Dependency Changes
|
|
63
|
+
- Removed `react-native-lightbox-v2` (replaced with custom Modal implementation)
|
|
64
|
+
- Removed `react-native-iphone-x-helper` (deprecated)
|
|
65
|
+
- Removed `react-native-keyboard-controller` as direct dependency
|
|
66
|
+
- Added `react-native-keyboard-controller` as peer dependency (>=1.0.0)
|
|
67
|
+
- Added `react-native-gesture-handler` as peer dependency (>=2.0.0)
|
|
68
|
+
- Added `react-native-reanimated` support for v3 & v4
|
|
69
|
+
- Added `react-native-safe-area-context` as peer dependency (>=5.0.0)
|
|
70
|
+
|
|
71
|
+
### ✨ New Features
|
|
72
|
+
|
|
73
|
+
#### TypeScript Migration
|
|
74
|
+
- Complete conversion from JavaScript to TypeScript/TSX
|
|
75
|
+
- Improved type safety and IntelliSense support
|
|
76
|
+
- Better type definitions for all components and props
|
|
77
|
+
- Refactored types to arrow functions for better readability
|
|
78
|
+
|
|
79
|
+
#### Keyboard Handling
|
|
80
|
+
- New `keyboardTopToolbarHeight` prop for better keyboard customization
|
|
81
|
+
- New `keyboardAvoidingViewProps` to pass props to KeyboardAvoidingView from react-native-keyboard-controller
|
|
82
|
+
- Improved keyboard behavior and offset handling
|
|
83
|
+
- Consolidated keyboard configuration (removed individual keyboard props in favor of `keyboardAvoidingViewProps`)
|
|
84
|
+
- Fixed auto-grow text input behavior
|
|
85
|
+
- Better keyboard open/close transitions
|
|
86
|
+
- New `OverKeyboardView` component for MessageImage to keep keyboard open
|
|
87
|
+
|
|
88
|
+
#### Message Rendering
|
|
89
|
+
- `isDayAnimationEnabled` prop to control day separator animations
|
|
90
|
+
- Support for passing custom components in render functions
|
|
91
|
+
- Improved message parsing with better link detection
|
|
92
|
+
- Parse links in system messages (fixes #2105)
|
|
93
|
+
- Better phone number parsing with custom matchers support
|
|
94
|
+
- Improved URL parsing (email, phone, URL detection)
|
|
95
|
+
|
|
96
|
+
#### UI & Styling
|
|
97
|
+
- Dark theme support in example app
|
|
98
|
+
- Safe area provider included in library
|
|
99
|
+
- Improved LoadEarlier messages logic
|
|
100
|
+
- Better themed styles implementation
|
|
101
|
+
- Fixed press animation for TouchableOpacity
|
|
102
|
+
- Replaced deprecated `TouchableWithoutFeedback` with `Pressable`
|
|
103
|
+
- Better scroll to bottom button behavior on Android
|
|
104
|
+
|
|
105
|
+
#### Image Viewing
|
|
106
|
+
- Custom Modal implementation replacing react-native-lightbox-v2
|
|
107
|
+
- Better image viewing experience with proper insets handling
|
|
108
|
+
- Improved MessageImage component
|
|
109
|
+
|
|
110
|
+
#### Accessibility & UX
|
|
111
|
+
- `renderTicks` prop for message status indicators
|
|
112
|
+
- Better scroll to bottom wrapper visibility handling
|
|
113
|
+
- `useCallbackThrottled` for improved scroll performance
|
|
114
|
+
- Allow passing children to SystemMessage
|
|
115
|
+
- Improved load earlier messages functionality
|
|
116
|
+
|
|
117
|
+
### 🐛 Bug Fixes
|
|
118
|
+
|
|
119
|
+
- Fixed duplicate paragraph tags in README
|
|
120
|
+
- Fixed scroll to bottom when `isScrollToBottomEnabled=false` (#2652)
|
|
121
|
+
- Fixed TypeScript type inconsistencies and ESLint errors (#2653)
|
|
122
|
+
- Fixed automatic scroll to bottom issues (#2630, #2621, #2644)
|
|
123
|
+
- Fixed DayAnimated test import and added proper test coverage for renderDay prop
|
|
124
|
+
- Fixed not passed `isDayAnimationEnabled` prop
|
|
125
|
+
- Fixed MessageContainer scroll to bottom press on Android
|
|
126
|
+
- Fixed safer change ScrollToBottomWrapper visibility
|
|
127
|
+
- Fixed dependency cycles in imports
|
|
128
|
+
- Fixed MessageText container style
|
|
129
|
+
- Fixed reanimated issue in MessageContainer
|
|
130
|
+
- Fixed construct messages on send in example
|
|
131
|
+
- Fixed web support in example
|
|
132
|
+
- Fixed #2659 (memoization issues)
|
|
133
|
+
- Fixed #2640 (various bug fixes)
|
|
134
|
+
- Fixed show location in example
|
|
135
|
+
- Fixed errors in keyboard handling
|
|
136
|
+
- Fixed load earlier messages functionality
|
|
137
|
+
- Fixed Bubble type parameter to re-enable generics on message prop (#2639)
|
|
138
|
+
- Fixed listViewProps typing with Partial<FlatListProps> (#2628)
|
|
139
|
+
- Fixed MessageContainer to add renderDay prop and insert DayAnimated Component (#2632)
|
|
140
|
+
- Fixed dateFormatCalendar default value in README
|
|
141
|
+
|
|
142
|
+
### 🔧 Improvements
|
|
143
|
+
|
|
144
|
+
#### Performance
|
|
145
|
+
- Memoized values & functions for better performance
|
|
146
|
+
- Better scroll performance with throttled callbacks
|
|
147
|
+
- Optimized re-renders
|
|
148
|
+
|
|
149
|
+
#### Code Quality
|
|
150
|
+
- Added ESLint with import sorting
|
|
151
|
+
- Fixed all examples with ESLint
|
|
152
|
+
- Improved code structure and organization
|
|
153
|
+
- Better error handling
|
|
154
|
+
- Cleaner prop passing and component structure
|
|
155
|
+
|
|
156
|
+
#### Testing
|
|
157
|
+
- All tests converted to TypeScript
|
|
158
|
+
- Updated snapshots for new components
|
|
159
|
+
- Run tests in correct timezone (Europe/Paris)
|
|
160
|
+
- Improved test coverage
|
|
161
|
+
- Added comprehensive copilot instructions with validated commands
|
|
162
|
+
|
|
163
|
+
#### Documentation
|
|
164
|
+
- Improved README structure and formatting
|
|
165
|
+
- Better prop documentation and grouping
|
|
166
|
+
- Added matchers example
|
|
167
|
+
- Added working Expo Snack link
|
|
168
|
+
- Better feature documentation
|
|
169
|
+
- Added maintainer section
|
|
170
|
+
- Improved previews and images
|
|
171
|
+
- Added export documentation
|
|
172
|
+
- Fixed formatting issues and typos
|
|
173
|
+
- Better keyboard props documentation
|
|
174
|
+
|
|
175
|
+
#### Example App
|
|
176
|
+
- Updated to latest React Native and Expo
|
|
177
|
+
- Added tabs with different chat examples
|
|
178
|
+
- Added working link to Expo Snack
|
|
179
|
+
- Better example organization
|
|
180
|
+
- Added dark theme support
|
|
181
|
+
- Removed padding from bottom of toolbar
|
|
182
|
+
- Added custom phone matcher example
|
|
183
|
+
- Switch to dev build in README
|
|
184
|
+
- Android: transparent navigation & status bars by default
|
|
185
|
+
- Better project structure with multiple example types
|
|
186
|
+
|
|
187
|
+
#### Build & Development
|
|
188
|
+
- Better dependency management
|
|
189
|
+
- Updated to Node.js >= 20
|
|
190
|
+
- Yarn 1.22.22+ as package manager
|
|
191
|
+
- Added stale workflow for issue management
|
|
192
|
+
- Script to rebuild native dependencies
|
|
193
|
+
- Improved local development setup
|
|
194
|
+
|
|
195
|
+
### 📦 Dependencies
|
|
196
|
+
|
|
197
|
+
#### Added
|
|
198
|
+
- `@expo/react-native-action-sheet`: ^4.1.1
|
|
199
|
+
- `@types/lodash.isequal`: ^4.5.8
|
|
200
|
+
- `dayjs`: ^1.11.19
|
|
201
|
+
- `lodash.isequal`: ^4.5.0
|
|
202
|
+
- `react-native-autolink`: ^4.2.0
|
|
203
|
+
- `react-native-zoom-reanimated`: ^1.4.10
|
|
204
|
+
|
|
205
|
+
#### Peer Dependencies (now required)
|
|
206
|
+
- `react`: >=18.0.0
|
|
207
|
+
- `react-native`: *
|
|
208
|
+
- `react-native-gesture-handler`: >=2.0.0
|
|
209
|
+
- `react-native-keyboard-controller`: >=1.0.0
|
|
210
|
+
- `react-native-reanimated`: >=3.0.0 || ^4.0.0
|
|
211
|
+
- `react-native-safe-area-context`: >=5.0.0
|
|
212
|
+
|
|
213
|
+
### 🔄 Migration Guide
|
|
214
|
+
|
|
215
|
+
#### Update Prop Names
|
|
216
|
+
```javascript
|
|
217
|
+
// Before (v2.8.1)
|
|
218
|
+
<GiftedChat
|
|
219
|
+
messages={messages}
|
|
220
|
+
onInputTextChanged={handleTextChange}
|
|
221
|
+
alwaysShowSend={true}
|
|
222
|
+
onPress={handlePress}
|
|
223
|
+
onLongPress={handleLongPress}
|
|
224
|
+
options={{ 'Option 1': action1, 'Option 2': action2 }}
|
|
225
|
+
optionTintColor="#007AFF"
|
|
226
|
+
bottomOffset={100}
|
|
227
|
+
placeholder="Type a message..."
|
|
228
|
+
maxInputLength={1000}
|
|
229
|
+
renderUsernameOnMessage={true}
|
|
230
|
+
showUserAvatar={false}
|
|
231
|
+
showAvatarForEveryMessage={false}
|
|
232
|
+
renderAvatarOnTop={false}
|
|
233
|
+
alignTop={false}
|
|
234
|
+
inverted={true}
|
|
235
|
+
loadEarlier={true}
|
|
236
|
+
isLoadingEarlier={false}
|
|
237
|
+
onLoadEarlier={handleLoadEarlier}
|
|
238
|
+
/>
|
|
239
|
+
|
|
240
|
+
// After (v3.0.0)
|
|
241
|
+
<GiftedChat
|
|
242
|
+
messages={messages}
|
|
243
|
+
textInputProps={{
|
|
244
|
+
onChangeText: handleTextChange,
|
|
245
|
+
placeholder: "Type a message...",
|
|
246
|
+
maxLength: 1000
|
|
247
|
+
}}
|
|
248
|
+
isSendButtonAlwaysVisible={true}
|
|
249
|
+
onPressMessage={handlePress}
|
|
250
|
+
onLongPressMessage={handleLongPress}
|
|
251
|
+
actions={[
|
|
252
|
+
{ title: 'Option 1', action: action1 },
|
|
253
|
+
{ title: 'Option 2', action: action2 }
|
|
254
|
+
]}
|
|
255
|
+
actionSheetOptionTintColor="#007AFF"
|
|
256
|
+
keyboardAvoidingViewProps={{ keyboardVerticalOffset: 100 }}
|
|
257
|
+
isUsernameVisible={true}
|
|
258
|
+
isUserAvatarVisible={false}
|
|
259
|
+
isAvatarVisibleForEveryMessage={false}
|
|
260
|
+
isAvatarOnTop={false}
|
|
261
|
+
isAlignedTop={false}
|
|
262
|
+
isInverted={true}
|
|
263
|
+
loadEarlierMessagesProps={{
|
|
264
|
+
isAvailable: true,
|
|
265
|
+
isLoading: false,
|
|
266
|
+
onPress: handleLoadEarlier
|
|
267
|
+
}}
|
|
268
|
+
/>
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
#### Install Peer Dependencies
|
|
272
|
+
```bash
|
|
273
|
+
npm install react-native-gesture-handler react-native-keyboard-controller react-native-reanimated react-native-safe-area-context
|
|
274
|
+
# or
|
|
275
|
+
yarn add react-native-gesture-handler react-native-keyboard-controller react-native-reanimated react-native-safe-area-context
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
#### Update Image Lightbox
|
|
279
|
+
The library now uses a custom Modal implementation instead of react-native-lightbox-v2. If you were customizing the lightbox, you'll need to update your customization approach.
|
|
280
|
+
|
|
281
|
+
### 📝 Notes
|
|
282
|
+
|
|
283
|
+
- This version includes 170+ commits since v2.8.1
|
|
284
|
+
- Full TypeScript support with improved type definitions
|
|
285
|
+
- Better React Native compatibility (tested with RN 0.81.5)
|
|
286
|
+
- Improved React 19 support
|
|
287
|
+
- Better Expo integration
|
|
288
|
+
|
|
289
|
+
### 👥 Contributors
|
|
290
|
+
|
|
291
|
+
Special thanks to all contributors who made this release possible, including fixes and improvements from the community.
|
|
292
|
+
|
|
293
|
+
---
|
|
294
|
+
|
|
295
|
+
For detailed commit history, see: https://github.com/FaridSafi/react-native-gifted-chat/compare/2.8.1...3.0.0
|
package/README.md
CHANGED
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<p align="center">
|
|
3
|
-
<a href="https://reactnative.gallery/FaridSafi/gifted-chat">
|
|
4
|
-
<img alt="react-native-gifted-chat" src="https://thumbs.gfycat.com/AbsoluteSadDobermanpinscher-size_restricted.gif" width="260" height="510" />
|
|
5
|
-
</a>
|
|
6
|
-
|
|
7
|
-
</p>
|
|
8
|
-
|
|
9
1
|
<h3 align="center">
|
|
10
2
|
💬 Gifted Chat
|
|
11
3
|
</h3>
|
|
@@ -16,26 +8,61 @@
|
|
|
16
8
|
<a href="https://www.npmjs.com/package/react-native-gifted-chat">
|
|
17
9
|
<img alt="npm downloads" src="https://img.shields.io/npm/dm/react-native-gifted-chat.svg"/></a>
|
|
18
10
|
<a href="https://www.npmjs.com/package/react-native-gifted-chat"><img alt="npm version" src="https://badge.fury.io/js/react-native-gifted-chat.svg"/></a>
|
|
11
|
+
<a href="https://circleci.com/gh/FaridSafi/react-native-gifted-chat"><img src="https://circleci.com/gh/FaridSafi/react-native-gifted-chat.svg?style=shield" alt="build"></a>
|
|
19
12
|
</p>
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
<h3 align="center">
|
|
17
|
+
🚀 Try it now in your browser!
|
|
18
|
+
</h3>
|
|
20
19
|
<p align="center">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<img src='https://img.shields.io/badge/license-MIT-blue.svg' />
|
|
20
|
+
<a href="https://snack.expo.dev/@kesha-antonov/gifted-chat-playground" target="_blank">
|
|
21
|
+
<img src="https://img.shields.io/badge/▶️_Try_GiftedChat_Playground-4630EB?style=for-the-badge&logo=expo&logoColor=white" alt="Try GiftedChat on Expo Snack"/>
|
|
24
22
|
</a>
|
|
25
|
-
|
|
23
|
+
</p>
|
|
24
|
+
<p align="center">
|
|
25
|
+
<strong>No installation required • Interactive examples • Edit and run in real-time</strong>
|
|
26
26
|
</p>
|
|
27
27
|
|
|
28
|
+
<br />
|
|
29
|
+
|
|
30
|
+
<!-- previews -->
|
|
31
|
+
|
|
28
32
|
<p align="center">
|
|
29
|
-
<
|
|
30
|
-
|
|
33
|
+
<img width="200" src="https://github.com/user-attachments/assets/c9da88f5-0b20-471c-8cd7-373bdb767517" />
|
|
34
|
+
|
|
35
|
+
<img width="200" src="https://github.com/user-attachments/assets/f72b17f1-6c2e-43b5-87e7-477011aa3b07" />
|
|
36
|
+
|
|
37
|
+
<img width="200" src="https://github.com/user-attachments/assets/86711e73-ee3c-4527-b38d-e4dab47a44fe" />
|
|
31
38
|
</p>
|
|
32
39
|
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## Features
|
|
43
|
+
|
|
44
|
+
- Fully customizable components
|
|
45
|
+
- Composer actions (to attach photos, etc.)
|
|
46
|
+
- Load earlier messages
|
|
47
|
+
- Copy messages to clipboard
|
|
48
|
+
- Touchable links using [react-native-autolink](https://github.com/joshswan/react-native-autolink)
|
|
49
|
+
- Avatar as user's initials
|
|
50
|
+
- Localized dates
|
|
51
|
+
- Multi-line TextInput
|
|
52
|
+
- InputToolbar avoiding keyboard
|
|
53
|
+
- System message
|
|
54
|
+
- Quick Reply messages (bot)
|
|
55
|
+
- Typing indicator
|
|
56
|
+
- Ticks indicator to display message status ( delivered, read )
|
|
57
|
+
- Scroll to bottom button
|
|
58
|
+
- react-native-web [web configuration](#react-native-web)
|
|
59
|
+
|
|
33
60
|
## Sponsor
|
|
34
61
|
|
|
35
62
|
<p align="center">
|
|
36
63
|
<br/>
|
|
37
64
|
<a href="https://www.lereacteur.io" target="_blank">
|
|
38
|
-
<img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/logo_sponsor.png">
|
|
65
|
+
<img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/logo_sponsor.png" height="60">
|
|
39
66
|
</a>
|
|
40
67
|
<br>
|
|
41
68
|
<p align="center">
|
|
@@ -51,7 +78,7 @@
|
|
|
51
78
|
<p align="center">
|
|
52
79
|
<br/>
|
|
53
80
|
<a href="https://getstream.io/chat/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank">
|
|
54
|
-
<img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/stream-logo.png" height="
|
|
81
|
+
<img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/stream-logo.png" height="40">
|
|
55
82
|
</a>
|
|
56
83
|
<br>
|
|
57
84
|
<p align="center">
|
|
@@ -65,7 +92,7 @@
|
|
|
65
92
|
<p align="center">
|
|
66
93
|
<br/>
|
|
67
94
|
<a href="https://www.ethora.com" target="_blank">
|
|
68
|
-
<img src="https://www.dappros.com/wp-content/uploads/2023/12/Ethora-Logo.png"
|
|
95
|
+
<img src="https://www.dappros.com/wp-content/uploads/2023/12/Ethora-Logo.png" height="60">
|
|
69
96
|
</a>
|
|
70
97
|
<br>
|
|
71
98
|
<p align="center">
|
|
@@ -80,50 +107,26 @@
|
|
|
80
107
|
<a href="https://amzn.to/3ZmTyb2" target="_blank">React Key Concepts: Consolidate your knowledge of React’s core features (2nd ed. Edition)</a>
|
|
81
108
|
</p>
|
|
82
109
|
|
|
83
|
-
## Features
|
|
84
|
-
|
|
85
|
-
- Fully customizable components
|
|
86
|
-
- Composer actions (to attach photos, etc.)
|
|
87
|
-
- Load earlier messages
|
|
88
|
-
- Copy messages to clipboard
|
|
89
|
-
- Touchable links using [react-native-autolink](https://github.com/joshswan/react-native-autolink)
|
|
90
|
-
- Avatar as user's initials
|
|
91
|
-
- Localized dates
|
|
92
|
-
- Multi-line TextInput
|
|
93
|
-
- InputToolbar avoiding keyboard
|
|
94
|
-
- System message
|
|
95
|
-
- Quick Reply messages (bot)
|
|
96
|
-
- Typing indicator
|
|
97
|
-
- react-native-web [web configuration](#react-native-web)
|
|
98
|
-
|
|
99
110
|
# Getting started
|
|
100
111
|
|
|
101
|
-
## 🚧👷 Important notice
|
|
102
|
-
|
|
103
|
-
There's currently WIP going on to make the library more performant, modern in terms of chat UI and easier to maintain. If you have any issues, please report them. If you want to contribute, please do so.
|
|
104
|
-
|
|
105
|
-
The most stable version is `2.6.5`. If you want to use the latest version, please be aware that it's a work in progress.
|
|
106
|
-
|
|
107
|
-
Readme for this version: [2.6.5 readme](https://github.com/FaridSafi/react-native-gifted-chat/blob/eebab3751fcbe07715135e6e7b2aa3f76a10d8ac/README.md)
|
|
108
|
-
|
|
109
112
|
## Installation
|
|
110
113
|
|
|
111
114
|
### Install dependencies
|
|
112
115
|
|
|
113
116
|
Yarn:
|
|
114
117
|
```bash
|
|
115
|
-
yarn add react-native-gifted-chat react-native-reanimated react-native-
|
|
118
|
+
yarn add react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
|
|
116
119
|
```
|
|
117
120
|
|
|
118
121
|
Npm:
|
|
119
122
|
|
|
120
123
|
```bash
|
|
121
|
-
npm install --save react-native-gifted-chat react-native-reanimated react-native-
|
|
124
|
+
npm install --save react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
|
|
122
125
|
```
|
|
123
126
|
|
|
124
127
|
Expo
|
|
125
128
|
```bash
|
|
126
|
-
npx expo install react-native-gifted-chat react-native-reanimated react-native-
|
|
129
|
+
npx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
|
|
127
130
|
```
|
|
128
131
|
|
|
129
132
|
### Non-expo users
|
|
@@ -136,10 +139,13 @@ npx pod-install
|
|
|
136
139
|
|
|
137
140
|
Follow guide: [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin)
|
|
138
141
|
|
|
139
|
-
##
|
|
142
|
+
## Examples
|
|
143
|
+
|
|
144
|
+
### Basic usage
|
|
140
145
|
|
|
141
146
|
```jsx
|
|
142
147
|
import React, { useState, useCallback, useEffect } from 'react'
|
|
148
|
+
import { Platform } from 'react-native'
|
|
143
149
|
import { GiftedChat } from 'react-native-gifted-chat'
|
|
144
150
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
145
151
|
|
|
@@ -149,7 +155,8 @@ export function Example() {
|
|
|
149
155
|
|
|
150
156
|
// If you have a tab bar, include its height
|
|
151
157
|
const tabbarHeight = 50
|
|
152
|
-
const
|
|
158
|
+
const keyboardTopToolbarHeight = Platform.select({ ios: 44, default: 0 })
|
|
159
|
+
const keyboardVerticalOffset = insets.bottom + tabbarHeight + keyboardTopToolbarHeight
|
|
153
160
|
|
|
154
161
|
useEffect(() => {
|
|
155
162
|
setMessages([
|
|
@@ -179,13 +186,14 @@ export function Example() {
|
|
|
179
186
|
user={{
|
|
180
187
|
_id: 1,
|
|
181
188
|
}}
|
|
182
|
-
|
|
189
|
+
|
|
190
|
+
keyboardAvoidingViewProps={{ keyboardVerticalOffset }}
|
|
183
191
|
/>
|
|
184
192
|
)
|
|
185
193
|
}
|
|
186
194
|
```
|
|
187
195
|
|
|
188
|
-
|
|
196
|
+
### Other examples
|
|
189
197
|
|
|
190
198
|
Check out code of [`examples`](example)
|
|
191
199
|
|
|
@@ -205,14 +213,13 @@ Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
|
|
|
205
213
|
|
|
206
214
|
### Refs
|
|
207
215
|
|
|
208
|
-
- **`
|
|
216
|
+
- **`messagesContainerRef`** _(FlatList ref)_ - Ref to the flatlist
|
|
209
217
|
- **`textInputRef`** _(TextInput ref)_ - Ref to the text input
|
|
210
218
|
|
|
211
219
|
### Keyboard & Layout
|
|
212
220
|
|
|
213
|
-
- **`
|
|
214
|
-
- **`
|
|
215
|
-
- **`shouldFocusInputOnKeyboardOpen`** _(Bool)_ - Focus on <TextInput> automatically when opening the keyboard; default `true`
|
|
221
|
+
- **`keyboardProviderProps`** _(Object)_ - Props to be passed to the [`KeyboardProvider`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-provider) for keyboard handling.
|
|
222
|
+
- **`keyboardAvoidingViewProps`** _(Object)_ - Props to be passed to the [`KeyboardAvoidingView`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-avoiding-view). The `behavior` prop defaults to `'padding'`.
|
|
216
223
|
- **`isAlignedTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
|
|
217
224
|
- **`isInverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
|
|
218
225
|
|
|
@@ -229,7 +236,7 @@ Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
|
|
|
229
236
|
- **`renderSend`** _(Component | Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
|
|
230
237
|
- **`renderActions`** _(Component | Function)_ - Custom action button on the left of the message composer
|
|
231
238
|
- **`renderAccessory`** _(Component | Function)_ - Custom second line of actions below the message composer
|
|
232
|
-
- **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput
|
|
239
|
+
- **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput).
|
|
233
240
|
|
|
234
241
|
### Actions & Action Sheet
|
|
235
242
|
|
|
@@ -244,22 +251,21 @@ Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
|
|
|
244
251
|
- **`renderMessage`** _(Component | Function)_ - Custom message container
|
|
245
252
|
- **`renderLoading`** _(Component | Function)_ - Render a loading view when initializing
|
|
246
253
|
- **`renderChatEmpty`** _(Component | Function)_ - Custom component to render in the ListView when messages are empty
|
|
247
|
-
- **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the
|
|
248
|
-
- **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist
|
|
254
|
+
- **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessagesContainer (separate from the ListView)
|
|
255
|
+
- **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist)
|
|
249
256
|
|
|
250
257
|
### Message Bubbles & Content
|
|
251
258
|
|
|
252
|
-
- **`renderBubble`** _(Component | Function)_ - Custom message bubble
|
|
259
|
+
- **`renderBubble`** _(Component | Function(`props: BubbleProps`))_ - Custom message bubble. Receives [BubbleProps](src/Bubble/types.ts) as parameter.
|
|
253
260
|
- **`renderMessageText`** _(Component | Function)_ - Custom message text
|
|
254
261
|
- **`renderMessageImage`** _(Component | Function)_ - Custom message image
|
|
255
262
|
- **`renderMessageVideo`** _(Component | Function)_ - Custom message video
|
|
256
263
|
- **`renderMessageAudio`** _(Component | Function)_ - Custom message audio
|
|
257
264
|
- **`renderCustomView`** _(Component | Function)_ - Custom view inside the bubble
|
|
258
265
|
- **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
|
|
259
|
-
- **`renderTicks`** _(Component | Function(`message`))_ - Custom ticks indicator to display message status
|
|
260
266
|
- **`onPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed
|
|
261
267
|
- **`onLongPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed; you can use this to show action sheets (e.g., copy, delete, reply)
|
|
262
|
-
- **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image
|
|
268
|
+
- **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image) component created by the default `renderMessageImage`
|
|
263
269
|
- **`imageStyle`** _(Object)_ - Custom style for message images
|
|
264
270
|
- **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
|
|
265
271
|
- **`messageTextProps`** _(Object)_ - Extra props to be passed to the MessageText component. Useful for customizing link parsing behavior, text styles, and matchers. Supports all [react-native-autolink](https://github.com/joshswan/react-native-autolink) props including:
|
|
@@ -341,6 +347,7 @@ See full example in [LinksExample](example/components/chat-examples/LinksExample
|
|
|
341
347
|
- **`renderDay`** _(Component | Function)_ - Custom day above a message
|
|
342
348
|
- **`renderTime`** _(Component | Function)_ - Custom time inside a message
|
|
343
349
|
- **`timeTextStyle`** _(Object)_ - Custom text style for time inside messages (supports left/right styles)
|
|
350
|
+
- **`isDayAnimationEnabled`** _(Bool)_ - Enable animated day label that appears on scroll; default is `true`
|
|
344
351
|
|
|
345
352
|
### System Messages
|
|
346
353
|
|
|
@@ -414,30 +421,8 @@ If you are using Create React Native App / Expo, no Android specific installatio
|
|
|
414
421
|
</View>
|
|
415
422
|
```
|
|
416
423
|
|
|
417
|
-
If you use React Navigation, additional handling may be required to account for navigation headers and tabs. `KeyboardAvoidingView`'s `keyboardVerticalOffset` property can be set to the height of the navigation header and [`tabBarOptions.keyboardHidesTabBar`](https://reactnavigation.org/docs/en/bottom-tab-navigator.html#bottomtabnavigatorconfig) can be set to keep the tab bar from being shown when the keyboard is up. Due to a [bug with calculating height on Android phones with notches](facebook/react-native#23693), `KeyboardAvoidingView` is recommended over other solutions that involve calculating the height of the window.
|
|
418
|
-
|
|
419
|
-
- adding an opaque background status bar on app.json (even though `android:windowSoftInputMode="adjustResize"` is set internally on Expo's Android apps, the translucent status bar causes it not to work): https://docs.expo.io/versions/latest/guides/configuration.html#androidstatusbar
|
|
420
|
-
|
|
421
|
-
- If you plan to use `GiftedChat` inside a `Modal`, see [#200](https://github.com/FaridSafi/react-native-gifted-chat/issues/200).
|
|
422
|
-
|
|
423
424
|
## Notes for local development
|
|
424
425
|
|
|
425
|
-
### Native
|
|
426
|
-
|
|
427
|
-
1. Install `yarn global add expo-cli`
|
|
428
|
-
2. Install dependencies`yarn install`
|
|
429
|
-
3. `expo start`
|
|
430
|
-
|
|
431
|
-
### react-native-web
|
|
432
|
-
|
|
433
|
-
#### With expo
|
|
434
|
-
|
|
435
|
-
1. Install `yarn global add expo-cli`
|
|
436
|
-
2. Install dependencies`yarn install`
|
|
437
|
-
3. `expo start -w`
|
|
438
|
-
|
|
439
|
-
[Upgrade snack version](https://snackager.expo.io/bundle/react-native-gifted-chat@0.15.0?bypassCache=true)
|
|
440
|
-
|
|
441
426
|
#### With create-react-app
|
|
442
427
|
|
|
443
428
|
1. `yarn add -D react-app-rewired`
|
|
@@ -509,25 +494,16 @@ fireEvent(loadingWrapper, 'layout', {
|
|
|
509
494
|
1. Find responses in existing issues
|
|
510
495
|
1. Try to keep issues for issues
|
|
511
496
|
|
|
512
|
-
##
|
|
497
|
+
## Hire an expert
|
|
513
498
|
|
|
514
|
-
|
|
499
|
+
Looking for a React Native freelance expert with more than 14 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)
|
|
515
500
|
|
|
516
501
|
## Author
|
|
517
502
|
|
|
518
|
-
Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi)
|
|
519
|
-
|
|
520
|
-
## Contributors
|
|
521
|
-
|
|
522
|
-
- Kevin Cooper [cooperka](https://github.com/cooperka)
|
|
523
|
-
- Kfir Golan [kfiroo](https://github.com/kfiroo)
|
|
524
|
-
- Bruno Cascio [brunocascio](https://github.com/brunocascio)
|
|
525
|
-
- Xavier Carpentier [xcarpentier](https://github.com/xcarpentier)
|
|
526
|
-
- Kesha Antonov [kesha-antonov](https://github.com/kesha-antonov)
|
|
527
|
-
- [more](https://github.com/FaridSafi/react-native-gifted-chat/graphs/contributors)
|
|
503
|
+
Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi) or [@xcapetir](https://www.twitter.com/xcapetir)
|
|
528
504
|
|
|
529
|
-
##
|
|
505
|
+
## Maintainer
|
|
530
506
|
|
|
531
|
-
|
|
507
|
+
Have any questions? Reach out to [Kesha Antonov](https://github.com/kesha-antonov)
|
|
532
508
|
|
|
533
|
-
|
|
509
|
+
Please note that I'm maintaining this project in my free time for free. If you find any issues, feel free to open them, and I'll do my best to address them as time permits.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-gifted-chat",
|
|
3
|
-
"version": "3.0.0
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "The most complete chat UI for React Native",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"android",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"react-dom": "19.1.0",
|
|
95
95
|
"react-native": "0.81.5",
|
|
96
96
|
"react-native-gesture-handler": "^2.29.1",
|
|
97
|
-
"react-native-keyboard-controller": "^1.19.
|
|
97
|
+
"react-native-keyboard-controller": "^1.19.6",
|
|
98
98
|
"react-native-reanimated": "^3.19.4",
|
|
99
99
|
"react-native-safe-area-context": "^5.6.2",
|
|
100
100
|
"react-test-renderer": "19.1.0",
|