diff --git a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
index 93f9b9c3e..2987e202c 100644
--- a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
+++ b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
@@ -210,7 +210,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
             ]
           }
         >
-          {displayName} (you)
+          {displayname} (you)
         </Text>
       </View>
     </View>
@@ -324,7 +324,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
             ]
           }
         >
-          {displayName} (you)
+          {displayname} (you)
         </Text>
       </View>
     </View>
diff --git a/app/components/sidebars/main/channels_list/channel_item/channel_item.js b/app/components/sidebars/main/channels_list/channel_item/channel_item.js
index 1022d8b7f..bfdf56f88 100644
--- a/app/components/sidebars/main/channels_list/channel_item/channel_item.js
+++ b/app/components/sidebars/main/channels_list/channel_item/channel_item.js
@@ -115,7 +115,7 @@ export default class ChannelItem extends PureComponent {
             return null;
         }
 
-        if (!this.props.displayName) {
+        if (!displayName) {
             return null;
         }
 
@@ -134,7 +134,7 @@ export default class ChannelItem extends PureComponent {
         if (isCurrenUser) {
             channelDisplayName = intl.formatMessage({
                 id: 'channel_header.directchannel.you',
-                defaultMessage: '{displayName} (you)',
+                defaultMessage: '{displayname} (you)',
             }, {displayname: displayName});
         }
 
diff --git a/app/components/sidebars/main/channels_list/unread_indicator/index.js b/app/components/sidebars/main/channels_list/unread_indicator/index.js
index bcbb436da..25625a32c 100644
--- a/app/components/sidebars/main/channels_list/unread_indicator/index.js
+++ b/app/components/sidebars/main/channels_list/unread_indicator/index.js
@@ -1,114 +1,5 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import {
-    TouchableWithoutFeedback,
-    View,
-    ViewPropTypes,
-} from 'react-native';
-import IonIcon from 'react-native-vector-icons/Ionicons';
-
-import Fade from 'app/components/fade';
-import FormattedText from 'app/components/formatted_text';
-import {makeStyleSheetFromTheme} from 'app/utils/theme';
-
-export default class UnreadIndicator extends PureComponent {
-    static propTypes = {
-        visible: PropTypes.bool,
-        style: ViewPropTypes.style,
-        onPress: PropTypes.func,
-        theme: PropTypes.object.isRequired,
-        textStyle: ViewPropTypes.style,
-    };
-
-    static defaultProps = {
-        onPress: () => true,
-    };
-
-    renderContent = () => {
-        const {onPress, visible, theme} = this.props;
-        const style = getStyleSheet(theme);
-
-        const content = (
-            <View
-                style={[style.wrapper, this.props.style]}
-                pointerEvents={visible ? 'auto' : 'none'}
-            >
-                <FormattedText
-                    style={[style.indicatorText, this.props.textStyle]}
-                    id='sidebar.unreads'
-                    defaultMessage='More unreads'
-                />
-                <IonIcon
-                    size={14}
-                    name='md-arrow-round-up'
-                    color={theme.mentionColor}
-                    style={style.arrow}
-                />
-            </View>
-        );
-
-        if (visible) {
-            return (
-                <TouchableWithoutFeedback onPress={onPress}>
-                    {content}
-                </TouchableWithoutFeedback>
-            );
-        }
-
-        return content;
-    };
-
-    render() {
-        const {visible, theme} = this.props;
-        const style = getStyleSheet(theme);
-
-        return (
-            <Fade
-                visible={visible}
-                style={style.container}
-                duration={150}
-                disableScale={true}
-            >
-                {this.renderContent()}
-            </Fade>
-        );
-    }
-}
-
-const getStyleSheet = makeStyleSheetFromTheme((theme) => {
-    return {
-        arrow: {
-            position: 'relative',
-            bottom: -1,
-        },
-        container: {
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexDirection: 'row',
-            position: 'absolute',
-            right: 0,
-            left: 0,
-        },
-        indicatorText: {
-            backgroundColor: 'transparent',
-            color: theme.mentionColor,
-            fontSize: 14,
-            paddingVertical: 2,
-            paddingHorizontal: 4,
-            textAlign: 'center',
-            textAlignVertical: 'center',
-        },
-        wrapper: {
-            borderRadius: 15,
-            height: 25,
-            flexDirection: 'row',
-            paddingLeft: 10,
-            paddingRight: 12,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-    };
-});
+import UnreadIndicator from './unread_indicator';
+export default UnreadIndicator;
diff --git a/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.android.js b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.android.js
new file mode 100644
index 000000000..bfafdae37
--- /dev/null
+++ b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.android.js
@@ -0,0 +1,24 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {View} from 'react-native';
+
+import UnreadIndicatorBase, {getStyleSheet} from './unread_indicator.base';
+
+export default class UnreadIndicatorAndroid extends UnreadIndicatorBase {
+    render() {
+        const {visible, theme} = this.props;
+        const style = getStyleSheet(theme);
+
+        if (!visible) {
+            return null;
+        }
+
+        return (
+            <View style={style.container}>
+                {this.renderContent()}
+            </View>
+        );
+    }
+}
diff --git a/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js
new file mode 100644
index 000000000..bb8ece741
--- /dev/null
+++ b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js
@@ -0,0 +1,97 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {
+    TouchableWithoutFeedback,
+    View,
+    ViewPropTypes,
+} from 'react-native';
+import IonIcon from 'react-native-vector-icons/Ionicons';
+
+import FormattedText from 'app/components/formatted_text';
+import {makeStyleSheetFromTheme} from 'app/utils/theme';
+
+export default class UnreadIndicatorBase extends PureComponent {
+    static propTypes = {
+        visible: PropTypes.bool,
+        style: ViewPropTypes.style,
+        onPress: PropTypes.func,
+        theme: PropTypes.object.isRequired,
+        textStyle: ViewPropTypes.style,
+    };
+
+    static defaultProps = {
+        onPress: () => true,
+    };
+
+    renderContent = () => {
+        const {onPress, visible, theme} = this.props;
+        const style = getStyleSheet(theme);
+
+        const content = (
+            <View
+                style={[style.wrapper, this.props.style]}
+                pointerEvents={visible ? 'auto' : 'none'}
+            >
+                <FormattedText
+                    style={[style.indicatorText, this.props.textStyle]}
+                    id='sidebar.unreads'
+                    defaultMessage='More unreads'
+                />
+                <IonIcon
+                    size={14}
+                    name='md-arrow-round-up'
+                    color={theme.mentionColor}
+                    style={style.arrow}
+                />
+            </View>
+        );
+
+        if (visible) {
+            return (
+                <TouchableWithoutFeedback onPress={onPress}>
+                    {content}
+                </TouchableWithoutFeedback>
+            );
+        }
+
+        return content;
+    };
+}
+
+export const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return {
+        arrow: {
+            position: 'relative',
+            bottom: -1,
+        },
+        container: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'row',
+            position: 'absolute',
+            right: 0,
+            left: 0,
+        },
+        indicatorText: {
+            backgroundColor: 'transparent',
+            color: theme.mentionColor,
+            fontSize: 14,
+            paddingVertical: 2,
+            paddingHorizontal: 4,
+            textAlign: 'center',
+            textAlignVertical: 'center',
+        },
+        wrapper: {
+            borderRadius: 15,
+            height: 25,
+            flexDirection: 'row',
+            paddingLeft: 10,
+            paddingRight: 12,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    };
+});
diff --git a/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.ios.js b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.ios.js
new file mode 100644
index 000000000..273923f6e
--- /dev/null
+++ b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.ios.js
@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import Fade from 'app/components/fade';
+
+import UnreadIndicatorBase, {getStyleSheet} from './unread_indicator.base';
+
+export default class UnreadIndicatorIOS extends UnreadIndicatorBase {
+    render() {
+        const {visible, theme} = this.props;
+        const style = getStyleSheet(theme);
+
+        return (
+            <Fade
+                visible={visible}
+                style={style.container}
+                duration={150}
+                disableScale={true}
+            >
+                {this.renderContent()}
+            </Fade>
+        );
+    }
+}
diff --git a/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap b/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap
index 56e371084..cda04d782 100644
--- a/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap
+++ b/app/screens/channel/channel_nav_bar/channel_title/__snapshots__/channel_title.test.js.snap
@@ -86,11 +86,11 @@ exports[`ChannelTitle should match snapshot when isSelfDMChannel is true 1`] = `
       }
     >
       <FormattedText
-        defaultMessage="{displayName} (you)"
+        defaultMessage="{displayname} (you)"
         id="channel_header.directchannel.you"
         values={
           Object {
-            "displayName": "My User",
+            "displayname": "My User",
           }
         }
       />
diff --git a/app/screens/channel/channel_nav_bar/channel_title/channel_title.js b/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
index e91c20a04..2eaae2a0d 100644
--- a/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
+++ b/app/screens/channel/channel_nav_bar/channel_title/channel_title.js
@@ -98,8 +98,8 @@ export default class ChannelTitle extends PureComponent {
 
         if (isSelfDMChannel) {
             const messageId = t('channel_header.directchannel.you');
-            const defaultMessage = '{displayName} (you)';
-            const values = {displayName: channelDisplayName};
+            const defaultMessage = '{displayname} (you)';
+            const values = {displayname: channelDisplayName};
 
             return (
                 <FormattedText