Modified for flatlist (from #629)

package.json

@@ -26,7 +26,7 @@
   "scripts": {
     "lint": "eslint . --ext .js,.jsx",
     "precommit": "yarn lint",
-    "test": "jest",
+    "test": "jest --no-watchman",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage"
   },
@@ -57,7 +57,6 @@
     "moment": "^2.19.0",
     "prop-types": "15.6.0",
     "react-native-communications": "2.2.1",
-    "react-native-invertible-scroll-view": "^1.1.0",
     "react-native-lightbox": "^0.7.0",
     "react-native-parsed-text": "^0.0.20",
     "shallowequal": "1.0.2",

src/MessageContainer.js

@@ -3,17 +3,16 @@
     no-param-reassign: 0,
     no-use-before-define: ["error", { "variables": false }],
     no-return-assign: 0,
-    react/no-string-refs: 0
+    react/no-string-refs: 0,
+    react/sort-comp: 0
 */
 
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { ListView, View, StyleSheet } from 'react-native';
+import { FlatList, View, StyleSheet } from 'react-native';
 
 import shallowequal from 'shallowequal';
-import InvertibleScrollView from 'react-native-invertible-scroll-view';
-import md5 from 'md5';
 import LoadEarlier from './LoadEarlier';
 import Message from './Message';
 
@@ -25,30 +24,13 @@ export default class MessageContainer extends React.Component {
     this.renderRow = this.renderRow.bind(this);
     this.renderFooter = this.renderFooter.bind(this);
     this.renderLoadEarlier = this.renderLoadEarlier.bind(this);
-    this.renderScrollComponent = this.renderScrollComponent.bind(this);
-
-    const dataSource = new ListView.DataSource({
-      rowHasChanged: (r1, r2) => {
-        return r1.hash !== r2.hash;
-      },
-    });
-
-    const messagesData = this.prepareMessages(props.messages);
+    this.renderHeaderWrapper = this.renderHeaderWrapper.bind(this);
+    this.keyExtractor = this.keyExtractor.bind(this);
     this.state = {
-      dataSource: dataSource.cloneWithRows(messagesData.blob, messagesData.keys),
+      messagesData: this.prepareMessages(props.messages),
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.messages === nextProps.messages) {
-      return;
-    }
-    const messagesData = this.prepareMessages(nextProps.messages);
-    this.setState({
-      dataSource: this.state.dataSource.cloneWithRows(messagesData.blob, messagesData.keys),
-    });
-  }
-
   shouldComponentUpdate(nextProps, nextState) {
     if (!shallowequal(this.props, nextProps)) {
       return true;
@@ -60,26 +42,35 @@ export default class MessageContainer extends React.Component {
   }
 
   prepareMessages(messages) {
-    return {
-      keys: messages.map((m) => m._id),
-      blob: messages.reduce((o, m, i) => {
-        const previousMessage = messages[i + 1] || {};
-        const nextMessage = messages[i - 1] || {};
-        // add next and previous messages to hash to ensure updates
-        const toHash = JSON.stringify(m) + previousMessage._id + nextMessage._id;
-        o[m._id] = {
-          ...m,
-          previousMessage,
-          nextMessage,
-          hash: md5(toHash),
-        };
-        return o;
-      }, {}),
-    };
+    return messages.reduce((o, m, i) => {
+      const previousMessage = messages[i + 1] || {};
+      const nextMessage = messages[i - 1] || {};
+      o.push({
+        ...m,
+        previousMessage,
+        nextMessage,
+      });
+      return o;
+    }, []);
   }
 
-  scrollTo(options) {
-    this._invertibleScrollViewRef.scrollTo(options);
+  componentWillReceiveProps(nextProps) {
+    if (this.props.messages === nextProps.messages) {
+      return;
+    }
+    this.setState({
+      messagesData: this.prepareMessages(nextProps.messages),
+    });
+  }
+
+  renderFooter() {
+    if (this.props.renderFooter) {
+      const footerProps = {
+        ...this.props,
+      };
+      return this.props.renderFooter(footerProps);
+    }
+    return null;
   }
 
   renderLoadEarlier() {
@@ -95,72 +86,66 @@ export default class MessageContainer extends React.Component {
     return null;
   }
 
-  renderFooter() {
-    if (this.props.renderFooter) {
-      const footerProps = {
-        ...this.props,
-      };
-      return this.props.renderFooter(footerProps);
-    }
-    return null;
+  scrollTo(options) {
+    this.refs.flatListRef.scrollToOffset(options);
   }
 
-  renderRow(message) {
-    if (!message._id && message._id !== 0) {
-      console.warn('GiftedChat: `_id` is missing for message', JSON.stringify(message));
+  renderRow({ item }) {
+    if (!item._id && item._id !== 0) {
+      console.warn('GiftedChat: `_id` is missing for message', JSON.stringify(item));
     }
-    if (!message.user) {
-      if (!message.system) {
-        console.warn('GiftedChat: `user` is missing for message', JSON.stringify(message));
+    if (!item.user) {
+      if (!item.system) {
+        console.warn('GiftedChat: `user` is missing for message', JSON.stringify(item));
       }
-      message.user = {};
+      item.user = {};
     }
 
     const messageProps = {
       ...this.props,
-      key: message._id,
-      currentMessage: message,
-      previousMessage: message.previousMessage,
-      nextMessage: message.nextMessage,
-      position: message.user._id === this.props.user._id ? 'right' : 'left',
+      key: item._id,
+      currentMessage: item,
+      previousMessage: item.previousMessage,
+      nextMessage: item.nextMessage,
+      position: item.user._id === this.props.user._id ? 'right' : 'left',
     };
 
     if (this.props.renderMessage) {
       return this.props.renderMessage(messageProps);
     }
-    return <Message {...messageProps} />;
-  }
-
-  renderScrollComponent(props) {
-    const { invertibleScrollViewProps } = this.props;
     return (
-      <InvertibleScrollView
-        {...props}
-        {...invertibleScrollViewProps}
-        ref={(component) => (this._invertibleScrollViewRef = component)}
-      />
+      <View style={{ transform: [{ scaleY: -1 }, { perspective: 1280 }] }}>
+        <Message {...messageProps} />
+      </View>
     );
   }
 
-  render() {
-    const contentContainerStyle = this.props.inverted
-      ? {}
-      : styles.notInvertedContentContainerStyle;
+  renderHeaderWrapper() {
+    return <View style={styles.headerWrapper}>{this.renderLoadEarlier()}</View>;
+  }
+
+  keyExtractor(item, index) {
+    return `${item._id} ${index}`;
+  }
 
+  render() {
     return (
       <View ref="container" style={styles.container}>
-        <ListView
+        <FlatList
           enableEmptySections
           automaticallyAdjustContentInsets={false}
           initialListSize={20}
           pageSize={20}
+          ref="flatListRef"
+          keyExtractor={this.keyExtractor}
           {...this.props.listViewProps}
-          dataSource={this.state.dataSource}
-          contentContainerStyle={contentContainerStyle}
-          renderRow={this.renderRow}
-          renderHeader={this.props.inverted ? this.renderFooter : this.renderLoadEarlier}
-          renderFooter={this.props.inverted ? this.renderLoadEarlier : this.renderFooter}
-          renderScrollComponent={this.renderScrollComponent}
+          data={this.state.messagesData}
+          renderItem={this.renderRow}
+          renderHeader={this.renderFooter}
+          renderFooter={this.renderLoadEarlier()}
+          style={{ transform: [{ scaleY: -1 }, { perspective: 1280 }] }}
+          {...this.props.invertibleScrollViewProps}
+          ListFooterComponent={this.renderHeaderWrapper}
         />
       </View>
     );
@@ -172,8 +157,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  notInvertedContentContainerStyle: {
-    justifyContent: 'flex-end',
+  headerWrapper: {
+    flex: 1,
+    transform: [{ scaleY: -1 }, { perspective: 1280 }],
   },
 });
 
@@ -182,7 +168,7 @@ MessageContainer.defaultProps = {
   user: {},
   renderFooter: null,
   renderMessage: null,
-  onLoadEarlier: () => { },
+  onLoadEarlier: () => {},
   inverted: true,
   loadEarlier: false,
   listViewProps: {},

src/__tests__/__snapshots__/MessageContainer.test.js.snap

@@ -9,21 +9,70 @@ exports[`should render <MessageContainer /> and compare with snapshot 1`] = `
   }
 >
   <RCTScrollView
+    ListFooterComponent={[Function]}
     automaticallyAdjustContentInsets={false}
-    contentContainerStyle={Object {}}
-    dataSource={
-      ListViewDataSource {
-        "items": 0,
-      }
-    }
+    data={Array []}
+    disableVirtualization={false}
     enableEmptySections={true}
+    getItem={[Function]}
+    getItemCount={[Function]}
+    horizontal={false}
     initialListSize={20}
+    initialNumToRender={10}
+    keyExtractor={[Function]}
+    maxToRenderPerBatch={10}
+    numColumns={1}
+    onContentSizeChange={[Function]}
+    onEndReachedThreshold={2}
+    onLayout={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
     pageSize={20}
-    renderFooter={[Function]}
+    renderFooter={null}
     renderHeader={[Function]}
-    renderRow={[Function]}
+    renderItem={[Function]}
+    scrollEventThrottle={50}
+    stickyHeaderIndices={Array []}
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scaleY": -1,
+          },
+          Object {
+            "perspective": 1280,
+          },
+        ],
+      }
+    }
+    updateCellsBatchingPeriod={50}
+    viewabilityConfigCallbackPairs={Array []}
+    windowSize={21}
   >
-    <View />
+    <View>
+      <View
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            Object {
+              "flex": 1,
+              "transform": Array [
+                Object {
+                  "scaleY": -1,
+                },
+                Object {
+                  "perspective": 1280,
+                },
+              ],
+            }
+          }
+        />
+      </View>
+    </View>
   </RCTScrollView>
 </View>
 `;