diff --git a/app/components/__snapshots__/fade.test.js.snap b/app/components/__snapshots__/fade.test.js.snap
index d576df934..41ef885f1 100644
--- a/app/components/__snapshots__/fade.test.js.snap
+++ b/app/components/__snapshots__/fade.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Fade should render {opacity: 0} 1`] = `
 <AnimatedComponent
+  pointerEvents="box-none"
   style={
     Object {
       "opacity": 0,
@@ -21,6 +22,7 @@ exports[`Fade should render {opacity: 0} 1`] = `
 
 exports[`Fade should render {opacity: 1} 1`] = `
 <AnimatedComponent
+  pointerEvents="box-none"
   style={
     Object {
       "opacity": 1,
diff --git a/app/components/fade.js b/app/components/fade.js
index bb7ac30ed..9819ec841 100644
--- a/app/components/fade.js
+++ b/app/components/fade.js
@@ -47,6 +47,7 @@ export default class Fade extends PureComponent {
                     opacity: fadeAnim,
                     transform: disableScale ? [] : [{scale: fadeAnim}],
                 }}
+                pointerEvents={'box-none'}
             >
                 {this.props.children}
             </Animated.View>
diff --git a/app/components/sidebars/main/channels_list/list/list.js b/app/components/sidebars/main/channels_list/list/list.js
index da9af34b6..39b8238c3 100644
--- a/app/components/sidebars/main/channels_list/list/list.js
+++ b/app/components/sidebars/main/channels_list/list/list.js
@@ -417,10 +417,10 @@ export default class List extends PureComponent {
                 />
                 {UnreadIndicator &&
                 <UnreadIndicator
-                    show={showIndicator}
-                    style={styles.above}
                     onPress={this.scrollToTop}
                     theme={theme}
+                    style={styles.above}
+                    visible={showIndicator}
                 />
                 }
             </View>
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 ce095e486..bcbb436da 100644
--- a/app/components/sidebars/main/channels_list/unread_indicator/index.js
+++ b/app/components/sidebars/main/channels_list/unread_indicator/index.js
@@ -16,7 +16,7 @@ import {makeStyleSheetFromTheme} from 'app/utils/theme';
 
 export default class UnreadIndicator extends PureComponent {
     static propTypes = {
-        show: PropTypes.bool,
+        visible: PropTypes.bool,
         style: ViewPropTypes.style,
         onPress: PropTypes.func,
         theme: PropTypes.object.isRequired,
@@ -27,31 +27,52 @@ export default class UnreadIndicator extends PureComponent {
         onPress: () => true,
     };
 
-    render() {
-        const {onPress, show, theme} = this.props;
+    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={show}
+                visible={visible}
                 style={style.container}
                 duration={150}
                 disableScale={true}
             >
-                <TouchableWithoutFeedback onPress={onPress}>
-                    <View style={[style.wrapper, this.props.style]}>
-                        <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>
-                </TouchableWithoutFeedback>
+                {this.renderContent()}
             </Fade>
         );
     }