Merge pull request FaridSafi#107 from gnl/support-centered-message

Support centered messages (p.ex. for server messages)
JonathanWi · Apr 21, 2016 · adaf916 · adaf916
2 parents ca4c011 + eed23b0
commit adaf916
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/Bubble.js b/Bubble.js
@@ -18,6 +18,9 @@ const styles = StyleSheet.create({
   textRight: {
     color: '#fff',
   },
+  textCenter: {
+    textAlign: 'center',
+  },
   bubbleLeft: {
     marginRight: 70,
     backgroundColor: '#e6e6eb',
@@ -28,6 +31,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#007aff',
     alignSelf: 'flex-end',
   },
+  bubbleCenter: {
+    backgroundColor: '#007aff',
+    alignSelf: 'center',
+  },
   bubbleError: {
     backgroundColor: '#e01717',
   },
@@ -47,7 +54,7 @@ export default class Bubble extends React.Component {
     if (this.props.parseText === true) {
       return (
         <ParsedText
-          style={[styles.text, (position === 'left' ? styles.textLeft : styles.textRight)]}
+          style={[styles.text, (position === 'left' ? styles.textLeft : position === 'right' ? styles.textRight : styles.textCenter)]}
           parse={
             [
               {
@@ -80,7 +87,7 @@ export default class Bubble extends React.Component {
     }
 
     return (
-      <Text style={[styles.text, (position === 'left' ? styles.textLeft : styles.textRight)]}>
+      <Text style={[styles.text, (position === 'left' ? styles.textLeft : position === 'right' ? styles.textRight : styles.textCenter)]}>
         {text}
       </Text>
     );
@@ -96,7 +103,7 @@ export default class Bubble extends React.Component {
 
     return (
       <View style={[styles.bubble,
-        (this.props.position === 'left' ? styles.bubbleLeft : styles.bubbleRight),
+        (this.props.position === 'left' ? styles.bubbleLeft : this.props.position === 'right' ? styles.bubbleRight : styles.bubbleCenter),
         (this.props.status === 'ErrorButton' ? styles.bubbleError : null),
         flexStyle]}
       >
@@ -108,7 +115,7 @@ export default class Bubble extends React.Component {
 }
 
 Bubble.propTypes = {
-  position: React.PropTypes.oneOf(['left', 'right']),
+  position: React.PropTypes.oneOf(['left', 'right', 'center']),
   status: React.PropTypes.string,
   text: React.PropTypes.string,
   renderCustomText: React.PropTypes.func,

diff --git a/Message.js b/Message.js
@@ -160,7 +160,7 @@ export default class Message extends Component {
         {position === 'left' && !this.props.displayNamesInsideBubble ? this.renderName(rowData.name, displayNames, diffMessage) : null}
         <View
           style={[styles.rowContainer, {
-            justifyContent: position === 'left' ? 'flex-start' : 'flex-end',
+            justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
           }]}
         >
           {position === 'left' ? this.renderImage(rowData, diffMessage, forceRenderImage, onImagePress) : null}

diff --git a/README.md b/README.md
@@ -80,7 +80,7 @@ var message = {
   text: 'Message content',
   name: "Sender's name",
   image: {uri: 'https://facebook.github.io/react/img/logo_og.png'},
-  position: 'left', // left for received messages, right for sent messages
+  position: 'left', // left for received messages, right for sent messages, center for server messages
   date: new Date(),
   view: null, // A custom Bubble view - the view will receive the message attributes as props
   status: 'Seen', // if status is 'ErrorButton', a re-send button will be displayed