react-native-gifted-chat 3.0.1 → 3.1.1

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 +60 -68
  6. package/src/Bubble/types.ts +3 -2
  7. package/src/Composer.tsx +1 -1
  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 +52 -64
  25. package/src/__tests__/__snapshots__/Composer.test.tsx.snap +5 -0
  26. package/src/__tests__/__snapshots__/InputToolbar.test.tsx.snap +5 -0
  27. package/src/__tests__/__snapshots__/Message.test.tsx.snap +161 -197
  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,67 @@ 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
- ]
74
+ <View
75
+ style={
76
+ [
77
+ {
78
+ "marginHorizontal": 10,
79
+ "marginVertical": 5,
80
+ },
81
+ undefined,
82
+ ]
83
+ }
84
+ >
85
+ <Text
86
+ style={
87
+ [
88
+ {
89
+ "color": "black",
90
+ },
91
+ undefined,
92
+ undefined,
93
+ ]
94
+ }
95
+ user={
96
+ {
97
+ "_id": 1,
100
98
  }
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>
99
+ }
100
+ >
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
+ >
124
120
  <View
125
121
  style={
126
122
  [
127
123
  {
124
+ "flex": 1,
125
+ },
126
+ {
127
+ "alignItems": "center",
128
128
  "flexDirection": "row",
129
- "justifyContent": "flex-start",
129
+ "justifyContent": "flex-end",
130
130
  },
131
- undefined,
132
131
  ]
133
132
  }
134
133
  >
135
- <View
136
- style={
137
- [
138
- {
139
- "marginBottom": 5,
140
- "marginLeft": 10,
141
- "marginRight": 10,
142
- },
143
- undefined,
144
- ]
145
- }
146
- >
134
+ <View>
147
135
  <Text
148
136
  style={
149
137
  [
@@ -178,7 +166,7 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
178
166
  "flexDirection": "row",
179
167
  "justifyContent": "flex-start",
180
168
  "marginLeft": 8,
181
- "marginRight": 0,
169
+ "maxWidth": "80%",
182
170
  },
183
171
  {
184
172
  "marginBottom": 10,
@@ -229,19 +217,7 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
229
217
  }
230
218
  />
231
219
  </View>
232
- <View
233
- style={
234
- [
235
- {
236
- "flex": 1,
237
- },
238
- {
239
- "alignItems": "flex-start",
240
- },
241
- undefined,
242
- ]
243
- }
244
- >
220
+ <View>
245
221
  <View
246
222
  style={
247
223
  [
@@ -249,7 +225,6 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
249
225
  "backgroundColor": "#f0f0f0",
250
226
  "borderRadius": 15,
251
227
  "justifyContent": "flex-end",
252
- "marginRight": 60,
253
228
  "minHeight": 20,
254
229
  },
255
230
  null,
@@ -289,67 +264,68 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
289
264
  onResponderTerminationRequest={[Function]}
290
265
  onStartShouldSetResponder={[Function]}
291
266
  >
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
- ]
267
+ <View
268
+ style={
269
+ [
270
+ {
271
+ "marginHorizontal": 10,
272
+ "marginVertical": 5,
273
+ },
274
+ undefined,
275
+ ]
276
+ }
277
+ >
278
+ <Text
279
+ isUserAvatarVisible={true}
280
+ style={
281
+ [
282
+ {
283
+ "color": "black",
284
+ },
285
+ undefined,
286
+ undefined,
287
+ ]
288
+ }
289
+ user={
290
+ {
291
+ "_id": 1,
305
292
  }
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>
293
+ }
294
+ >
295
+ <Text>
296
+ test
297
+ </Text>
298
+ </Text>
299
+ </View>
300
+ <View
301
+ style={
302
+ [
303
+ {
304
+ "alignItems": "flex-end",
305
+ "flexDirection": "row",
306
+ "justifyContent": "space-between",
307
+ "paddingBottom": 5,
308
+ "paddingHorizontal": 10,
309
+ },
310
+ undefined,
311
+ ]
312
+ }
313
+ >
330
314
  <View
331
315
  style={
332
316
  [
333
317
  {
318
+ "flex": 1,
319
+ },
320
+ {
321
+ "alignItems": "center",
334
322
  "flexDirection": "row",
335
- "justifyContent": "flex-start",
323
+ "justifyContent": "flex-end",
336
324
  },
337
- undefined,
338
325
  ]
339
326
  }
340
327
  >
341
- <View
342
- style={
343
- [
344
- {
345
- "marginBottom": 5,
346
- "marginLeft": 10,
347
- "marginRight": 10,
348
- },
349
- undefined,
350
- ]
351
- }
352
- >
328
+ <View>
353
329
  <Text
354
330
  style={
355
331
  [
@@ -384,7 +360,7 @@ exports[`Message component should render null if user has no Avatar 1`] = `
384
360
  "flexDirection": "row",
385
361
  "justifyContent": "flex-start",
386
362
  "marginLeft": 8,
387
- "marginRight": 0,
363
+ "maxWidth": "80%",
388
364
  },
389
365
  {
390
366
  "marginBottom": 10,
@@ -435,19 +411,7 @@ exports[`Message component should render null if user has no Avatar 1`] = `
435
411
  }
436
412
  />
437
413
  </View>
438
- <View
439
- style={
440
- [
441
- {
442
- "flex": 1,
443
- },
444
- {
445
- "alignItems": "flex-start",
446
- },
447
- undefined,
448
- ]
449
- }
450
- >
414
+ <View>
451
415
  <View
452
416
  style={
453
417
  [
@@ -455,7 +419,6 @@ exports[`Message component should render null if user has no Avatar 1`] = `
455
419
  "backgroundColor": "#f0f0f0",
456
420
  "borderRadius": 15,
457
421
  "justifyContent": "flex-end",
458
- "marginRight": 60,
459
422
  "minHeight": 20,
460
423
  },
461
424
  null,
@@ -495,67 +458,68 @@ exports[`Message component should render null if user has no Avatar 1`] = `
495
458
  onResponderTerminationRequest={[Function]}
496
459
  onStartShouldSetResponder={[Function]}
497
460
  >
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
- ]
461
+ <View
462
+ style={
463
+ [
464
+ {
465
+ "marginHorizontal": 10,
466
+ "marginVertical": 5,
467
+ },
468
+ undefined,
469
+ ]
470
+ }
471
+ >
472
+ <Text
473
+ isUserAvatarVisible={true}
474
+ style={
475
+ [
476
+ {
477
+ "color": "black",
478
+ },
479
+ undefined,
480
+ undefined,
481
+ ]
482
+ }
483
+ user={
484
+ {
485
+ "_id": 1,
511
486
  }
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>
487
+ }
488
+ >
489
+ <Text>
490
+ test
491
+ </Text>
492
+ </Text>
493
+ </View>
494
+ <View
495
+ style={
496
+ [
497
+ {
498
+ "alignItems": "flex-end",
499
+ "flexDirection": "row",
500
+ "justifyContent": "space-between",
501
+ "paddingBottom": 5,
502
+ "paddingHorizontal": 10,
503
+ },
504
+ undefined,
505
+ ]
506
+ }
507
+ >
536
508
  <View
537
509
  style={
538
510
  [
539
511
  {
512
+ "flex": 1,
513
+ },
514
+ {
515
+ "alignItems": "center",
540
516
  "flexDirection": "row",
541
- "justifyContent": "flex-start",
517
+ "justifyContent": "flex-end",
542
518
  },
543
- undefined,
544
519
  ]
545
520
  }
546
521
  >
547
- <View
548
- style={
549
- [
550
- {
551
- "marginBottom": 5,
552
- "marginLeft": 10,
553
- "marginRight": 10,
554
- },
555
- undefined,
556
- ]
557
- }
558
- >
522
+ <View>
559
523
  <Text
560
524
  style={
561
525
  [
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
+ }