Fix iOS/Android bugs

package.json

@@ -26,6 +26,7 @@
     "react-beforeunload": "^2.2.2",
     "react-dom": "^16.13.1",
     "react-native": "0.63.2",
+    "react-native-keyboard-spacer": "^0.4.1",
     "react-native-web": "^0.13.5",
     "react-router-dom": "^5.2.0",
     "react-router-native": "^5.2.0",

src/components/KeyboardSpacer/index.ios.js

@@ -0,0 +1,8 @@
+import ReactNativeKeyboardSpacer from 'react-native-keyboard-spacer';
+import React from 'react';
+
+const KeyboardSpacer = () => (
+    <ReactNativeKeyboardSpacer topSpacing={-36} />
+);
+
+export default KeyboardSpacer;

src/components/KeyboardSpacer/index.js

@@ -0,0 +1,3 @@
+const KeyboardSpacer = () => null;
+
+export default KeyboardSpacer;

src/page/HomePage/Report/ReportHistoryCompose.js

@@ -81,7 +81,7 @@ class ReportHistoryCompose extends React.Component {
                 <TextInput
                     ref={el => this.textInput = el}
                     multiline
-                    textAlignVertical
+                    textAlignVertical="top"
                     numberOfLines={3}
                     minHeight={60}
                     maxHeight={60}

src/page/HomePage/Report/ReportView.js

@@ -5,6 +5,7 @@ import styles from '../../../style/StyleSheet';
 import ReportHistoryView from './ReportHistoryView';
 import ReportHistoryCompose from './ReportHistoryCompose';
 import {addHistoryItem} from '../../../store/actions/ReportActions';
+import KeyboardSpacer from '../../../components/KeyboardSpacer';
 
 const ReportView = () => (
     <View style={styles.flex1}>
@@ -25,9 +26,9 @@ const ReportView = () => (
                 />
             )}
         />
+        <KeyboardSpacer />
     </View>
 );
-
 ReportView.displayName = 'ReportView';
 
 export default withRouter(ReportView);