Add 'showUserAvatar' prop; don't render null avatars (#511)

* fix(Avatar): display user chat message avatar

- check if current message user has an avatar to display
- don't base the logic of the display of the avatar on the user object id

Issue: #495
Issue URL: #495

* Only return null if avatar is set to null (otherwise render initials)

* Add 'showUserAvatar' prop, default to false

README.md

@@ -120,6 +120,7 @@ e.g.
 - **`renderLoading`** _(Function)_ - Render a loading view when initializing
 - **`renderLoadEarlier`** _(Function)_ - Custom "Load earlier messages" button
 - **`renderAvatar`** _(Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
+- **`showUserAvatar`** _(Function)_ - Whether to render an avatar for the current user; default is `false`, only show avatars for other users
 - **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped
 - **`renderAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom (default)
 - **`renderBubble`** _(Function)_ - Custom message bubble

src/Message.js

@@ -43,11 +43,15 @@ export default class Message extends React.Component {
   }
 
   renderAvatar() {
-    if (this.props.user._id !== this.props.currentMessage.user._id) {
-      const avatarProps = this.getInnerComponentProps();
-      return <Avatar {...avatarProps}/>;
+    if (this.props.user._id === this.props.currentMessage.user._id && !this.props.showUserAvatar) {
+      return null;
     }
-    return null;
+    const avatarProps = this.getInnerComponentProps();
+    const { currentMessage } = avatarProps;
+    if (currentMessage.user.avatar === null) {
+      return null;
+    }
+    return <Avatar {...avatarProps} />;
   }
 
   render() {
@@ -89,6 +93,7 @@ const styles = {
 
 Message.defaultProps = {
   renderAvatar: undefined,
+  showUserAvatar: false,
   renderBubble: null,
   renderDay: null,
   position: 'left',
@@ -101,6 +106,7 @@ Message.defaultProps = {
 
 Message.propTypes = {
   renderAvatar: PropTypes.func,
+  showUserAvatar: PropTypes.bool,
   renderBubble: PropTypes.func,
   renderDay: PropTypes.func,
   position: PropTypes.oneOf(['left', 'right']),