Fix missing avatars

src/components/Avatar.js

@@ -29,7 +29,6 @@ class Avatar extends PureComponent {
 
         return (
             <Image
-                ref={el => this.image = el}
                 source={{uri: this.props.source}}
                 style={_.union([
                     this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal,

src/components/InvertedFlatList/BaseInvertedFlatList.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-multi-spaces */
 import _ from 'underscore';
 import React, {forwardRef, Component} from 'react';
 import PropTypes from 'prop-types';
@@ -25,11 +26,15 @@ const propTypes = {
 
     // Should we measure these items and call getItemLayout?
     shouldMeasureItems: PropTypes.bool,
+
+    // Should we remove the clipped sub views?
+    removeClippedSubviews: PropTypes.bool,
 };
 
 const defaultProps = {
     data: [],
     shouldMeasureItems: false,
+    removeClippedSubviews: false,
 };
 
 class BaseInvertedFlatList extends Component {
@@ -146,18 +151,13 @@ class BaseInvertedFlatList extends Component {
 
                 // Native platforms do not need to measure items and work fine without this.
                 // Web requires that items be measured or else crazy things happen when scrolling.
-                // eslint-disable-next-line react/jsx-props-no-multi-spaces
                 getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined}
                 bounces={false}
 
                 // We keep this property very low so that chat switching remains fast
-                // eslint-disable-next-line react/jsx-props-no-multi-spaces
                 maxToRenderPerBatch={1}
                 windowSize={15}
-
-                // Setting removeClippedSubviews will break text selection on Android
-                // eslint-disable-next-line react/jsx-props-no-multi-spaces
-                removeClippedSubviews={false}
+                removeClippedSubviews={this.props.removeClippedSubviews}
             />
         );
     }

src/components/InvertedFlatList/index.android.js

@@ -0,0 +1,15 @@
+import React, {forwardRef} from 'react';
+import BaseInvertedFlatList from './BaseInvertedFlatList';
+
+export default forwardRef((props, ref) => (
+    <BaseInvertedFlatList
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+
+        // Remove clipped subviews helps prevent avatars and attachments from eating up excess memory on Android. When
+        // we run out of memory images stop appearing without any warning.
+        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+        removeClippedSubviews
+    />
+));

src/components/OptionsList.js

@@ -1,10 +1,11 @@
 import _ from 'underscore';
 import React, {forwardRef, Component} from 'react';
-import {View, SectionList, Text} from 'react-native';
+import {View, Text} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import OptionRow from '../pages/home/sidebar/OptionRow';
 import optionPropTypes from './optionPropTypes';
+import SectionList from './SectionList';
 
 const propTypes = {
     // Style for hovered state

src/components/SectionList/index.android.js

@@ -0,0 +1,15 @@
+import React, {forwardRef} from 'react';
+import {SectionList} from 'react-native';
+
+export default forwardRef((props, ref) => (
+    <SectionList
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+
+        // For Android we want to use removeClippedSubviews since it helps manage memory consumption. When we
+        // run out memory images stop loading and appear as grey circles
+        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+        removeClippedSubviews
+    />
+));

src/components/SectionList/index.js

@@ -0,0 +1,3 @@
+import {SectionList} from 'react-native';
+
+export default SectionList;