diff --git a/app/components/channel_list/channel_list.js b/app/components/channel_list/channel_list.js
index 76a124fa5..174ab1873 100644
--- a/app/components/channel_list/channel_list.js
+++ b/app/components/channel_list/channel_list.js
@@ -115,7 +115,7 @@ class ChannelList extends Component {
         this.setState({
             dataSource: this.state.dataSource.cloneWithRows(this.buildData(nextProps))
         });
-        const container = this.refs.scrollContainer;
+        const container = this.scrollContainer;
         if (container && container._visibleRows && container._visibleRows.s1) { //eslint-disable-line no-underscore-dangle
             this.updateUnreadIndicators(container._visibleRows);  //eslint-disable-line no-underscore-dangle
         }
@@ -167,6 +167,11 @@ class ChannelList extends Component {
         this.props.actions.markChannelAsRead(channel.id, currentChannel.id);
     };
 
+    onLayout = (event) => {
+        const {width} = event.nativeEvent.layout;
+        this.width = width;
+    };
+
     handleClose = (channel) => {
         this.setState({showOptions: false});
         this.props.actions.closeDMChannel(channel);
@@ -303,6 +308,7 @@ class ChannelList extends Component {
                 unreadCount = 0;
             }
         }
+
         return {
             mentions,
             unreadCount
@@ -469,7 +475,7 @@ class ChannelList extends Component {
         if (this.state.showAbove) {
             above = (
                 <UnreadIndicator
-                    style={{top: 55, backgroundColor: theme.mentionBj}}
+                    style={{top: 55, backgroundColor: theme.mentionBj, width: (this.width - 40)}}
                     text={(
                         <FormattedText
                             style={[Styles.indicatorText, {color: theme.mentionColor}]}
@@ -484,7 +490,7 @@ class ChannelList extends Component {
         if (this.state.showBelow) {
             below = (
                 <UnreadIndicator
-                    style={{bottom: 15, backgroundColor: theme.mentionBj}}
+                    style={{bottom: 15, backgroundColor: theme.mentionBj, width: (this.width - 40)}}
                     text={(
                         <FormattedText
                             style={[Styles.indicatorText, {color: theme.mentionColor}]}
@@ -497,7 +503,10 @@ class ChannelList extends Component {
         }
 
         return (
-            <View style={[Styles.container, {backgroundColor: theme.sidebarBg}]}>
+            <View
+                style={[Styles.container, {backgroundColor: theme.sidebarBg}]}
+                onLayout={this.onLayout}
+            >
                 <View style={[Styles.headerContainer, {backgroundColor: theme.sidebarHeaderBg}]}>
                     <Text
                         ellipsizeMode='tail'
diff --git a/app/components/channel_list/unread_indicator.js b/app/components/channel_list/unread_indicator.js
index c8e56f918..7810d5890 100644
--- a/app/components/channel_list/unread_indicator.js
+++ b/app/components/channel_list/unread_indicator.js
@@ -12,8 +12,7 @@ const Styles = StyleSheet.create({
         flexDirection: 'row',
         position: 'absolute',
         borderRadius: 15,
-        marginLeft: 25,
-        width: 250,
+        marginHorizontal: 15,
         height: 25
     }
 });