Fix issue with sending messages. Scroll to bottom on send

src/chat/Chat.js

@@ -21,21 +21,27 @@ export default class Chat extends PureComponent {
   };
 
   scrollOffset: number = 0;
+  listComponent: Object;
 
   props: {
     narrow: Narrow,
     isFetching: boolean,
     isOnline: boolean,
     isSubscribed: boolean,
     noMessages: boolean,
-    // unreadCount: number,
+  };
+
+  handleSend = () => {
+    this.listComponent.scrollToEnd();
   };
 
   render() {
     const { styles } = this.context;
     const { isFetching, narrow, isOnline, isSubscribed, noMessages } = this.props;
     const WrapperView = Platform.OS === 'ios' ? KeyboardAvoidingView : View;
-    const CheckSub = isSubscribed ? <ComposeBoxContainer /> : <NotSubscribed />;
+    const CheckSub = isSubscribed
+      ? <ComposeBoxContainer onSend={this.handleSend} />
+      : <NotSubscribed />;
 
     return (
       <WrapperView style={styles.screen} behavior="padding">
@@ -44,7 +50,11 @@ export default class Chat extends PureComponent {
         {noMessages && isFetching && <MessageListLoading />}
         {!noMessages &&
           <ActionSheetProvider>
-            <MessageListContainer />
+            <MessageListContainer
+              listRef={component => {
+                this.listComponent = component || this.listComponent;
+              }}
+            />
           </ActionSheetProvider>}
         {/* <UnreadNotice
           unreadCount={unreadCount}

src/compose/ComposeBox.js

@@ -42,6 +42,7 @@ type Props = {
   composeTools: boolean,
   editMessage: EditMessage,
   actions: Actions,
+  onSend: () => void,
 };
 
 export default class ComposeBox extends PureComponent {
@@ -95,18 +96,19 @@ export default class ComposeBox extends PureComponent {
   };
 
   handleSend = () => {
-    const { actions, narrow } = this.props;
+    const { actions, narrow, onSend } = this.props;
     const { topic, message } = this.state;
 
     const topicToSend = replaceEmoticonsWithEmoji(topic);
     const messageToSend = replaceEmoticonsWithEmoji(message);
+    const destinationNarrow = isStreamNarrow(narrow)
+      ? topicNarrow(narrow[0].operand, topicToSend || '(no topic)')
+      : narrow;
 
-    actions.addToOutbox(
-      isStreamNarrow(narrow) ? topicNarrow(narrow[0].operand, topicToSend) : narrow,
-      messageToSend,
-    );
+    actions.addToOutbox(destinationNarrow, messageToSend);
 
     this.clearMessageInput();
+    onSend();
   };
 
   handleEdit = () => {

src/group/GroupCard.js

@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
 });
 
 export default class GroupCard extends PureComponent {
-  listRef: Object;
+  listRef: (component: Object) => void;
 
   props: {
     actions: Actions,

src/message/HtmlChildrenContainer.js

@@ -13,6 +13,7 @@ class HtmlChildrenContainer extends PureComponent {
     auth: Auth,
     actions: Actions,
     handleLinkPress: string => void,
+    onLongPress: () => void,
   };
 
   render() {

src/message/InfiniteScrollView.js

@@ -6,27 +6,29 @@ import { Platform } from 'react-native';
 
 import type { StyleObj } from '../types';
 import config from '../config';
+import { nullFunction } from '../nullObjects';
 import AnchorScrollView from '../native/AnchorScrollView';
 
 export default class InfiniteScrollView extends PureComponent {
   props: {
-    onStartReached?: ?() => void,
-    onEndReached?: ?() => void,
-    onStartReachedThreshold: number,
-    onEndReachedThreshold: number,
-    onScroll: (e: Event) => void,
+    startReachedThreshold: number,
+    endReachedThreshold: number,
+    listRef: (component: Object) => void,
     contentContainerStyle?: Object,
     style: StyleObj,
     stickyHeaderIndices: [],
     autoScrollToBottom: boolean,
     children?: Children,
+    onStartReached?: () => void,
+    onEndReached?: () => void,
+    onScroll: (e: Event) => void
   };
 
   static defaultProps = {
-    onStartReached: null,
-    onEndReached: null,
-    onStartReachedThreshold: config.startMessageListThreshold,
-    onEndReachedThreshold: config.endMessageListThreshold,
+    onStartReached: nullFunction,
+    onEndReached: nullFunction,
+    startReachedThreshold: config.startMessageListThreshold,
+    endReachedThreshold: config.endMessageListThreshold
   };
 
   _scrollOffset: number;
@@ -52,7 +54,7 @@ export default class InfiniteScrollView extends PureComponent {
     if (
       this.props.onStartReached &&
       this._contentHeight &&
-      distFromStart <= this.props.onStartReachedThreshold &&
+      distFromStart <= this.props.startReachedThreshold &&
       this._sentStartForContentHeight !== this._contentHeight
     ) {
       this._sentStartForContentHeight = this._contentHeight;
@@ -64,7 +66,7 @@ export default class InfiniteScrollView extends PureComponent {
     if (
       this.props.onEndReached &&
       this._contentHeight &&
-      distFromEnd <= this.props.onEndReachedThreshold &&
+      distFromEnd <= this.props.endReachedThreshold &&
       this._sentEndForContentHeight !== this._contentHeight
     ) {
       this._sentEndForContentHeight = this._contentHeight;
@@ -77,12 +79,12 @@ export default class InfiniteScrollView extends PureComponent {
     const distFromEnd = this._contentHeight - this._scrollViewHeight - this._scrollOffset;
 
     this._maybeCallOnStartReached(distFromStart);
-    if (this.props.onStartReached && distFromStart > this.props.onStartReachedThreshold) {
+    if (this.props.onStartReached && distFromStart > this.props.startReachedThreshold) {
       this._sentStartForContentHeight = null;
     }
 
     this._maybeCallOnEndReached(distFromEnd);
-    if (this.props.onEndReached && distFromEnd > this.props.onEndReachedThreshold) {
+    if (this.props.onEndReached && distFromEnd > this.props.endReachedThreshold) {
       this._sentEndForContentHeight = null;
     }
   }
@@ -106,7 +108,12 @@ export default class InfiniteScrollView extends PureComponent {
         scrollEventThrottle={config.scrollCallbackThrottle}
         stickyHeaderIndices={Platform.OS === 'ios' ? this.props.stickyHeaderIndices : undefined}
         autoScrollToBottom={this.props.autoScrollToBottom}
-        removeClippedSubviews>
+        removeClippedSubviews
+        ref={component => {
+          const { listRef } = this.props;
+          if (listRef) listRef(component);
+        }}
+      >
         {this.props.children}
       </AnchorScrollView>
     );

src/message/MessageList.js

@@ -15,9 +15,10 @@ type Props = {
   fetchingOlder: boolean,
   fetchingNewer: boolean,
   singleFetchProgress: boolean,
-  onScroll: () => void,
   typingUsers?: TypingState,
+  listRef?: Object,
   renderedMessages: any[],
+  onScroll: () => void,
 };
 
 export default class MessageList extends PureComponent {
@@ -45,6 +46,7 @@ export default class MessageList extends PureComponent {
       fetchingOlder,
       fetchingNewer,
       singleFetchProgress,
+      listRef,
       onScroll,
       typingUsers,
       renderedMessages,
@@ -78,6 +80,7 @@ export default class MessageList extends PureComponent {
         onStartReached={actions.fetchOlder}
         onEndReached={actions.fetchNewer}
         autoScrollToBottom={this.autoScrollToBottom}
+        listRef={listRef}
         onScroll={onScroll}>
         <LoadingIndicator active={fetchingOlder} caughtUp={caughtUpOlder} />
         {renderedMessages}

src/message/MessageListContainer.js

@@ -35,26 +35,30 @@ class MessageListContainer extends PureComponent {
 
   render() {
     const {
+      actions,
       caughtUpOlder,
       caughtUpNewer,
       fetchingOlder,
       fetchingNewer,
       typingUsers,
       renderedMessages,
       narrow,
-      actions,
+      listRef,
+      onSend,
     } = this.props;
     return (
       <MessageList
-        onScroll={this.handleMessageListScroll}
+        actions={actions}
         caughtUpNewer={caughtUpNewer}
         caughtUpOlder={caughtUpOlder}
         fetchingOlder={fetchingOlder}
         fetchingNewer={fetchingNewer}
         typingUsers={typingUsers}
         renderedMessages={renderedMessages}
         narrow={narrow}
-        actions={actions}
+        listRef={listRef}
+        onScroll={this.handleMessageListScroll}
+        onSend={onSend}
       />
     );
   }

src/outbox/outboxActions.js

@@ -46,6 +46,7 @@ export const addToOutbox = (narrow: Narrow, content: string) => async (
   const auth = getAuth(state);
 
   const html = parseMarkdown(content, users, streams, auth, realm.realm_filter, realm.realm_emoji);
+
   dispatch(
     sendMessage({
       narrow,

src/styles/theme.js

@@ -133,9 +133,11 @@ export default ({ color, backgroundColor, borderColor, cardColor }: Props) => ({
     fontSize: 16,
   },
   composeBox: {
+    marginTop: 2,
     flexDirection: 'row',
     backgroundColor: 'rgba(127, 127, 127, 0.1)',
-    // borderTopColor: borderColor,
+    borderTopColor: borderColor,
+    borderTopWidth: 1,
     // zIndex: 2,
   },
   subheader: {