react-native-gifted-chat 3.0.0 → 3.1.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.
Files changed (32) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/src/Actions.tsx +2 -2
  4. package/src/Bubble/index.tsx +37 -42
  5. package/src/Bubble/styles.ts +54 -68
  6. package/src/Bubble/types.ts +3 -2
  7. package/src/Composer.tsx +46 -3
  8. package/src/Day/index.tsx +2 -2
  9. package/src/GiftedAvatar.tsx +2 -2
  10. package/src/GiftedChat/index.tsx +1 -2
  11. package/src/LoadEarlierMessages.tsx +2 -2
  12. package/src/Message/index.tsx +4 -3
  13. package/src/Message/styles.ts +16 -20
  14. package/src/MessageAudio.tsx +3 -2
  15. package/src/MessageImage.tsx +1 -1
  16. package/src/MessageText.tsx +3 -5
  17. package/src/MessageVideo.tsx +3 -2
  18. package/src/MessagesContainer/index.tsx +1 -2
  19. package/src/QuickReplies.tsx +1 -1
  20. package/src/Send.tsx +2 -2
  21. package/src/SystemMessage.tsx +23 -18
  22. package/src/Time.tsx +13 -39
  23. package/src/__tests__/GiftedChat.test.tsx +1 -1
  24. package/src/__tests__/__snapshots__/Bubble.test.tsx.snap +46 -65
  25. package/src/__tests__/__snapshots__/Composer.test.tsx.snap +19 -4
  26. package/src/__tests__/__snapshots__/InputToolbar.test.tsx.snap +19 -4
  27. package/src/__tests__/__snapshots__/Message.test.tsx.snap +143 -200
  28. package/src/__tests__/__snapshots__/MessageImage.test.tsx.snap +2 -29
  29. package/src/__tests__/__snapshots__/MessageText.test.tsx.snap +2 -4
  30. package/src/__tests__/__snapshots__/SystemMessage.test.tsx.snap +39 -42
  31. package/src/__tests__/__snapshots__/Time.test.tsx.snap +1 -12
  32. package/src/styles.ts +11 -2
package/src/__tests__/__snapshots__/Message.test.tsx.snap CHANGED
@@ -12,7 +12,7 @@ exports[`Message component should render <Message /> and compare with snapshot 1
12
12
  "flexDirection": "row",
13
13
  "justifyContent": "flex-start",
14
14
  "marginLeft": 8,
15
- "marginRight": 0,
15
+ "maxWidth": "80%",
16
16
  },
17
17
  {
18
18
  "marginBottom": 10,
@@ -24,19 +24,7 @@ exports[`Message component should render <Message /> and compare with snapshot 1
24
24
  ]
25
25
  }
26
26
  >
27
- <View
28
- style={
29
- [
30
- {
31
- "flex": 1,
32
- },
33
- {
34
- "alignItems": "flex-start",
35
- },
36
- undefined,
37
- ]
38
- }
39
- >
27
+ <View>
40
28
  <View
41
29
  style={
42
30
  [
@@ -44,7 +32,6 @@ exports[`Message component should render <Message /> and compare with snapshot 1
44
32
  "backgroundColor": "#f0f0f0",
45
33
  "borderRadius": 15,
46
34
  "justifyContent": "flex-end",
47
- "marginRight": 60,
48
35
  "minHeight": 20,
49
36
  },
50
37
  null,
@@ -84,66 +71,60 @@ exports[`Message component should render <Message /> and compare with snapshot 1
84
71
  onResponderTerminationRequest={[Function]}
85
72
  onStartShouldSetResponder={[Function]}
86
73
  >
87
- <View>
88
- <View>
89
- <View
90
- style={
91
- [
92
- {
93
- "marginBottom": 5,
94
- "marginLeft": 10,
95
- "marginRight": 10,
96
- "marginTop": 5,
97
- },
98
- undefined,
99
- ]
100
- }
101
- >
102
- <Text
103
- style={
104
- [
105
- {
106
- "color": "black",
107
- },
108
- undefined,
109
- undefined,
110
- ]
111
- }
112
- user={
113
- {
114
- "_id": 1,
115
- }
116
- }
117
- >
118
- <Text>
119
- test
120
- </Text>
121
- </Text>
122
- </View>
123
- </View>
124
- <View
74
+ <View
75
+ style={
76
+ [
77
+ {
78
+ "marginHorizontal": 10,
79
+ "marginVertical": 5,
80
+ },
81
+ undefined,
82
+ ]
83
+ }
84
+ >
85
+ <Text
125
86
  style={
126
87
  [
127
88
  {
128
- "flexDirection": "row",
129
- "justifyContent": "flex-start",
89
+ "color": "black",
130
90
  },
131
91
  undefined,
92
+ undefined,
132
93
  ]
133
94
  }
95
+ user={
96
+ {
97
+ "_id": 1,
98
+ }
99
+ }
134
100
  >
135
- <View
136
- style={
137
- [
138
- {
139
- "marginBottom": 5,
140
- "marginLeft": 10,
141
- "marginRight": 10,
142
- },
143
- undefined,
144
- ]
101
+ <Text>
102
+ test
103
+ </Text>
104
+ </Text>
105
+ </View>
106
+ <View
107
+ style={
108
+ [
109
+ {
110
+ "alignItems": "flex-end",
111
+ "flexDirection": "row",
112
+ "justifyContent": "space-between",
113
+ "paddingBottom": 5,
114
+ "paddingHorizontal": 10,
115
+ },
116
+ undefined,
117
+ ]
118
+ }
119
+ >
120
+ <View
121
+ style={
122
+ {
123
+ "flex": 1,
145
124
  }
146
- >
125
+ }
126
+ >
127
+ <View>
147
128
  <Text
148
129
  style={
149
130
  [
@@ -178,7 +159,7 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
178
159
  "flexDirection": "row",
179
160
  "justifyContent": "flex-start",
180
161
  "marginLeft": 8,
181
- "marginRight": 0,
162
+ "maxWidth": "80%",
182
163
  },
183
164
  {
184
165
  "marginBottom": 10,
@@ -229,19 +210,7 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
229
210
  }
230
211
  />
231
212
  </View>
232
- <View
233
- style={
234
- [
235
- {
236
- "flex": 1,
237
- },
238
- {
239
- "alignItems": "flex-start",
240
- },
241
- undefined,
242
- ]
243
- }
244
- >
213
+ <View>
245
214
  <View
246
215
  style={
247
216
  [
@@ -249,7 +218,6 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
249
218
  "backgroundColor": "#f0f0f0",
250
219
  "borderRadius": 15,
251
220
  "justifyContent": "flex-end",
252
- "marginRight": 60,
253
221
  "minHeight": 20,
254
222
  },
255
223
  null,
@@ -289,67 +257,61 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
289
257
  onResponderTerminationRequest={[Function]}
290
258
  onStartShouldSetResponder={[Function]}
291
259
  >
292
- <View>
293
- <View>
294
- <View
295
- style={
296
- [
297
- {
298
- "marginBottom": 5,
299
- "marginLeft": 10,
300
- "marginRight": 10,
301
- "marginTop": 5,
302
- },
303
- undefined,
304
- ]
305
- }
306
- >
307
- <Text
308
- isUserAvatarVisible={true}
309
- style={
310
- [
311
- {
312
- "color": "black",
313
- },
314
- undefined,
315
- undefined,
316
- ]
317
- }
318
- user={
319
- {
320
- "_id": 1,
321
- }
322
- }
323
- >
324
- <Text>
325
- test
326
- </Text>
327
- </Text>
328
- </View>
329
- </View>
330
- <View
260
+ <View
261
+ style={
262
+ [
263
+ {
264
+ "marginHorizontal": 10,
265
+ "marginVertical": 5,
266
+ },
267
+ undefined,
268
+ ]
269
+ }
270
+ >
271
+ <Text
272
+ isUserAvatarVisible={true}
331
273
  style={
332
274
  [
333
275
  {
334
- "flexDirection": "row",
335
- "justifyContent": "flex-start",
276
+ "color": "black",
336
277
  },
337
278
  undefined,
279
+ undefined,
338
280
  ]
339
281
  }
282
+ user={
283
+ {
284
+ "_id": 1,
285
+ }
286
+ }
340
287
  >
341
- <View
342
- style={
343
- [
344
- {
345
- "marginBottom": 5,
346
- "marginLeft": 10,
347
- "marginRight": 10,
348
- },
349
- undefined,
350
- ]
288
+ <Text>
289
+ test
290
+ </Text>
291
+ </Text>
292
+ </View>
293
+ <View
294
+ style={
295
+ [
296
+ {
297
+ "alignItems": "flex-end",
298
+ "flexDirection": "row",
299
+ "justifyContent": "space-between",
300
+ "paddingBottom": 5,
301
+ "paddingHorizontal": 10,
302
+ },
303
+ undefined,
304
+ ]
305
+ }
306
+ >
307
+ <View
308
+ style={
309
+ {
310
+ "flex": 1,
351
311
  }
352
- >
312
+ }
313
+ >
314
+ <View>
353
315
  <Text
354
316
  style={
355
317
  [
@@ -384,7 +346,7 @@ exports[`Message component should render null if user has no Avatar 1`] = `
384
346
  "flexDirection": "row",
385
347
  "justifyContent": "flex-start",
386
348
  "marginLeft": 8,
387
- "marginRight": 0,
349
+ "maxWidth": "80%",
388
350
  },
389
351
  {
390
352
  "marginBottom": 10,
@@ -435,19 +397,7 @@ exports[`Message component should render null if user has no Avatar 1`] = `
435
397
  }
436
398
  />
437
399
  </View>
438
- <View
439
- style={
440
- [
441
- {
442
- "flex": 1,
443
- },
444
- {
445
- "alignItems": "flex-start",
446
- },
447
- undefined,
448
- ]
449
- }
450
- >
400
+ <View>
451
401
  <View
452
402
  style={
453
403
  [
@@ -455,7 +405,6 @@ exports[`Message component should render null if user has no Avatar 1`] = `
455
405
  "backgroundColor": "#f0f0f0",
456
406
  "borderRadius": 15,
457
407
  "justifyContent": "flex-end",
458
- "marginRight": 60,
459
408
  "minHeight": 20,
460
409
  },
461
410
  null,
@@ -495,67 +444,61 @@ exports[`Message component should render null if user has no Avatar 1`] = `
495
444
  onResponderTerminationRequest={[Function]}
496
445
  onStartShouldSetResponder={[Function]}
497
446
  >
498
- <View>
499
- <View>
500
- <View
501
- style={
502
- [
503
- {
504
- "marginBottom": 5,
505
- "marginLeft": 10,
506
- "marginRight": 10,
507
- "marginTop": 5,
508
- },
509
- undefined,
510
- ]
511
- }
512
- >
513
- <Text
514
- isUserAvatarVisible={true}
515
- style={
516
- [
517
- {
518
- "color": "black",
519
- },
520
- undefined,
521
- undefined,
522
- ]
523
- }
524
- user={
525
- {
526
- "_id": 1,
527
- }
528
- }
529
- >
530
- <Text>
531
- test
532
- </Text>
533
- </Text>
534
- </View>
535
- </View>
536
- <View
447
+ <View
448
+ style={
449
+ [
450
+ {
451
+ "marginHorizontal": 10,
452
+ "marginVertical": 5,
453
+ },
454
+ undefined,
455
+ ]
456
+ }
457
+ >
458
+ <Text
459
+ isUserAvatarVisible={true}
537
460
  style={
538
461
  [
539
462
  {
540
- "flexDirection": "row",
541
- "justifyContent": "flex-start",
463
+ "color": "black",
542
464
  },
543
465
  undefined,
466
+ undefined,
544
467
  ]
545
468
  }
469
+ user={
470
+ {
471
+ "_id": 1,
472
+ }
473
+ }
546
474
  >
547
- <View
548
- style={
549
- [
550
- {
551
- "marginBottom": 5,
552
- "marginLeft": 10,
553
- "marginRight": 10,
554
- },
555
- undefined,
556
- ]
475
+ <Text>
476
+ test
477
+ </Text>
478
+ </Text>
479
+ </View>
480
+ <View
481
+ style={
482
+ [
483
+ {
484
+ "alignItems": "flex-end",
485
+ "flexDirection": "row",
486
+ "justifyContent": "space-between",
487
+ "paddingBottom": 5,
488
+ "paddingHorizontal": 10,
489
+ },
490
+ undefined,
491
+ ]
492
+ }
493
+ >
494
+ <View
495
+ style={
496
+ {
497
+ "flex": 1,
557
498
  }
558
- >
499
+ }
500
+ >
501
+ <View>
559
502
  <Text
560
503
  style={
561
504
  [
package/src/__tests__/__snapshots__/MessageImage.test.tsx.snap CHANGED
@@ -7,7 +7,7 @@ exports[`MessageImage should render <MessageImage /> and compare with snapshot
7
7
  {
8
8
  "busy": undefined,
9
9
  "checked": undefined,
10
- "disabled": undefined,
10
+ "disabled": false,
11
11
  "expanded": undefined,
12
12
  "selected": undefined,
13
13
  }
@@ -21,7 +21,6 @@ exports[`MessageImage should render <MessageImage /> and compare with snapshot
21
21
  }
22
22
  }
23
23
  accessible={true}
24
- collapsable={false}
25
24
  focusable={true}
26
25
  onClick={[Function]}
27
26
  onResponderGrant={[Function]}
@@ -30,33 +29,7 @@ exports[`MessageImage should render <MessageImage /> and compare with snapshot
30
29
  onResponderTerminate={[Function]}
31
30
  onResponderTerminationRequest={[Function]}
32
31
  onStartShouldSetResponder={[Function]}
33
- style={
34
- {
35
- "opacity": 1,
36
- }
37
- }
38
- >
39
- <Image
40
- onLayout={[Function]}
41
- resizeMode="cover"
42
- source={
43
- {
44
- "uri": "url://to/image.png",
45
- }
46
- }
47
- style={
48
- [
49
- {
50
- "borderRadius": 13,
51
- "height": 100,
52
- "margin": 3,
53
- "width": 150,
54
- },
55
- undefined,
56
- ]
57
- }
58
- />
59
- </View>
32
+ />
60
33
  <OverKeyboardView
61
34
  visible={false}
62
35
  >
package/src/__tests__/__snapshots__/MessageText.test.tsx.snap CHANGED
@@ -5,10 +5,8 @@ exports[`should render <MessageText /> and compare with snapshot 1`] = `
5
5
  style={
6
6
  [
7
7
  {
8
- "marginBottom": 5,
9
- "marginLeft": 10,
10
- "marginRight": 10,
11
- "marginTop": 5,
8
+ "marginHorizontal": 10,
9
+ "marginVertical": 5,
12
10
  },
13
11
  undefined,
14
12
  ]
package/src/__tests__/__snapshots__/SystemMessage.test.tsx.snap CHANGED
@@ -10,63 +10,60 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
10
10
  "flex": 1,
11
11
  },
12
12
  {
13
- "alignItems": "center",
14
- "justifyContent": "center",
15
- },
16
- {
17
- "marginBottom": 10,
18
- "marginHorizontal": 20,
19
- "marginTop": 5,
13
+ "alignItems": "flex-end",
14
+ "backgroundColor": "rgba(0,0,0,0.05)",
15
+ "borderColor": "rgba(0,0,0,0.1)",
16
+ "borderRadius": 20,
17
+ "borderWidth": 1,
18
+ "marginHorizontal": 10,
19
+ "marginVertical": 5,
20
+ "paddingHorizontal": 10,
21
+ "paddingVertical": 10,
20
22
  },
21
23
  undefined,
22
24
  ]
23
25
  }
24
26
  >
25
- <View>
26
- <View
27
- style={
27
+ <View
28
+ style={
29
+ [
30
+ {
31
+ "marginHorizontal": 10,
32
+ "marginVertical": 5,
33
+ },
28
34
  [
29
35
  {
30
- "marginBottom": 5,
31
- "marginLeft": 10,
32
- "marginRight": 10,
33
- "marginTop": 5,
36
+ "marginHorizontal": 0,
37
+ "marginVertical": 0,
34
38
  },
39
+ undefined,
40
+ ],
41
+ ]
42
+ }
43
+ >
44
+ <Text
45
+ style={
46
+ [
35
47
  {
36
- "backgroundColor": "rgba(0,0,0,0.05)",
37
- "borderColor": "rgba(0,0,0,0.1)",
38
- "borderRadius": 20,
39
- "borderWidth": 1,
40
- "paddingHorizontal": 10,
41
- "paddingVertical": 10,
48
+ "color": "black",
42
49
  },
43
- ]
44
- }
45
- >
46
- <Text
47
- style={
50
+ undefined,
48
51
  [
49
52
  {
50
- "color": "black",
53
+ "backgroundColor": "transparent",
54
+ "fontSize": 12,
55
+ "fontStyle": "italic",
56
+ "fontWeight": "300",
51
57
  },
52
58
  undefined,
53
- [
54
- {
55
- "backgroundColor": "transparent",
56
- "fontSize": 12,
57
- "fontStyle": "italic",
58
- "fontWeight": "300",
59
- },
60
- undefined,
61
- ],
62
- ]
63
- }
64
- >
65
- <Text>
66
- test
67
- </Text>
59
+ ],
60
+ ]
61
+ }
62
+ >
63
+ <Text>
64
+ test
68
65
  </Text>
69
- </View>
66
+ </Text>
70
67
  </View>
71
68
  </View>
72
69
  `;
package/src/__tests__/__snapshots__/Time.test.tsx.snap CHANGED
@@ -3,18 +3,7 @@
3
3
  exports[`Time should not render <Time /> and compare with snapshot 1`] = `null`;
4
4
 
5
5
  exports[`Time should render <Time /> and compare with snapshot 1`] = `
6
- <View
7
- style={
8
- [
9
- {
10
- "marginBottom": 5,
11
- "marginLeft": 10,
12
- "marginRight": 10,
13
- },
14
- undefined,
15
- ]
16
- }
17
- >
6
+ <View>
18
7
  <Text
19
8
  style={
20
9
  [
package/src/styles.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { StyleSheet } from 'react-native'
1
+ import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
2
2
 
3
3
  export default StyleSheet.create({
4
4
  fill: {
@@ -10,7 +10,16 @@ export default StyleSheet.create({
10
10
  },
11
11
  })
12
12
 
13
- export function getColorSchemeStyle<T>(styles: T, baseName: string, colorScheme: string | null | undefined) {
13
+ export function getColorSchemeStyle<T>(styles: T, baseName: string, colorScheme?: string | null) {
14
14
  const key = `${baseName}_${colorScheme}` as keyof T
15
15
  return [styles[baseName as keyof T], styles[key]]
16
16
  }
17
+
18
+ export function getStyleWithPosition<T>(styles: T, baseName: string, position?: 'left' | 'right' | null) {
19
+ const stylesArray = [styles[baseName as keyof T]]
20
+ if (position) {
21
+ const key = `${baseName}_${position}` as keyof T
22
+ stylesArray.push(styles[key])
23
+ }
24
+ return StyleSheet.flatten(stylesArray) as StyleProp<ViewStyle> | StyleProp<TextStyle>
25
+ }