From adb0d8a52fc7210e8e48e4439f83d932a064e1f6 Mon Sep 17 00:00:00 2001
From: Azim Gadzhiagayev <me@azimgd.com>
Date: Thu, 16 Dec 2021 19:18:53 +0500
Subject: [PATCH] Fix inverted flatlist at ReportActionsView with few items
 should stick to bottom of page;

---
 src/components/InvertedFlatList/index.js   | 11 ++++++++++-
 src/pages/home/report/ReportActionsView.js |  5 ++++-
 src/styles/styles.js                       |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js
index a2dd20b2c999..b92b27bd3449 100644
--- a/src/components/InvertedFlatList/index.js
+++ b/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
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 03a9db509264..f4c23496183d 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/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()}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 90073cb109d4..5777f3bc30cf 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1161,7 +1161,7 @@ const styles = {
 
     chatContentScrollView: {
         flexGrow: 1,
-        justifyContent: 'flex-end',
+        justifyContent: 'flex-start',
         paddingVertical: 16,
     },