diff --git a/app/screens/image_preview/__snapshots__/downloader_bottom_content.test.js.snap b/app/screens/image_preview/__snapshots__/downloader_bottom_content.test.js.snap
new file mode 100644
index 000000000..9506eb359
--- /dev/null
+++ b/app/screens/image_preview/__snapshots__/downloader_bottom_content.test.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DownloaderBottomContent should match snapshot for downloaded file 1`] = `
+<Component
+  style={
+    Object {
+      "alignItems": "center",
+      "marginTop": 10,
+    }
+  }
+>
+  <FormattedText
+    defaultMessage="Download complete"
+    id="mobile.downloader.complete"
+    style={
+      Object {
+        "color": "white",
+        "fontSize": 16,
+        "fontWeight": "600",
+      }
+    }
+  />
+</Component>
+`;
+
+exports[`DownloaderBottomContent should match snapshot for downloaded file and is not video 1`] = `
+<Component
+  style={
+    Object {
+      "alignItems": "center",
+      "marginTop": 10,
+    }
+  }
+>
+  <FormattedText
+    defaultMessage="Image Saved"
+    id="mobile.downloader.image_saved"
+    style={
+      Object {
+        "color": "white",
+        "fontSize": 16,
+        "fontWeight": "600",
+      }
+    }
+  />
+</Component>
+`;
+
+exports[`DownloaderBottomContent should match snapshot for downloaded file and isVideo 1`] = `
+<Component
+  style={
+    Object {
+      "alignItems": "center",
+      "marginTop": 10,
+    }
+  }
+>
+  <FormattedText
+    defaultMessage="Video Saved"
+    id="mobile.downloader.video_saved"
+    style={
+      Object {
+        "color": "white",
+        "fontSize": 16,
+        "fontWeight": "600",
+      }
+    }
+  />
+</Component>
+`;
+
+exports[`DownloaderBottomContent should match snapshot for downloading 1`] = `
+<Component
+  style={
+    Object {
+      "alignItems": "center",
+      "marginTop": 10,
+    }
+  }
+>
+  <FormattedText
+    defaultMessage="Downloading..."
+    id="mobile.downloader.downloading"
+    style={
+      Object {
+        "color": "white",
+        "fontSize": 16,
+        "fontWeight": "600",
+      }
+    }
+  />
+</Component>
+`;
diff --git a/app/screens/image_preview/downloader.ios.js b/app/screens/image_preview/downloader.ios.js
index 0121cc75f..ee28e62c4 100644
--- a/app/screens/image_preview/downloader.ios.js
+++ b/app/screens/image_preview/downloader.ios.js
@@ -18,6 +18,8 @@ import {emptyFunction} from 'app/utils/general';
 
 import LocalConfig from 'assets/config';
 
+import DownloaderBottomContent from './downloader_bottom_content.js';
+
 const {View: AnimatedView} = Animated;
 
 export default class Downloader extends PureComponent {
@@ -115,57 +117,6 @@ export default class Downloader extends PureComponent {
         ]).start();
     };
 
-    renderBottomContent = () => {
-        const {saveToCameraRoll} = this.props;
-        const {isVideo, progress} = this.state;
-        const realFill = Number(progress.toFixed(0));
-
-        if (realFill === 0) {
-            return null;
-        }
-
-        let savedComponent;
-        if (realFill < 100 || this.state.didCancel) {
-            savedComponent = (
-                <FormattedText
-                    id='mobile.downloader.downloading'
-                    defaultMessage='Downloading...'
-                    style={styles.bottomText}
-                />
-            );
-        } else if (saveToCameraRoll && isVideo) {
-            savedComponent = (
-                <FormattedText
-                    id='mobile.downloader.video_saved'
-                    defaultMessage='Video Saved'
-                    style={styles.bottomText}
-                />
-            );
-        } else if (saveToCameraRoll) {
-            savedComponent = (
-                <FormattedText
-                    id='mobile.downloader.image_saved'
-                    defaultMessage='Image Saved'
-                    style={styles.bottomText}
-                />
-            );
-        } else {
-            savedComponent = (
-                <FormattedText
-                    id='mobile.downloader.complete'
-                    defaultMessage='Download complete'
-                    style={styles.bottomText}
-                />
-            );
-        }
-
-        return (
-            <View style={styles.bottomContent}>
-                {savedComponent}
-            </View>
-        );
-    };
-
     renderProgress = (fill) => {
         const {isVideo} = this.state;
         const realFill = Number(fill.toFixed(0));
@@ -383,12 +334,12 @@ export default class Downloader extends PureComponent {
     };
 
     render() {
-        const {show, downloadPath} = this.props;
+        const {show, downloadPath, saveToCameraRoll} = this.props;
         if (!show && !this.state.force) {
             return null;
         }
 
-        const {progress, started} = this.state;
+        const {progress, started, isVideo} = this.state;
 
         const containerHeight = show ? '100%' : 0;
 
@@ -412,7 +363,13 @@ export default class Downloader extends PureComponent {
                         >
                             {component}
                         </CircularProgress>
-                        {this.renderBottomContent()}
+                        { !this.state.didCancel && (
+                            <DownloaderBottomContent
+                                saveToCameraRoll={saveToCameraRoll}
+                                isVideo={isVideo}
+                                progressPercent={progress}
+                            />
+                        )}
                     </View>
                 </AnimatedView>
             </View>
diff --git a/app/screens/image_preview/downloader_bottom_content.js b/app/screens/image_preview/downloader_bottom_content.js
new file mode 100644
index 000000000..455c831f8
--- /dev/null
+++ b/app/screens/image_preview/downloader_bottom_content.js
@@ -0,0 +1,75 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react';
+import FormattedText from 'app/components/formatted_text';
+import {View, StyleSheet} from 'react-native';
+import PropTypes from 'prop-types';
+
+const DownloaderBottomContent = ({saveToCameraRoll, isVideo, progressPercent}) => {
+    const realFill = Number(progressPercent.toFixed(0));
+
+    if (realFill === 0) {
+        return null;
+    }
+
+    let savedComponent;
+    if (realFill < 100) {
+        savedComponent = (
+            <FormattedText
+                id='mobile.downloader.downloading'
+                defaultMessage='Downloading...'
+                style={styles.bottomText}
+            />
+        );
+    } else if (saveToCameraRoll && isVideo) {
+        savedComponent = (
+            <FormattedText
+                id='mobile.downloader.video_saved'
+                defaultMessage='Video Saved'
+                style={styles.bottomText}
+            />
+        );
+    } else if (saveToCameraRoll) {
+        savedComponent = (
+            <FormattedText
+                id='mobile.downloader.image_saved'
+                defaultMessage='Image Saved'
+                style={styles.bottomText}
+            />
+        );
+    } else {
+        savedComponent = (
+            <FormattedText
+                id='mobile.downloader.complete'
+                defaultMessage='Download complete'
+                style={styles.bottomText}
+            />
+        );
+    }
+
+    return (
+        <View style={styles.bottomContent}>
+            {savedComponent}
+        </View>
+    );
+};
+
+DownloaderBottomContent.propTypes = {
+    saveToCameraRoll: PropTypes.bool,
+    isVideo: PropTypes.bool,
+    progressPercent: PropTypes.number,
+};
+
+const styles = StyleSheet.create({
+    bottomContent: {
+        alignItems: 'center',
+        marginTop: 10,
+    },
+    bottomText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});
+
+export default DownloaderBottomContent;
diff --git a/app/screens/image_preview/downloader_bottom_content.test.js b/app/screens/image_preview/downloader_bottom_content.test.js
new file mode 100644
index 000000000..3a5e87f39
--- /dev/null
+++ b/app/screens/image_preview/downloader_bottom_content.test.js
@@ -0,0 +1,58 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import DownloaderBottomContent from './downloader_bottom_content';
+
+describe('DownloaderBottomContent', () => {
+    const baseProps = {
+        progressPercent: 10,
+        isVideo: false,
+        saveToCameraRoll: true,
+    };
+
+    test('should match snapshot for downloading', () => {
+        const wrapper = shallow(
+            <DownloaderBottomContent {...baseProps}/>,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot for downloaded file and isVideo', () => {
+        const wrapper = shallow(
+            <DownloaderBottomContent
+                {...baseProps}
+                isVideo={true}
+                progressPercent={100}
+            />,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot for downloaded file and is not video', () => {
+        const wrapper = shallow(
+            <DownloaderBottomContent
+                {...baseProps}
+                progressPercent={100}
+            />,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot for downloaded file', () => {
+        const wrapper = shallow(
+            <DownloaderBottomContent
+                {...baseProps}
+                saveToCameraRoll={false}
+                progressPercent={100}
+            />,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});