Adds AlignTop Property (FaridSafi#1124)

* Adds AlignTop Property

* Update linting errors

README.md

@@ -222,6 +222,7 @@ e.g. System Message
 * **`scrollToBottom`** _(Bool)_ - Enables the scrollToBottom Component (Default is false)    
 * **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container  
 * **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)  
+* **`alignTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
 
 ## Imperative methods
 

src/GiftedChat.js

@@ -624,6 +624,7 @@ GiftedChat.propTypes = {
   extraData: PropTypes.object,
   minComposerHeight: PropTypes.number,
   maxComposerHeight: PropTypes.number,
+  alignTop: PropTypes.bool,
 };
 
 export {

src/MessageContainer.js

@@ -154,7 +154,7 @@ export default class MessageContainer extends React.PureComponent {
       return <View style={styles.container} />;
     }
     return (
-      <View style={styles.container}>
+      <View style={this.props.alignTop ? styles.containerAlignTop : styles.container}>
         {this.state.showScrollBottom && this.props.scrollToBottom ? this.renderScrollToBottomWrapper() : null}
         <FlatList
           ref={(ref) => (this.flatListRef = ref)}
@@ -184,6 +184,10 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  containerAlignTop: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
   contentContainerStyle: {
     justifyContent: 'flex-end',
   },
@@ -227,6 +231,7 @@ MessageContainer.defaultProps = {
   extraData: null,
   scrollToBottom: false,
   scrollToBottomOffset: 200,
+  alignTop: false,
 };
 
 MessageContainer.propTypes = {
@@ -244,4 +249,5 @@ MessageContainer.propTypes = {
   scrollToBottom: PropTypes.bool,
   scrollToBottomOffset: PropTypes.number,
   scrollToBottomComponent: PropTypes.func,
+  alignTop: PropTypes.bool,
 };