Merge pull request #6798 from azimgd/flatlist-stick-to-bottom

Fix inverted flatlist at ReportActionsView with few items should stick to bottom of page

Author: Julesssss

src/components/InvertedFlatList/index.js

@@ -2,15 +2,20 @@ import React, {
     forwardRef,
 } from 'react';
 import PropTypes from 'prop-types';
-import {FlatList} from 'react-native';
+import {FlatList, StyleSheet} from 'react-native';
 import _ from 'underscore';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
+import styles from '../../styles/styles';
 
 const propTypes = {
     /** Passed via forwardRef so we can access the FlatList ref */
     innerRef: PropTypes.shape({
         current: PropTypes.instanceOf(FlatList),
     }).isRequired,
+
+    /** Any additional styles to apply */
+    // eslint-disable-next-line react/forbid-prop-types
+    contentContainerStyle: PropTypes.any,
 };
 
 // This is adapted from https://codesandbox.io/s/react-native-dsyse
@@ -61,12 +66,16 @@ class InvertedFlatList extends React.Component {
                 {...this.props}
                 ref={el => this.list = el}
                 shouldMeasureItems
+                contentContainerStyle={StyleSheet.compose(this.props.contentContainerStyle, styles.justifyContentEnd)}
             />
         );
     }
 }
 
 InvertedFlatList.propTypes = propTypes;
+InvertedFlatList.defaultProps = {
+    contentContainerStyle: {},
+};
 
 export default forwardRef((props, ref) => (
     // eslint-disable-next-line react/jsx-props-no-spreading

src/pages/home/report/ReportActionsView.js

@@ -562,7 +562,10 @@ class ReportActionsView extends React.Component {
                     data={this.sortedReportActions}
                     renderItem={this.renderItem}
                     CellRendererComponent={this.renderCell}
-                    contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime && styles.pt0]}
+                    contentContainerStyle={[
+                        styles.chatContentScrollView,
+                        shouldShowReportRecipientLocalTime && styles.pt0,
+                    ]}
                     keyExtractor={this.keyExtractor}
                     initialRowHeight={32}
                     initialNumToRender={this.calculateInitialNumToRender()}

src/styles/styles.js

@@ -1161,7 +1161,7 @@ const styles = {
 
     chatContentScrollView: {
         flexGrow: 1,
-        justifyContent: 'flex-end',
+        justifyContent: 'flex-start',
         paddingVertical: 16,
     },