Add new message read status

app/components/Room/Message.js

@@ -4,6 +4,7 @@ import React, {
   TouchableNativeFeedback,
   TouchableOpacity,
   Linking,
+  Image,
   View,
   Text
 } from 'react-native'
@@ -92,14 +93,8 @@ class Message extends Component {
       text, status, onUsernamePress, onUserAvatarPress} = this.props
     const opacity = sending === true ? 0.4 : 1
 
-    let backgroundColor
-    if (failed === true) {
-      backgroundColor = 'rgba(255, 0, 0, 0.2)'
-    } else if (readBy === 0) {
-      backgroundColor = 'rgba(200, 200, 200, 0.2)'
-    } else {
-      backgroundColor = 'transparent'
-    }
+    const backgroundColor = failed === true ? 'rgba(255, 0, 0, 0.2)' : 'transparent'
+    const readStatusOpacity = readBy === 0 ? 0 : 0.6
 
     if (!!status) {
       return (
@@ -108,7 +103,8 @@ class Message extends Component {
           onLongPress={this.onLongPress.bind(this)}
           onPress={this.onMessagePress.bind(this)}
           handleUrlPress={this.handleUrlPress.bind(this)}
-          backgroundColor={backgroundColor} />
+          backgroundColor={backgroundColor}
+          opacity={readStatusOpacity} />
       )
     }
 
@@ -126,6 +122,11 @@ class Message extends Component {
                 {this.renderMessageText()}
               </View>
             </View>
+            <View style={s.readStatus}>
+              <Image
+                style={[s.readStatusIcon, {opacity: readStatusOpacity}]}
+                source={require('image!ic_done_black_24dp')} />
+            </View>
           </View>
         </TouchableNativeFeedback>
       )
@@ -145,12 +146,19 @@ class Message extends Component {
               <Text
                 style={s.username}
                 onPress={() => onUsernamePress(fromUser.username)}>{fromUser.username}</Text>
-              <Text style={s.date}>{this.renderDate()}</Text>
+              <Text style={s.date}>
+                {this.renderDate()}
+              </Text>
             </View>
             <View style={s.bottom}>
               {this.renderMessageText()}
             </View>
           </View>
+          <View style={s.readStatus}>
+            <Image
+              style={[s.readStatusIcon, {opacity: readStatusOpacity}]}
+              source={require('image!ic_done_black_24dp')} />
+          </View>
         </View>
       </TouchableNativeFeedback>
     )

app/components/Room/StatusMessage.js

@@ -1,6 +1,7 @@
 import React, {
   PropTypes,
   TouchableNativeFeedback,
+  Image,
   View
 } from 'react-native'
 import s from '../../styles/screens/Room/StatusMessageStyles'
@@ -18,7 +19,7 @@ const renderEmoji = (matchingString, matches) => {
   )
 }
 
-const StatusMessage = ({onPress, onLongPress, text, handleUrlPress, backgroundColor}) => {
+const StatusMessage = ({onPress, onLongPress, text, handleUrlPress, backgroundColor, opacity}) => {
   const patterns = [
     {type: 'url', style: s.url, onPress: handleUrlPress},
     {pattern: EMOJI_REGEX, style: s.emoji, renderText: renderEmoji},
@@ -43,6 +44,11 @@ const StatusMessage = ({onPress, onLongPress, text, handleUrlPress, backgroundCo
             </Parser>
           </View>
         </View>
+        <View style={s.readStatus}>
+          <Image
+            style={[s.readStatusIcon, {opacity}]}
+            source={require('image!ic_done_black_24dp')} />
+        </View>
       </View>
     </TouchableNativeFeedback>
   )
@@ -53,7 +59,8 @@ StatusMessage.propTypes = {
   onLongPress: PropTypes.func,
   text: PropTypes.string,
   handleUrlPress: PropTypes.func,
-  backgroundColor: PropTypes.string
+  backgroundColor: PropTypes.string,
+  opacity: PropTypes.number
 }
 
 export default StatusMessage

app/screens/RoomScreen.js

@@ -385,7 +385,8 @@ class Room extends Component {
         {this.renderToolbar()}
         {isLoadingMore ? this.renderLoadingMore() : null}
         {isLoadingMessages ? this.renderLoading() : this.renderListView()}
-        {getMessagesError || isLoadingMessages || _.has(listView, 'data') && listView.data.length === 0 ? null : this.renderBottom()}
+        {getMessagesError || isLoadingMessages || _.has(listView, 'data') &&
+          listView.data.length === 0 ? null : this.renderBottom()}
       </View>
     )
   }

app/styles/screens/Room/MessageStyles.js

@@ -39,6 +39,14 @@ const style = StyleSheet.create({
   },
   url: {
     color: 'blue'
+  },
+  readStatus: {
+    width: 15,
+    marginTop: 3
+  },
+  readStatusIcon: {
+    width: 15,
+    height: 15
   }
 })
 

app/styles/screens/Room/StatusMessageStyles.js

@@ -24,6 +24,14 @@ const style = StyleSheet.create({
   },
   url: {
     color: colors.link
+  },
+  readStatus: {
+    width: 15,
+    marginTop: 3
+  },
+  readStatusIcon: {
+    width: 15,
+    height: 15
   }
 })