diff --git a/__tests__/__snapshots__/RoomItem.js.snap b/__tests__/__snapshots__/RoomItem.js.snap
index 17d24401..08dd1e5f 100644
--- a/__tests__/__snapshots__/RoomItem.js.snap
+++ b/__tests__/__snapshots__/RoomItem.js.snap
@@ -7,7 +7,7 @@ exports[`render channel 1`] = `
     accessibilityLabel="general, last message Nov 10"
     accessibilityTraits="selected"
     accessible={true}
-    collapsable={undefined}
+    hasTVPreferredFocus={undefined}
     hitSlop={undefined}
     isTVSelectable={true}
     nativeID={undefined}
@@ -19,13 +19,12 @@ exports[`render channel 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 10,
-      }
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        undefined,
+      ]
     }
     testID={undefined}
     tvParallaxProperties={undefined}
@@ -35,90 +34,104 @@ exports[`render channel 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          Object {
-            "backgroundColor": "#00BCD4",
-            "borderRadius": 4,
-            "height": 40,
-            "width": 40,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+            "paddingVertical": 10,
           },
           undefined,
         ]
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={false}
-        ellipsizeMode="tail"
+      <View
         style={
           Array [
             Object {
-              "color": undefined,
-              "fontSize": 12,
+              "alignItems": "center",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
-            Array [
-              Object {
-                "color": "#ffffff",
-              },
-              Object {
-                "fontSize": 20,
-              },
-            ],
             Object {
-              "fontFamily": "Material Design Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "marginLeft": 16,
-          "marginRight": 4,
-        }
-      }
-    >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
+              "backgroundColor": "#00BCD4",
+              "borderRadius": 4,
+              "height": 40,
+              "width": 40,
             },
             undefined,
           ]
         }
       >
-        general
-      </Text>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
+        <Text
+          accessible={true}
+          allowFontScaling={false}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": undefined,
+                "fontSize": 12,
+              },
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ],
+              Object {
+                "fontFamily": "Material Design Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
         style={
           Object {
-            "color": "#888",
             "flex": 1,
-            "fontSize": 10,
+            "marginLeft": 16,
+            "marginRight": 4,
           }
         }
       >
-        Nov 10
-      </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          general
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#888",
+              "flex": 1,
+              "fontSize": 10,
+            }
+          }
+        >
+          Nov 10
+        </Text>
+      </View>
     </View>
   </View>
 </View>
@@ -131,7 +144,7 @@ exports[`render no icon 1`] = `
     accessibilityLabel="name, last message Nov 10"
     accessibilityTraits="selected"
     accessible={true}
-    collapsable={undefined}
+    hasTVPreferredFocus={undefined}
     hitSlop={undefined}
     isTVSelectable={true}
     nativeID={undefined}
@@ -143,13 +156,12 @@ exports[`render no icon 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 10,
-      }
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        undefined,
+      ]
     }
     testID={undefined}
     tvParallaxProperties={undefined}
@@ -159,90 +171,104 @@ exports[`render no icon 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          Object {
-            "backgroundColor": "#3F51B5",
-            "borderRadius": 4,
-            "height": 40,
-            "width": 40,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+            "paddingVertical": 10,
           },
           undefined,
         ]
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={false}
-        ellipsizeMode="tail"
+      <View
         style={
           Array [
             Object {
-              "color": undefined,
-              "fontSize": 12,
+              "alignItems": "center",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
-            Array [
-              Object {
-                "color": "#ffffff",
-              },
-              Object {
-                "fontSize": 20,
-              },
-            ],
             Object {
-              "fontFamily": "Material Design Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "marginLeft": 16,
-          "marginRight": 4,
-        }
-      }
-    >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
+              "backgroundColor": "#3F51B5",
+              "borderRadius": 4,
+              "height": 40,
+              "width": 40,
             },
             undefined,
           ]
         }
       >
-        name
-      </Text>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
+        <Text
+          accessible={true}
+          allowFontScaling={false}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": undefined,
+                "fontSize": 12,
+              },
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ],
+              Object {
+                "fontFamily": "Material Design Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
         style={
           Object {
-            "color": "#888",
             "flex": 1,
-            "fontSize": 10,
+            "marginLeft": 16,
+            "marginRight": 4,
           }
         }
       >
-        Nov 10
-      </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          name
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#888",
+              "flex": 1,
+              "fontSize": 10,
+            }
+          }
+        >
+          Nov 10
+        </Text>
+      </View>
     </View>
   </View>
 </View>
@@ -255,7 +281,7 @@ exports[`render private group 1`] = `
     accessibilityLabel="private-group, last message Nov 10"
     accessibilityTraits="selected"
     accessible={true}
-    collapsable={undefined}
+    hasTVPreferredFocus={undefined}
     hitSlop={undefined}
     isTVSelectable={true}
     nativeID={undefined}
@@ -267,13 +293,12 @@ exports[`render private group 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 10,
-      }
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        undefined,
+      ]
     }
     testID={undefined}
     tvParallaxProperties={undefined}
@@ -283,90 +308,104 @@ exports[`render private group 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          Object {
-            "backgroundColor": "#FF9800",
-            "borderRadius": 4,
-            "height": 40,
-            "width": 40,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+            "paddingVertical": 10,
           },
           undefined,
         ]
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={false}
-        ellipsizeMode="tail"
+      <View
         style={
           Array [
             Object {
-              "color": undefined,
-              "fontSize": 12,
+              "alignItems": "center",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
-            Array [
-              Object {
-                "color": "#ffffff",
-              },
-              Object {
-                "fontSize": 20,
-              },
-            ],
             Object {
-              "fontFamily": "Material Design Icons",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "marginLeft": 16,
-          "marginRight": 4,
-        }
-      }
-    >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
+              "backgroundColor": "#FF9800",
+              "borderRadius": 4,
+              "height": 40,
+              "width": 40,
             },
             undefined,
           ]
         }
       >
-        private-group
-      </Text>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
+        <Text
+          accessible={true}
+          allowFontScaling={false}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": undefined,
+                "fontSize": 12,
+              },
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ],
+              Object {
+                "fontFamily": "Material Design Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
         style={
           Object {
-            "color": "#888",
             "flex": 1,
-            "fontSize": 10,
+            "marginLeft": 16,
+            "marginRight": 4,
           }
         }
       >
-        Nov 10
-      </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          private-group
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#888",
+              "flex": 1,
+              "fontSize": 10,
+            }
+          }
+        >
+          Nov 10
+        </Text>
+      </View>
     </View>
   </View>
    
@@ -380,7 +419,7 @@ exports[`render unread +999 1`] = `
     accessibilityLabel="name, 1000 alerts, last message Nov 10"
     accessibilityTraits="selected"
     accessible={true}
-    collapsable={undefined}
+    hasTVPreferredFocus={undefined}
     hitSlop={undefined}
     isTVSelectable={true}
     nativeID={undefined}
@@ -392,13 +431,12 @@ exports[`render unread +999 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 10,
-      }
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        undefined,
+      ]
     }
     testID={undefined}
     tvParallaxProperties={undefined}
@@ -408,100 +446,114 @@ exports[`render unread +999 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          Object {
-            "backgroundColor": "#3F51B5",
-            "borderRadius": 4,
-            "height": 40,
-            "width": 40,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+            "paddingVertical": 10,
           },
           undefined,
         ]
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={false}
-        ellipsizeMode="tail"
+      <View
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "alignItems": "center",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
             Object {
-              "fontSize": 20,
-            },
-          ]
-        }
-      >
-        NA
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "marginLeft": 16,
-          "marginRight": 4,
-        }
-      }
-    >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
+              "backgroundColor": "#3F51B5",
+              "borderRadius": 4,
+              "height": 40,
+              "width": 40,
             },
             undefined,
           ]
         }
       >
-        name
-      </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={false}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#ffffff",
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
+          }
+        >
+          NA
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "marginLeft": 16,
+            "marginRight": 4,
+          }
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          name
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#888",
+              "flex": 1,
+              "fontSize": 10,
+            }
+          }
+        >
+          Nov 10
+        </Text>
+      </View>
       <Text
         accessible={true}
         allowFontScaling={true}
         ellipsizeMode="tail"
-        numberOfLines={1}
         style={
           Object {
-            "color": "#888",
-            "flex": 1,
-            "fontSize": 10,
+            "backgroundColor": "#1d74f5",
+            "borderRadius": 3,
+            "color": "#fff",
+            "fontSize": 14,
+            "minWidth": 20,
+            "overflow": "hidden",
+            "paddingHorizontal": 5,
+            "paddingVertical": 2,
+            "textAlign": "center",
           }
         }
       >
-        Nov 10
+        999+
       </Text>
     </View>
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-      style={
-        Object {
-          "backgroundColor": "#1d74f5",
-          "borderRadius": 3,
-          "color": "#fff",
-          "fontSize": 14,
-          "minWidth": 20,
-          "overflow": "hidden",
-          "paddingHorizontal": 5,
-          "paddingVertical": 2,
-          "textAlign": "center",
-        }
-      }
-    >
-      999+
-    </Text>
   </View>
 </View>
 `;
@@ -513,7 +565,7 @@ exports[`render unread 1`] = `
     accessibilityLabel="name, 1 alert, last message Nov 10"
     accessibilityTraits="selected"
     accessible={true}
-    collapsable={undefined}
+    hasTVPreferredFocus={undefined}
     hitSlop={undefined}
     isTVSelectable={true}
     nativeID={undefined}
@@ -525,13 +577,12 @@ exports[`render unread 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 10,
-      }
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        undefined,
+      ]
     }
     testID={undefined}
     tvParallaxProperties={undefined}
@@ -541,100 +592,114 @@ exports[`render unread 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          Object {
-            "backgroundColor": "#3F51B5",
-            "borderRadius": 4,
-            "height": 40,
-            "width": 40,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+            "paddingVertical": 10,
           },
           undefined,
         ]
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={false}
-        ellipsizeMode="tail"
+      <View
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "alignItems": "center",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
             Object {
-              "fontSize": 20,
-            },
-          ]
-        }
-      >
-        NA
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "marginLeft": 16,
-          "marginRight": 4,
-        }
-      }
-    >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
+              "backgroundColor": "#3F51B5",
+              "borderRadius": 4,
+              "height": 40,
+              "width": 40,
             },
             undefined,
           ]
         }
       >
-        name
-      </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={false}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#ffffff",
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
+          }
+        >
+          NA
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "marginLeft": 16,
+            "marginRight": 4,
+          }
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          name
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#888",
+              "flex": 1,
+              "fontSize": 10,
+            }
+          }
+        >
+          Nov 10
+        </Text>
+      </View>
       <Text
         accessible={true}
         allowFontScaling={true}
         ellipsizeMode="tail"
-        numberOfLines={1}
         style={
           Object {
-            "color": "#888",
-            "flex": 1,
-            "fontSize": 10,
+            "backgroundColor": "#1d74f5",
+            "borderRadius": 3,
+            "color": "#fff",
+            "fontSize": 14,
+            "minWidth": 20,
+            "overflow": "hidden",
+            "paddingHorizontal": 5,
+            "paddingVertical": 2,
+            "textAlign": "center",
           }
         }
       >
-        Nov 10
+        1
       </Text>
     </View>
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-      style={
-        Object {
-          "backgroundColor": "#1d74f5",
-          "borderRadius": 3,
-          "color": "#fff",
-          "fontSize": 14,
-          "minWidth": 20,
-          "overflow": "hidden",
-          "paddingHorizontal": 5,
-          "paddingVertical": 2,
-          "textAlign": "center",
-        }
-      }
-    >
-      1
-    </Text>
   </View>
 </View>
 `;
@@ -646,7 +711,7 @@ exports[`renders correctly 1`] = `
     accessibilityLabel="name, last message Nov 10"
     accessibilityTraits="selected"
     accessible={true}
-    collapsable={undefined}
+    hasTVPreferredFocus={undefined}
     hitSlop={undefined}
     isTVSelectable={true}
     nativeID={undefined}
@@ -658,13 +723,12 @@ exports[`renders correctly 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "opacity": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 10,
-      }
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        undefined,
+      ]
     }
     testID={undefined}
     tvParallaxProperties={undefined}
@@ -674,79 +738,93 @@ exports[`renders correctly 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          Object {
-            "backgroundColor": "#3F51B5",
-            "borderRadius": 4,
-            "height": 40,
-            "width": 40,
+            "flexDirection": "row",
+            "paddingHorizontal": 16,
+            "paddingVertical": 10,
           },
           undefined,
         ]
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={false}
-        ellipsizeMode="tail"
+      <View
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "alignItems": "center",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
             Object {
-              "fontSize": 20,
-            },
-          ]
-        }
-      >
-        NA
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "marginLeft": 16,
-          "marginRight": 4,
-        }
-      }
-    >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
+              "backgroundColor": "#3F51B5",
+              "borderRadius": 4,
+              "height": 40,
+              "width": 40,
             },
             undefined,
           ]
         }
       >
-        name
-      </Text>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        numberOfLines={1}
+        <Text
+          accessible={true}
+          allowFontScaling={false}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#ffffff",
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
+          }
+        >
+          NA
+        </Text>
+      </View>
+      <View
         style={
           Object {
-            "color": "#888",
             "flex": 1,
-            "fontSize": 10,
+            "marginLeft": 16,
+            "marginRight": 4,
           }
         }
       >
-        Nov 10
-      </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          name
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#888",
+              "flex": 1,
+              "fontSize": 10,
+            }
+          }
+        >
+          Nov 10
+        </Text>
+      </View>
     </View>
   </View>
 </View>
diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index b51b4c8b..85f6d512 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -159,7 +159,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       accessibilityLabel="rocket.cat, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -171,13 +171,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -187,79 +186,93 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#8BC34A",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
-              },
-            ]
-          }
-        >
-          RC
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
+                "backgroundColor": "#8BC34A",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
               undefined,
             ]
           }
         >
-          rocket.cat
-        </Text>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            RC
+          </Text>
+        </View>
+        <View
           style={
             Object {
-              "color": "#888",
               "flex": 1,
-              "fontSize": 10,
+              "marginLeft": 16,
+              "marginRight": 4,
             }
           }
         >
-          Nov 10
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            rocket.cat
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
       </View>
     </View>
     <View
@@ -267,7 +280,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       accessibilityLabel="rocket.cat, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -279,13 +292,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -295,81 +307,95 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#8BC34A",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
+                "backgroundColor": "#8BC34A",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
+              undefined,
             ]
           }
         >
-          RC
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
-              },
-              Object {
-                "fontWeight": "bold",
-              },
-            ]
-          }
-        >
-          rocket.cat
-        </Text>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            RC
+          </Text>
+        </View>
+        <View
           style={
             Object {
-              "color": "#888",
               "flex": 1,
-              "fontSize": 10,
+              "marginLeft": 16,
+              "marginRight": 4,
             }
           }
         >
-          Nov 10
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                Object {
+                  "fontWeight": "bold",
+                },
+              ]
+            }
+          >
+            rocket.cat
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
       </View>
     </View>
     <View
@@ -377,7 +403,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       accessibilityLabel="rocket.cat, 1 alert, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -389,13 +415,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -405,107 +430,121 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#8BC34A",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
-              },
-            ]
-          }
-        >
-          RC
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
+                "backgroundColor": "#8BC34A",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
               undefined,
             ]
           }
         >
-          rocket.cat
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            RC
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+              "marginLeft": 16,
+              "marginRight": 4,
+            }
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            rocket.cat
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
         <Text
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
-          numberOfLines={1}
           style={
             Object {
-              "color": "#888",
-              "flex": 1,
-              "fontSize": 10,
+              "backgroundColor": "#1d74f5",
+              "borderRadius": 3,
+              "color": "#fff",
+              "fontSize": 14,
+              "minWidth": 20,
+              "overflow": "hidden",
+              "paddingHorizontal": 5,
+              "paddingVertical": 2,
+              "textAlign": "center",
             }
           }
         >
-          Nov 10
+          1
         </Text>
       </View>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        style={
-          Object {
-            "backgroundColor": "#1d74f5",
-            "borderRadius": 3,
-            "color": "#fff",
-            "fontSize": 14,
-            "minWidth": 20,
-            "overflow": "hidden",
-            "paddingHorizontal": 5,
-            "paddingVertical": 2,
-            "textAlign": "center",
-          }
-        }
-      >
-        1
-      </Text>
     </View>
     <View
       accessibilityComponentType={undefined}
       accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 9 alerts, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -517,13 +556,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -533,109 +571,123 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#795548",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
+                "backgroundColor": "#795548",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
+              undefined,
             ]
           }
         >
-          LC
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
-              },
-              Object {
-                "fontWeight": "bold",
-              },
-            ]
-          }
-        >
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
-        </Text>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            LC
+          </Text>
+        </View>
+        <View
           style={
             Object {
-              "color": "#888",
               "flex": 1,
-              "fontSize": 10,
+              "marginLeft": 16,
+              "marginRight": 4,
             }
           }
         >
-          Nov 10
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                Object {
+                  "fontWeight": "bold",
+                },
+              ]
+            }
+          >
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "backgroundColor": "#1d74f5",
+              "borderRadius": 3,
+              "color": "#fff",
+              "fontSize": 14,
+              "minWidth": 20,
+              "overflow": "hidden",
+              "paddingHorizontal": 5,
+              "paddingVertical": 2,
+              "textAlign": "center",
+            }
+          }
+        >
+          9
         </Text>
       </View>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        style={
-          Object {
-            "backgroundColor": "#1d74f5",
-            "borderRadius": 3,
-            "color": "#fff",
-            "fontSize": 14,
-            "minWidth": 20,
-            "overflow": "hidden",
-            "paddingHorizontal": 5,
-            "paddingVertical": 2,
-            "textAlign": "center",
-          }
-        }
-      >
-        9
-      </Text>
     </View>
     <View
       accessibilityComponentType={undefined}
       accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 99 alerts, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -647,13 +699,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -663,107 +714,121 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#795548",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
-              },
-            ]
-          }
-        >
-          LC
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
+                "backgroundColor": "#795548",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
               undefined,
             ]
           }
         >
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            LC
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+              "marginLeft": 16,
+              "marginRight": 4,
+            }
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
         <Text
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
-          numberOfLines={1}
           style={
             Object {
-              "color": "#888",
-              "flex": 1,
-              "fontSize": 10,
+              "backgroundColor": "#1d74f5",
+              "borderRadius": 3,
+              "color": "#fff",
+              "fontSize": 14,
+              "minWidth": 20,
+              "overflow": "hidden",
+              "paddingHorizontal": 5,
+              "paddingVertical": 2,
+              "textAlign": "center",
             }
           }
         >
-          Nov 10
+          99
         </Text>
       </View>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        style={
-          Object {
-            "backgroundColor": "#1d74f5",
-            "borderRadius": 3,
-            "color": "#fff",
-            "fontSize": 14,
-            "minWidth": 20,
-            "overflow": "hidden",
-            "paddingHorizontal": 5,
-            "paddingVertical": 2,
-            "textAlign": "center",
-          }
-        }
-      >
-        99
-      </Text>
     </View>
     <View
       accessibilityComponentType={undefined}
       accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 100 alerts, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -775,13 +840,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -791,107 +855,121 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#795548",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
-              },
-            ]
-          }
-        >
-          LC
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
+                "backgroundColor": "#795548",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
               undefined,
             ]
           }
         >
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            LC
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+              "marginLeft": 16,
+              "marginRight": 4,
+            }
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
         <Text
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
-          numberOfLines={1}
           style={
             Object {
-              "color": "#888",
-              "flex": 1,
-              "fontSize": 10,
+              "backgroundColor": "#1d74f5",
+              "borderRadius": 3,
+              "color": "#fff",
+              "fontSize": 14,
+              "minWidth": 20,
+              "overflow": "hidden",
+              "paddingHorizontal": 5,
+              "paddingVertical": 2,
+              "textAlign": "center",
             }
           }
         >
-          Nov 10
+          100
         </Text>
       </View>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        style={
-          Object {
-            "backgroundColor": "#1d74f5",
-            "borderRadius": 3,
-            "color": "#fff",
-            "fontSize": 14,
-            "minWidth": 20,
-            "overflow": "hidden",
-            "paddingHorizontal": 5,
-            "paddingVertical": 2,
-            "textAlign": "center",
-          }
-        }
-      >
-        100
-      </Text>
     </View>
     <View
       accessibilityComponentType={undefined}
       accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 100000 alerts, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -903,13 +981,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -919,107 +996,121 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#795548",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
-              },
-            ]
-          }
-        >
-          LC
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
+                "backgroundColor": "#795548",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
               undefined,
             ]
           }
         >
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            LC
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+              "marginLeft": 16,
+              "marginRight": 4,
+            }
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
         <Text
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
-          numberOfLines={1}
           style={
             Object {
-              "color": "#888",
-              "flex": 1,
-              "fontSize": 10,
+              "backgroundColor": "#1d74f5",
+              "borderRadius": 3,
+              "color": "#fff",
+              "fontSize": 14,
+              "minWidth": 20,
+              "overflow": "hidden",
+              "paddingHorizontal": 5,
+              "paddingVertical": 2,
+              "textAlign": "center",
             }
           }
         >
-          Nov 10
+          999+
         </Text>
       </View>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        style={
-          Object {
-            "backgroundColor": "#1d74f5",
-            "borderRadius": 3,
-            "color": "#fff",
-            "fontSize": 14,
-            "minWidth": 20,
-            "overflow": "hidden",
-            "paddingHorizontal": 5,
-            "paddingVertical": 2,
-            "textAlign": "center",
-          }
-        }
-      >
-        999+
-      </Text>
     </View>
     <View
       accessibilityComponentType={undefined}
       accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 100000 alerts, you were mentioned, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -1031,13 +1122,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -1047,107 +1137,121 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#795548",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
-              },
-            ]
-          }
-        >
-          LC
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
+                "backgroundColor": "#795548",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
               undefined,
             ]
           }
         >
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            LC
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+              "marginLeft": 16,
+              "marginRight": 4,
+            }
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
         <Text
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
-          numberOfLines={1}
           style={
             Object {
-              "color": "#888",
-              "flex": 1,
-              "fontSize": 10,
+              "backgroundColor": "#1d74f5",
+              "borderRadius": 3,
+              "color": "#fff",
+              "fontSize": 14,
+              "minWidth": 20,
+              "overflow": "hidden",
+              "paddingHorizontal": 5,
+              "paddingVertical": 2,
+              "textAlign": "center",
             }
           }
         >
-          Nov 10
+          @ 999+
         </Text>
       </View>
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        ellipsizeMode="tail"
-        style={
-          Object {
-            "backgroundColor": "#1d74f5",
-            "borderRadius": 3,
-            "color": "#fff",
-            "fontSize": 14,
-            "minWidth": 20,
-            "overflow": "hidden",
-            "paddingHorizontal": 5,
-            "paddingVertical": 2,
-            "textAlign": "center",
-          }
-        }
-      >
-        @ 999+
-      </Text>
     </View>
     <View
       accessibilityComponentType={undefined}
       accessibilityLabel="W, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -1159,13 +1263,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -1175,79 +1278,93 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#E91E63",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
-              },
-            ]
-          }
-        >
-          W
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
+                "backgroundColor": "#E91E63",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
               undefined,
             ]
           }
         >
-          W
-        </Text>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            W
+          </Text>
+        </View>
+        <View
           style={
             Object {
-              "color": "#888",
               "flex": 1,
-              "fontSize": 10,
+              "marginLeft": 16,
+              "marginRight": 4,
             }
           }
         >
-          Nov 10
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            W
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
       </View>
     </View>
     <View
@@ -1255,7 +1372,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       accessibilityLabel="WW, last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -1267,13 +1384,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -1283,79 +1399,93 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": "#9C27B0",
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
-              },
-            ]
-          }
-        >
-          WW
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
+                "backgroundColor": "#9C27B0",
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
               undefined,
             ]
           }
         >
-          WW
-        </Text>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            WW
+          </Text>
+        </View>
+        <View
           style={
             Object {
-              "color": "#888",
               "flex": 1,
-              "fontSize": 10,
+              "marginLeft": 16,
+              "marginRight": 4,
             }
           }
         >
-          Nov 10
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            WW
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
       </View>
     </View>
     <View
@@ -1363,7 +1493,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       accessibilityLabel=", last message Nov 10"
       accessibilityTraits="selected"
       accessible={true}
-      collapsable={undefined}
+      hasTVPreferredFocus={undefined}
       hitSlop={undefined}
       isTVSelectable={true}
       nativeID={undefined}
@@ -1375,13 +1505,12 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 10,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
       }
       testID={undefined}
       tvParallaxProperties={undefined}
@@ -1391,79 +1520,93 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "justifyContent": "center",
-              "overflow": "hidden",
-            },
-            Object {
-              "backgroundColor": undefined,
-              "borderRadius": 4,
-              "height": 40,
-              "width": 40,
+              "flexDirection": "row",
+              "paddingHorizontal": 16,
+              "paddingVertical": 10,
             },
             undefined,
           ]
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={false}
-          ellipsizeMode="tail"
+        <View
           style={
             Array [
               Object {
-                "color": "#ffffff",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "overflow": "hidden",
               },
               Object {
-                "fontSize": 20,
-              },
-            ]
-          }
-        >
-          
-        </Text>
-      </View>
-      <View
-        style={
-          Object {
-            "flex": 1,
-            "marginLeft": 16,
-            "marginRight": 4,
-          }
-        }
-      >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-          style={
-            Array [
-              Object {
-                "color": "#444",
-                "flex": 1,
-                "fontSize": 16,
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
               },
               undefined,
             ]
           }
         >
-          
-        </Text>
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          ellipsizeMode="tail"
-          numberOfLines={1}
+          <Text
+            accessible={true}
+            allowFontScaling={false}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                Object {
+                  "fontSize": 20,
+                },
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+        <View
           style={
             Object {
-              "color": "#888",
               "flex": 1,
-              "fontSize": 10,
+              "marginLeft": 16,
+              "marginRight": 4,
             }
           }
         >
-          Nov 10
-        </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#444",
+                  "flex": 1,
+                  "fontSize": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 10,
+              }
+            }
+          >
+            Nov 10
+          </Text>
+        </View>
       </View>
     </View>
   </View>
diff --git a/app/presentation/RoomItem.js b/app/presentation/RoomItem.js
index 573e79f7..d198f91f 100644
--- a/app/presentation/RoomItem.js
+++ b/app/presentation/RoomItem.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import Avatar from '../containers/Avatar';
+import Touch from '../utils/touch/index'; //eslint-disable-line
 
 const styles = StyleSheet.create({
 	container: {
@@ -112,14 +113,16 @@ export default class RoomItem extends React.PureComponent {
 		accessibilityLabel += `, last message ${ date }`;
 
 		return (
-			<TouchableOpacity onPress={this.props.onPress} style={[styles.container, favorite && styles.favorite]} accessibilityLabel={accessibilityLabel} accessibilityTraits='selected'>
-				{this.icon}
-				<View style={styles.roomNameView}>
-					<Text style={[styles.roomName, alert && styles.alert]} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
-					{_updatedAt ? <Text style={styles.update} ellipsizeMode='tail' numberOfLines={1}>{ date }</Text> : null}
+			<Touch onPress={this.props.onPress} underlayColor='#FFFFFF' activeOpacity={0.5} accessibilityLabel={accessibilityLabel} accessibilityTraits='selected'>
+				<View style={[styles.container, favorite && styles.favorite]}>
+					{this.icon}
+					<View style={styles.roomNameView}>
+						<Text style={[styles.roomName, alert && styles.alert]} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
+						{_updatedAt ? <Text style={styles.update} ellipsizeMode='tail' numberOfLines={1}>{ date }</Text> : null}
+					</View>
+					{this.renderNumber(unread, userMentions)}
 				</View>
-				{this.renderNumber(unread, userMentions)}
-			</TouchableOpacity>
+			</Touch>
 		);
 	}
 }
diff --git a/app/utils/touch/index.android.js b/app/utils/touch/index.android.js
new file mode 100644
index 00000000..ba409595
--- /dev/null
+++ b/app/utils/touch/index.android.js
@@ -0,0 +1,3 @@
+import { TouchableNativeFeedback } from 'react-native';
+
+export default TouchableNativeFeedback;
diff --git a/app/utils/touch/index.ios.js b/app/utils/touch/index.ios.js
new file mode 100644
index 00000000..1832befa
--- /dev/null
+++ b/app/utils/touch/index.ios.js
@@ -0,0 +1,3 @@
+import { TouchableHighlight } from 'react-native';
+
+export default TouchableHighlight;