react-native-gifted-chat 2.6.4 → 2.7.0

package/src/__tests__/__snapshots__/Message.test.tsx.snap

@@ -4,37 +4,6 @@ exports[`Message component should NOT render <Message /> 1`] = `null`;
 
 exports[`Message component should render <Message /> and compare with snapshot 1`] = `
 <View>
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "justifyContent": "center",
-          "marginBottom": 10,
-          "marginTop": 5,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "color": "#b2b2b2",
-              "fontSize": 12,
-              "fontWeight": "600",
-            },
-            undefined,
-          ]
-        }
-      >
-        Apr 8, 2019
-      </Text>
-    </View>
-  </View>
   <View
     style={
       [
@@ -48,7 +17,9 @@ exports[`Message component should render <Message /> and compare with snapshot 1
         {
           "marginBottom": 10,
         },
-        false,
+        {
+          "marginBottom": 2,
+        },
         undefined,
       ]
     }
@@ -57,9 +28,11 @@ exports[`Message component should render <Message /> and compare with snapshot 1
       style={
         [
           {
-            "alignItems": "flex-start",
             "flex": 1,
           },
+          {
+            "alignItems": "flex-start",
+          },
           undefined,
         ]
       }
@@ -200,37 +173,6 @@ exports[`Message component should render <Message /> and compare with snapshot 1
 
 exports[`Message component should render <Message /> with Avatar 1`] = `
 <View>
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "justifyContent": "center",
-          "marginBottom": 10,
-          "marginTop": 5,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "color": "#b2b2b2",
-              "fontSize": 12,
-              "fontWeight": "600",
-            },
-            undefined,
-          ]
-        }
-      >
-        Apr 8, 2019
-      </Text>
-    </View>
-  </View>
   <View
     style={
       [
@@ -244,7 +186,9 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
         {
           "marginBottom": 10,
         },
-        false,
+        {
+          "marginBottom": 2,
+        },
         undefined,
       ]
     }
@@ -266,9 +210,11 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
           [
             {
               "alignItems": "center",
+              "justifyContent": "center",
+            },
+            {
               "borderRadius": 20,
               "height": 40,
-              "justifyContent": "center",
               "width": 40,
             },
             {
@@ -290,9 +236,11 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
       style={
         [
           {
-            "alignItems": "flex-start",
             "flex": 1,
           },
+          {
+            "alignItems": "flex-start",
+          },
           undefined,
         ]
       }
@@ -433,37 +381,6 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
 
 exports[`Message component should render null if user has no Avatar 1`] = `
 <View>
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "justifyContent": "center",
-          "marginBottom": 10,
-          "marginTop": 5,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "color": "#b2b2b2",
-              "fontSize": 12,
-              "fontWeight": "600",
-            },
-            undefined,
-          ]
-        }
-      >
-        Apr 8, 2019
-      </Text>
-    </View>
-  </View>
   <View
     style={
       [
@@ -477,7 +394,9 @@ exports[`Message component should render null if user has no Avatar 1`] = `
         {
           "marginBottom": 10,
         },
-        false,
+        {
+          "marginBottom": 2,
+        },
         undefined,
       ]
     }
@@ -486,9 +405,11 @@ exports[`Message component should render null if user has no Avatar 1`] = `
       style={
         [
           {
-            "alignItems": "flex-start",
             "flex": 1,
           },
+          {
+            "alignItems": "flex-start",
+          },
           undefined,
         ]
       }

package/src/__tests__/__snapshots__/MessageContainer.test.tsx.snap

@@ -3,106 +3,306 @@
 exports[`should render <MessageContainer /> and compare with snapshot 1`] = `
 <View
   style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <RCTScrollView
-    ListEmptyComponent={[Function]}
-    ListFooterComponent={[Function]}
-    ListHeaderComponent={[Function]}
-    automaticallyAdjustContentInsets={false}
-    contentContainerStyle={
+    [
       {
         "flexGrow": 1,
         "justifyContent": "flex-start",
+      },
+      {
+        "flex": 1,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flex": 1,
+        "overflow": "hidden",
+        "transform": [
+          {
+            "scaleY": -1,
+          },
+        ],
       }
     }
-    data={[]}
-    extraData={
-      [
-        null,
-        false,
-      ]
-    }
-    getItem={[Function]}
-    getItemCount={[Function]}
-    invertStickyHeaders={true}
-    inverted={true}
-    isInvertedVirtualizedList={true}
-    keyExtractor={[Function]}
-    onContentSizeChange={[Function]}
-    onEndReached={[Function]}
-    onEndReachedThreshold={0.1}
-    onLayout={[Function]}
-    onMomentumScrollBegin={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    scrollEventThrottle={100}
-    stickyHeaderIndices={[]}
-    style={
-      [
+  >
+    <RCTScrollView
+      ListEmptyComponent={[Function]}
+      ListFooterComponent={null}
+      ListHeaderComponent={
+        <React.Fragment>
+          <TypingIndicator
+            isTyping={false}
+          />
+        </React.Fragment>
+      }
+      applyWindowCorrection={[Function]}
+      automaticallyAdjustContentInsets={false}
+      canChangeSize={true}
+      collapsable={false}
+      contentContainerStyle={
         {
-          "transform": [
-            {
-              "scaleY": -1,
-            },
+          "backgroundColor": undefined,
+          "minHeight": 1,
+          "minWidth": 1,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+        }
+      }
+      contentHeight={0}
+      contentWidth={0}
+      data={[]}
+      dataProvider={
+        DataProvider {
+          "_data": [],
+          "_firstIndexToProcess": 0,
+          "_hasStableIds": true,
+          "_requiresDataChangeHandling": false,
+          "_size": 0,
+          "getStableId": [Function],
+          "rowHasChanged": [Function],
+        }
+      }
+      disableRecycling={false}
+      estimatedItemSize={100}
+      extendedState={
+        {
+          "value": [
+            null,
+            false,
           ],
-        },
+        }
+      }
+      externalScrollView={[Function]}
+      extraData={
+        [
+          null,
+          false,
+        ]
+      }
+      finalRenderAheadOffset={250}
+      forceNonDeterministicRendering={true}
+      horizontal={false}
+      initialOffset={0}
+      initialRenderIndex={0}
+      inverted={true}
+      isHorizontal={false}
+      jestAnimatedStyle={
+        {
+          "value": {},
+        }
+      }
+      jestInlineStyle={
         {
           "flex": 1,
-        },
-      ]
-    }
-    viewabilityConfigCallbackPairs={[]}
-  >
-    <View>
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-        style={
-          {
-            "transform": [
-              {
-                "scaleY": -1,
-              },
+        }
+      }
+      keyExtractor={[Function]}
+      layoutProvider={
+        GridLayoutProviderWithProps {
+          "_acceptableRelayoutDelta": 1,
+          "_getHeightOrWidth": [Function],
+          "_getLayoutTypeForIndex": [Function],
+          "_getSpan": [Function],
+          "_hasExpired": false,
+          "_maxSpan": 1,
+          "_setLayoutForType": [Function],
+          "_tempDim": {
+            "height": 0,
+            "width": 0,
+          },
+          "averageWindow": AverageWindow {
+            "currentAverage": 100,
+            "currentCount": 1,
+            "inputValues": [
+              100,
             ],
-          }
+            "nextIndex": 1,
+          },
+          "defaultEstimatedItemSize": 100,
+          "layoutObject": {
+            "size": undefined,
+            "span": undefined,
+          },
+          "props": {
+            "ListEmptyComponent": [Function],
+            "ListFooterComponent": null,
+            "ListHeaderComponent": <React.Fragment>
+              <TypingIndicator
+                isTyping={false}
+              />
+            </React.Fragment>,
+            "automaticallyAdjustContentInsets": false,
+            "collapsable": false,
+            "data": [],
+            "estimatedItemSize": 100,
+            "extraData": [
+              null,
+              false,
+            ],
+            "inverted": true,
+            "jestAnimatedStyle": {
+              "value": {},
+            },
+            "jestInlineStyle": {
+              "flex": 1,
+            },
+            "keyExtractor": [Function],
+            "nativeID": undefined,
+            "numColumns": 1,
+            "onEndReached": [Function],
+            "onEndReachedThreshold": 0.1,
+            "onLayout": [Function],
+            "onScroll": [Function],
+            "renderItem": [Function],
+            "scrollEventThrottle": 16,
+            "style": {
+              "flex": 1,
+            },
+          },
+          "renderWindowInsets": {
+            "height": 0,
+            "width": 0,
+          },
+          "shouldRefreshWithAnchoring": true,
         }
-      />
-      <View
-        style={
-          {
-            "flex": 1,
-          }
+      }
+      maxRenderAhead={750}
+      numColumns={1}
+      onEndReached={[Function]}
+      onEndReachedThreshold={0}
+      onEndReachedThresholdRelative={0.1}
+      onItemLayout={[Function]}
+      onLayout={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onSizeChanged={[Function]}
+      onVisibleIndicesChanged={[Function]}
+      removeClippedSubviews={false}
+      renderAheadOffset={0}
+      renderAheadStep={250}
+      renderContentContainer={[Function]}
+      renderItem={[Function]}
+      renderItemContainer={[Function]}
+      rowRenderer={[Function]}
+      scrollEventThrottle={16}
+      scrollThrottle={16}
+      scrollViewProps={
+        {
+          "contentContainerStyle": {
+            "backgroundColor": undefined,
+            "minHeight": 1,
+            "minWidth": 1,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+          },
+          "onLayout": [Function],
+          "onScrollBeginDrag": [Function],
+          "refreshControl": undefined,
+          "style": {
+            "minHeight": 1,
+            "minWidth": 1,
+          },
         }
-      />
-      <View
-        onLayout={[Function]}
-        style={
-          {
-            "transform": [
-              {
-                "scaleY": -1,
-              },
-            ],
-          }
+      }
+      style={
+        {
+          "minHeight": 1,
+          "minWidth": 1,
+        }
+      }
+      suppressBoundedSizeException={true}
+      windowCorrectionConfig={
+        {
+          "applyToInitialOffset": true,
+          "applyToItemScroll": true,
+          "value": {
+            "endCorrection": 0,
+            "startCorrection": 0,
+            "windowShift": -1,
+          },
         }
-      >
+      }
+    >
+      <View>
         <View
           style={
             {
-              "flex": 1,
+              "flexDirection": "column",
             }
           }
-        />
+        >
+          <View
+            style={
+              {
+                "paddingLeft": 0,
+                "paddingTop": 0,
+              }
+            }
+          />
+          <View
+            style={
+              [
+                undefined,
+                {
+                  "transform": [
+                    {
+                      "scaleY": -1,
+                    },
+                  ],
+                },
+              ]
+            }
+          />
+          <AutoLayoutView
+            enableInstrumentation={false}
+            horizontal={false}
+            onBlankAreaEvent={[Function]}
+            onLayout={[Function]}
+            renderAheadOffset={0}
+            scrollOffset={0}
+            style={
+              {
+                "height": 0,
+                "width": 0,
+              }
+            }
+            windowSize={0}
+          />
+          <View
+            style={
+              {
+                "flex": 1,
+              }
+            }
+          />
+          <CellContainer
+            index={-1}
+            style={
+              [
+                undefined,
+                {
+                  "transform": [
+                    {
+                      "scaleY": -1,
+                    },
+                  ],
+                },
+              ]
+            }
+          />
+          <View
+            style={
+              {
+                "paddingBottom": 0,
+                "paddingRight": 0,
+              }
+            }
+          />
+        </View>
       </View>
-    </View>
-  </RCTScrollView>
+    </RCTScrollView>
+  </View>
 </View>
 `;

package/src/__tests__/__snapshots__/MessageImage.test.tsx.snap

@@ -5,10 +5,14 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
   <Lightbox
     activeProps={
       {
-        "style": {
-          "flex": 1,
-          "resizeMode": "contain",
-        },
+        "style": [
+          {
+            "flex": 1,
+          },
+          {
+            "resizeMode": "contain",
+          },
+        ],
       }
     }
   >

package/src/__tests__/__snapshots__/SystemMessage.test.tsx.snap

@@ -7,9 +7,13 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
   style={
     [
       {
-        "alignItems": "center",
         "flex": 1,
+      },
+      {
+        "alignItems": "center",
         "justifyContent": "center",
+      },
+      {
         "marginBottom": 10,
         "marginTop": 5,
       },

package/src/__tests__/data.ts

@@ -1,4 +1,4 @@
-import { IMessage } from '../Models'
+import { IMessage } from '../types'
 
 export const DEFAULT_TEST_MESSAGE: IMessage = {
   _id: 'test',

package/src/index.ts

@@ -1,5 +1,3 @@
-import 'react-native-get-random-values' // NOTE: FOR "uuid" SUPPORT
-
 export * from './GiftedChat'
 export * from './Constant'
 export * from './utils'

package/src/styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+  centerItems: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/{Models.ts → types.ts}

@@ -31,7 +31,7 @@ export interface LeftRightStyle<T> {
   right?: StyleProp<T>
 }
 
-type renderFunction = (x: unknown) => JSX.Element
+type renderFunction = (x: unknown) => React.ReactNode
 
 export interface User {
   _id: string | number

package/src/utils.ts

@@ -1,14 +1,6 @@
-import PropTypes from 'prop-types'
 import dayjs from 'dayjs'
 
-import { IMessage } from './Models'
-
-export const StylePropType = PropTypes.oneOfType([
-  PropTypes.array,
-  PropTypes.object,
-  PropTypes.number,
-  PropTypes.bool,
-])
+import { IMessage } from './types'
 
 export function isSameDay (
   currentMessage: IMessage,