stream-chat-react-native-core 5.11.0-beta.1 → 5.11.0-beta.3

package/lib/commonjs/components/MessageList/MessageList.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MessageList = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _useMessageList = require("./hooks/useMessageList");
@@ -48,6 +48,13 @@ var styles = _reactNative.StyleSheet.create({
       scaleY: -1
     }]
   },
+  invertAndroid: {
+    transform: [{
+      scaleX: -1
+    }, {
+      scaleY: -1
+    }]
+  },
   listContainer: {
     flex: 1,
     width: '100%'
@@ -60,6 +67,17 @@ var styles = _reactNative.StyleSheet.create({
     top: 0
   }
 });
+var InvertedCellRendererComponent = function InvertedCellRendererComponent(props) {
+  return _react["default"].createElement(_reactNative.View, (0, _extends2["default"])({}, props, {
+    style: styles.invertAndroid,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 97,
+      columnNumber: 3
+    }
+  }));
+};
 var keyExtractor = function keyExtractor(item) {
   if (item.id) return item.id;
   if (item.created_at) return typeof item.created_at === 'string' ? item.created_at : item.created_at.toISOString();
@@ -273,7 +291,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       return _react["default"].createElement(_react["default"].Fragment, {
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 542,
+          lineNumber: 551,
           columnNumber: 9
         }
       }, _react["default"].createElement(_reactNative.View, {
@@ -281,7 +299,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 543,
+          lineNumber: 552,
           columnNumber: 11
         }
       }, _react["default"].createElement(MessageSystem, {
@@ -290,14 +308,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 544,
+          lineNumber: 553,
           columnNumber: 13
         }
       })), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 546,
+          lineNumber: 555,
           columnNumber: 43
         }
       }));
@@ -306,7 +324,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     return wrapMessageInTheme ? _react["default"].createElement(_react["default"].Fragment, {
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 553,
+        lineNumber: 562,
         columnNumber: 7
       }
     }, _react["default"].createElement(_ThemeContext.ThemeProvider, {
@@ -314,7 +332,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 554,
+        lineNumber: 563,
         columnNumber: 9
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -322,7 +340,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 555,
+        lineNumber: 564,
         columnNumber: 11
       }
     }, _react["default"].createElement(Message, {
@@ -338,7 +356,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 556,
+        lineNumber: 565,
         columnNumber: 13
       }
     }))), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
@@ -346,20 +364,20 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 572,
+        lineNumber: 581,
         columnNumber: 11
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 575,
+        lineNumber: 584,
         columnNumber: 41
       }
     })) : _react["default"].createElement(_react["default"].Fragment, {
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 578,
+        lineNumber: 587,
         columnNumber: 7
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -367,7 +385,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 579,
+        lineNumber: 588,
         columnNumber: 9
       }
     }, _react["default"].createElement(Message, {
@@ -383,7 +401,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 580,
+        lineNumber: 589,
         columnNumber: 11
       }
     })), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
@@ -391,14 +409,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 599,
+        lineNumber: 608,
         columnNumber: 11
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 602,
+        lineNumber: 611,
         columnNumber: 41
       }
     }));
@@ -686,26 +704,27 @@ var MessageListWithContext = function MessageListWithContext(props) {
       data: messageList
     });
   }
-  var renderListEmptyComponent = function renderListEmptyComponent() {
+  var shouldApplyAndroidWorkaround = inverted && _reactNative.Platform.OS === 'android' && _reactNative.Platform.Version >= 33;
+  var renderListEmptyComponent = (0, _react.useCallback)(function () {
     return _react["default"].createElement(_reactNative.View, {
-      style: [styles.flex, styles.invert],
+      style: [styles.flex, shouldApplyAndroidWorkaround ? styles.invertAndroid : styles.invert],
       testID: "empty-state",
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 951,
-        columnNumber: 5
+        lineNumber: 964,
+        columnNumber: 7
       }
     }, _react["default"].createElement(EmptyStateIndicator, {
       listType: "message",
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 952,
-        columnNumber: 7
+        lineNumber: 968,
+        columnNumber: 9
       }
     }));
-  };
+  }, [EmptyStateIndicator, shouldApplyAndroidWorkaround]);
   if (!FlatList) return null;
   if (loading) {
     return _react["default"].createElement(_reactNative.View, {
@@ -713,7 +732,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 960,
+        lineNumber: 978,
         columnNumber: 7
       }
     }, _react["default"].createElement(LoadingIndicator, {
@@ -721,7 +740,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 961,
+        lineNumber: 979,
         columnNumber: 9
       }
     }));
@@ -733,7 +752,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 968,
+        lineNumber: 986,
         columnNumber: 30
       }
     });
@@ -742,7 +761,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 969,
+        lineNumber: 987,
         columnNumber: 46
       }
     });
@@ -756,14 +775,15 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 974,
+      lineNumber: 992,
       columnNumber: 5
     }
   }, _react["default"].createElement(FlatList, (0, _extends2["default"])({
+    CellRendererComponent: shouldApplyAndroidWorkaround ? InvertedCellRendererComponent : undefined,
     contentContainerStyle: [styles.contentContainer, contentContainer],
     data: messageList,
     extraData: disabled || !hasNoMoreRecentMessagesToLoad,
-    inverted: inverted,
+    inverted: shouldApplyAndroidWorkaround ? false : inverted,
     keyboardShouldPersistTaps: "handled",
     keyExtractor: keyExtractor,
     ListEmptyComponent: renderListEmptyComponent,
@@ -783,20 +803,21 @@ var MessageListWithContext = function MessageListWithContext(props) {
     ref: refCallback,
     renderItem: renderItem,
     scrollEnabled: overlay === 'none',
-    style: [styles.listContainer, listContainer],
+    showsVerticalScrollIndicator: !shouldApplyAndroidWorkaround,
+    style: [styles.listContainer, listContainer, shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined],
     testID: "message-flat-list",
     viewabilityConfig: flatListViewabilityConfig
   }, additionalFlatListProps, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 978,
+      lineNumber: 996,
       columnNumber: 7
     }
   })), !loading && _react["default"].createElement(_react["default"].Fragment, {
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1009,
+      lineNumber: 1035,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -804,28 +825,28 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1010,
+      lineNumber: 1036,
       columnNumber: 11
     }
   }, _react["default"].createElement(StickyHeaderComponent, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1011,
+      lineNumber: 1037,
       columnNumber: 13
     }
   })), !disableTypingIndicator && TypingIndicator && _react["default"].createElement(TypingIndicatorContainer, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1014,
+      lineNumber: 1040,
       columnNumber: 13
     }
   }, _react["default"].createElement(TypingIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1015,
+      lineNumber: 1041,
       columnNumber: 15
     }
   })), _react["default"].createElement(ScrollToBottomButton, {
@@ -835,14 +856,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1018,
+      lineNumber: 1044,
       columnNumber: 11
     }
   })), _react["default"].createElement(NetworkDownIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1025,
+      lineNumber: 1051,
       columnNumber: 7
     }
   }));
@@ -949,7 +970,7 @@ var MessageList = function MessageList(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1083,
+      lineNumber: 1109,
       columnNumber: 5
     }
   }));