fix(FlatList): purify Avatar, Bubble, ...

example-expo/App.js

@@ -80,6 +80,7 @@ export default class App extends Component {
           messages={this.state.messages}
           onSend={this.onSend}
           renderCustomView={CustomView}
+          keyboardShouldPersistTaps="never"
           user={{
             _id: 1,
           }}

package.json

@@ -51,7 +51,6 @@
   },
   "dependencies": {
     "@expo/react-native-action-sheet": "^1.0.1",
-    "hash-sum": "1.0.2",
     "moment": "^2.19.0",
     "react-native-communications": "2.2.1",
     "react-native-lightbox": "^0.7.0",

src/Avatar.js

@@ -35,7 +35,7 @@ const styles = {
   }),
 };
 
-export default class Avatar extends React.Component {
+export default class Avatar extends React.PureComponent {
 
   renderAvatar() {
     if (this.props.renderAvatar) {

src/Bubble.js

@@ -11,7 +11,7 @@ import Color from './Color';
 
 import { isSameUser, isSameDay } from './utils';
 
-export default class Bubble extends React.Component {
+export default class Bubble extends React.PureComponent {
 
   constructor(props) {
     super(props);

src/Message.js

@@ -1,4 +1,4 @@
-/* eslint no-use-before-define: ["error", { "variables": false }], react-native/no-inline-styles: 0 */
+/* eslint react-native/no-inline-styles: 0 */
 
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -11,6 +11,27 @@ import Day from './Day';
 
 import { isSameUser, isSameDay } from './utils';
 
+const styles = {
+  left: StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-start',
+      marginLeft: 8,
+      marginRight: 0,
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-end',
+      marginLeft: 0,
+      marginRight: 8,
+    },
+  }),
+};
+
 export default class Message extends React.PureComponent {
 
   getInnerComponentProps() {
@@ -88,27 +109,6 @@ export default class Message extends React.PureComponent {
 
 }
 
-const styles = {
-  left: StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      justifyContent: 'flex-start',
-      marginLeft: 8,
-      marginRight: 0,
-    },
-  }),
-  right: StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      justifyContent: 'flex-end',
-      marginLeft: 0,
-      marginRight: 8,
-    },
-  }),
-};
-
 Message.defaultProps = {
   renderAvatar: undefined,
   renderBubble: null,

src/MessageContainer.js

@@ -11,7 +11,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import { FlatList, View, StyleSheet, Platform } from 'react-native';
-import sum from 'hash-sum';
 
 import LoadEarlier from './LoadEarlier';
 import Message from './Message';
@@ -77,9 +76,6 @@ export default class MessageContainer extends React.PureComponent {
       previousMessage,
       nextMessage,
       position: item.user._id === this.props.user._id ? 'right' : 'left',
-      hash: sum(
-        `${item.body ? item.body.length : 0}${JSON.stringify(item.attributes)}${previousMessage._id}${nextMessage._id}`,
-      ),
     };
 
     if (this.props.renderMessage) {

src/MessageText.js

@@ -8,7 +8,7 @@ import Communications from 'react-native-communications';
 
 const WWW_URL_PATTERN = /^www\./i;
 
-export default class MessageText extends React.Component {
+export default class MessageText extends React.PureComponent {
 
   constructor(props) {
     super(props);
@@ -62,17 +62,9 @@ export default class MessageText extends React.Component {
   }
 
   render() {
-    const linkStyle = StyleSheet.flatten([
-      styles[this.props.position].link,
-      this.props.linkStyle[this.props.position],
-    ]);
+    const linkStyle = StyleSheet.flatten([styles[this.props.position].link, this.props.linkStyle[this.props.position]]);
     return (
-      <View
-        style={[
-          styles[this.props.position].container,
-          this.props.containerStyle[this.props.position],
-        ]}
-      >
+      <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
         <ParsedText
           style={[
             styles[this.props.position].text,