composeBox, ios: Scroll message input text on text input if required.

Remove scroll view from input wrapper (which was added in zulip#3595).
This fixed zulip#3614. Also just checked it works fine on Android as well. So
basically zulip#3595 was not a completely right solution for zulip#3369.

Now inputs are wrapped with simple view, which is self aligned as
vertically center. ComposeMenu and SendButton are self aligned as
vertically end. And wrapper of all this three has justifyContent
as space-between, which makes them spread whole over horizontal space
available.

This removes alignItems: 'flex-end' from `composeBox`, which was pushing
input to vertically bottom, idealy it should be at vertically center.

Fixes: zulip#3614

src/compose/ComposeBox.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
-import { Platform, View, TextInput, findNodeHandle, ScrollView } from 'react-native';
+import { Platform, View, TextInput, findNodeHandle } from 'react-native';
 import type { LayoutEvent } from 'react-native/Libraries/Types/CoreEventTypes';
 import TextInputReset from 'react-native-text-input-reset';
 
@@ -32,6 +32,7 @@ import ComposeMenu from './ComposeMenu';
 import getComposeInputPlaceholder from './getComposeInputPlaceholder';
 import NotSubscribed from '../message/NotSubscribed';
 import AnnouncementOnly from '../message/AnnouncementOnly';
+import styles from '../styles';
 
 import {
   getAuth,
@@ -289,13 +290,18 @@ class ComposeBox extends PureComponent<Props, State> {
     },
     composeBox: {
       flexDirection: 'row',
-      alignItems: 'flex-end',
+      justifyContent: 'space-between',
+    },
+    composeMenu: {
+      alignSelf: 'flex-end',
     },
     composeText: {
+      alignSelf: 'center',
       paddingVertical: 8,
     },
     composeSendButton: {
       padding: 8,
+      alignSelf: 'flex-end',
     },
     topicInput: {
       borderWidth: 0,
@@ -356,11 +362,12 @@ class ComposeBox extends PureComponent<Props, State> {
         </View>
         <View style={[this.styles.composeBox, style]} onLayout={this.handleLayoutChange}>
           <ComposeMenu
+            style={this.styles.composeMenu}
             destinationNarrow={this.getDestinationNarrow()}
             expanded={isMenuExpanded}
             onExpandContract={this.handleComposeMenuToggle}
           />
-          <ScrollView contentContainerStyle={this.styles.composeText}>
+          <View style={[styles.flexed, this.styles.composeText]}>
             {this.getCanSelectTopic() && (
               <Input
                 style={this.styles.topicInput}
@@ -392,7 +399,7 @@ class ComposeBox extends PureComponent<Props, State> {
               onSelectionChange={this.handleMessageSelectionChange}
               onTouchStart={this.handleInputTouchStart}
             />
-          </ScrollView>
+          </View>
           <FloatingActionButton
             style={this.styles.composeSendButton}
             Icon={editMessage === null ? IconSend : IconDone}

src/compose/ComposeMenu.js

@@ -4,6 +4,7 @@ import { Platform, StyleSheet, View } from 'react-native';
 import type { DocumentPickerResponse } from 'react-native-document-picker';
 // $FlowFixMe
 import ImagePicker from 'react-native-image-picker';
+import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 import type { Dispatch, Narrow } from '../types';
 import { connect } from '../react-redux';
@@ -17,6 +18,7 @@ type Props = $ReadOnly<{|
   dispatch: Dispatch,
   expanded: boolean,
   destinationNarrow: Narrow,
+  style?: ViewStyleProp,
   onExpandContract: () => void,
 |}>;
 
@@ -141,10 +143,10 @@ class ComposeMenu extends PureComponent<Props> {
   });
 
   render() {
-    const { dispatch, expanded, onExpandContract } = this.props;
+    const { dispatch, expanded, onExpandContract, style } = this.props;
     const numIcons = Platform.OS === 'android' ? 4 : 3;
     return (
-      <View style={this.styles.composeMenu}>
+      <View style={[style, this.styles.composeMenu]}>
         <AnimatedComponent
           stylePropertyName="width"
           fullValue={40 * numIcons}