diff --git a/app/components/autocomplete/autocomplete_section_header.js b/app/components/autocomplete/autocomplete_section_header.js
index 997a8cf449..0fb6f6d806 100644
--- a/app/components/autocomplete/autocomplete_section_header.js
+++ b/app/components/autocomplete/autocomplete_section_header.js
@@ -34,7 +34,12 @@ export default class AutocompleteSectionHeader extends PureComponent {
                         defaultMessage={defaultMessage}
                         style={style.sectionText}
                     />
-                    {loading && <ActivityIndicator size='small'/>}
+                    {loading &&
+                    <ActivityIndicator
+                        color={theme.centerChannelColor}
+                        size='small'
+                    />
+                    }
                 </View>
             </View>
         );
diff --git a/app/components/custom_list/__snapshots__/index.test.js.snap b/app/components/custom_list/__snapshots__/index.test.js.snap
index 38087a1d36..e205d5f3eb 100644
--- a/app/components/custom_list/__snapshots__/index.test.js.snap
+++ b/app/components/custom_list/__snapshots__/index.test.js.snap
@@ -31,6 +31,16 @@ exports[`CustomList should match snapshot with FlatList 1`] = `
   onEndReachedThreshold={2}
   onLayout={[Function]}
   onScroll={[Function]}
+  refreshControl={
+    <RefreshControlMock
+      colors={
+        Array [
+          "#3d3c40",
+        ]
+      }
+      tintColor="#3d3c40"
+    />
+  }
   removeClippedSubviews={true}
   renderItem={[Function]}
   scrollEventThrottle={60}
diff --git a/app/components/custom_list/index.js b/app/components/custom_list/index.js
index 42ae0461df..5b2acf0bb4 100644
--- a/app/components/custom_list/index.js
+++ b/app/components/custom_list/index.js
@@ -3,7 +3,7 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {FlatList, Keyboard, Platform, SectionList, Text, View} from 'react-native';
+import {FlatList, Keyboard, Platform, RefreshControl, SectionList, Text, View} from 'react-native';
 
 import {ListTypes} from 'app/constants';
 import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
@@ -113,6 +113,14 @@ export default class CustomList extends PureComponent {
         const {data, extraData, theme, onRefresh, refreshing} = this.props;
         const style = getStyleFromTheme(theme);
 
+        const refreshControl = (
+            <RefreshControl
+                refreshing={refreshing}
+                onRefresh={onRefresh}
+                colors={[theme.centerChannelColor]}
+                tintColor={theme.centerChannelColor}
+            />);
+
         return (
             <FlatList
                 contentContainerStyle={style.container}
@@ -128,8 +136,7 @@ export default class CustomList extends PureComponent {
                 maxToRenderPerBatch={INITIAL_BATCH_TO_RENDER + 1}
                 onLayout={this.handleLayout}
                 onScroll={this.handleScroll}
-                onRefresh={onRefresh}
-                refreshing={refreshing}
+                refreshControl={refreshControl}
                 ref={this.setListRef}
                 removeClippedSubviews={true}
                 renderItem={this.renderItem}
diff --git a/app/components/edit_channel_info/edit_channel_info.js b/app/components/edit_channel_info/edit_channel_info.js
index 13bafe9b7c..8c68504106 100644
--- a/app/components/edit_channel_info/edit_channel_info.js
+++ b/app/components/edit_channel_info/edit_channel_info.js
@@ -182,7 +182,7 @@ export default class EditChannelInfo extends PureComponent {
             return (
                 <View style={style.container}>
                     <StatusBar/>
-                    <Loading/>
+                    <Loading color={theme.centerChannelColor}/>
                 </View>
             );
         }
diff --git a/app/components/emoji_picker/emoji_picker_base.js b/app/components/emoji_picker/emoji_picker_base.js
index cafb8788f8..58d6f4e30e 100644
--- a/app/components/emoji_picker/emoji_picker_base.js
+++ b/app/components/emoji_picker/emoji_picker_base.js
@@ -440,7 +440,7 @@ export default class EmojiPicker extends PureComponent {
         const styles = getStyleSheetFromTheme(theme);
         return (
             <View style={styles.loading}>
-                <ActivityIndicator/>
+                <ActivityIndicator color={theme.centerChannelColor}/>
             </View>
         );
     };
diff --git a/app/components/load_more_posts/load_more_posts.js b/app/components/load_more_posts/load_more_posts.js
index 15e7c94b12..6578b44893 100644
--- a/app/components/load_more_posts/load_more_posts.js
+++ b/app/components/load_more_posts/load_more_posts.js
@@ -46,7 +46,7 @@ export default class LoadMorePosts extends PureComponent {
 
         return (
             <View style={{flex: 1, alignItems: 'center'}}>
-                <ActivityIndicator/>
+                <ActivityIndicator color={this.props.theme.centerChannelColor}/>
             </View>
         );
     }
diff --git a/app/components/post_list/__snapshots__/post_list.test.js.snap b/app/components/post_list/__snapshots__/post_list.test.js.snap
index 82979e601b..0c882c26fe 100644
--- a/app/components/post_list/__snapshots__/post_list.test.js.snap
+++ b/app/components/post_list/__snapshots__/post_list.test.js.snap
@@ -41,7 +41,18 @@ exports[`PostList setting channel deep link 1`] = `
   onLayout={[Function]}
   onScroll={[Function]}
   onScrollToIndexFailed={[Function]}
-  refreshing={false}
+  refreshControl={
+    <RefreshControlMock
+      colors={
+        Array [
+          "#3d3c40",
+        ]
+      }
+      onRefresh={null}
+      refreshing={false}
+      tintColor="#3d3c40"
+    />
+  }
   removeClippedSubviews={true}
   renderItem={[Function]}
   scrollEventThrottle={60}
@@ -91,7 +102,18 @@ exports[`PostList setting permalink deep link 1`] = `
   onLayout={[Function]}
   onScroll={[Function]}
   onScrollToIndexFailed={[Function]}
-  refreshing={false}
+  refreshControl={
+    <RefreshControlMock
+      colors={
+        Array [
+          "#3d3c40",
+        ]
+      }
+      onRefresh={null}
+      refreshing={false}
+      tintColor="#3d3c40"
+    />
+  }
   removeClippedSubviews={true}
   renderItem={[Function]}
   scrollEventThrottle={60}
@@ -141,7 +163,18 @@ exports[`PostList should match snapshot 1`] = `
   onLayout={[Function]}
   onScroll={[Function]}
   onScrollToIndexFailed={[Function]}
-  refreshing={false}
+  refreshControl={
+    <RefreshControlMock
+      colors={
+        Array [
+          "#3d3c40",
+        ]
+      }
+      onRefresh={null}
+      refreshing={false}
+      tintColor="#3d3c40"
+    />
+  }
   removeClippedSubviews={true}
   renderItem={[Function]}
   scrollEventThrottle={60}
diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js
index 87f228c825..d2ed9dcf26 100644
--- a/app/components/post_list/post_list.js
+++ b/app/components/post_list/post_list.js
@@ -3,7 +3,7 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {FlatList, StyleSheet} from 'react-native';
+import {FlatList, RefreshControl, StyleSheet} from 'react-native';
 
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 import * as PostListUtils from 'mattermost-redux/utils/post_list';
@@ -366,13 +366,16 @@ export default class PostList extends PureComponent {
             postIds,
             refreshing,
             scrollViewNativeID,
+            theme,
         } = this.props;
 
-        const refreshControl = {refreshing};
-
-        if (channelId) {
-            refreshControl.onRefresh = this.handleRefresh;
-        }
+        const refreshControl = (
+            <RefreshControl
+                refreshing={refreshing}
+                onRefresh={channelId ? this.handleRefresh : null}
+                colors={[theme.centerChannelColor]}
+                tintColor={theme.centerChannelColor}
+            />);
 
         const hasPostsKey = postIds.length ? 'true' : 'false';
 
@@ -398,7 +401,7 @@ export default class PostList extends PureComponent {
                 removeClippedSubviews={true}
                 renderItem={this.renderItem}
                 scrollEventThrottle={60}
-                {...refreshControl}
+                refreshControl={refreshControl}
                 nativeID={scrollViewNativeID}
             />
         );
diff --git a/app/screens/channel/channel_base.js b/app/screens/channel/channel_base.js
index eb41aa3c49..9ac5c5054d 100644
--- a/app/screens/channel/channel_base.js
+++ b/app/screens/channel/channel_base.js
@@ -292,7 +292,10 @@ export default class ChannelBase extends PureComponent {
                             theme={theme}
                             isLandscape={isLandscape}
                         />
-                        <Loading channelIsLoading={true}/>
+                        <Loading
+                            channelIsLoading={true}
+                            color={theme.centerChannelColor}
+                        />
                     </View>
                 </SafeAreaView>
             );
diff --git a/app/screens/channel_add_members/channel_add_members.js b/app/screens/channel_add_members/channel_add_members.js
index 114a22ad51..6359d5ec88 100644
--- a/app/screens/channel_add_members/channel_add_members.js
+++ b/app/screens/channel_add_members/channel_add_members.js
@@ -303,7 +303,7 @@ export default class ChannelAddMembers extends PureComponent {
             return (
                 <View style={style.container}>
                     <StatusBar/>
-                    <Loading/>
+                    <Loading color={theme.centerChannelColor}/>
                 </View>
             );
         }
diff --git a/app/screens/channel_members/channel_members.js b/app/screens/channel_members/channel_members.js
index 54e590f0bc..49cf3a4ac7 100644
--- a/app/screens/channel_members/channel_members.js
+++ b/app/screens/channel_members/channel_members.js
@@ -335,7 +335,7 @@ export default class ChannelMembers extends PureComponent {
             return (
                 <View style={style.container}>
                     <StatusBar/>
-                    <Loading/>
+                    <Loading color={theme.centerChannelColor}/>
                 </View>
             );
         }
diff --git a/app/screens/edit_post/edit_post.js b/app/screens/edit_post/edit_post.js
index 4cd3791b6f..888849ea5f 100644
--- a/app/screens/edit_post/edit_post.js
+++ b/app/screens/edit_post/edit_post.js
@@ -173,7 +173,7 @@ export default class EditPost extends PureComponent {
             return (
                 <View style={style.container}>
                     <StatusBar/>
-                    <Loading/>
+                    <Loading color={theme.centerChannelColor}/>
                 </View>
             );
         }
diff --git a/app/screens/edit_profile/edit_profile.js b/app/screens/edit_profile/edit_profile.js
index 29dc6aa59d..ed623ede3e 100644
--- a/app/screens/edit_profile/edit_profile.js
+++ b/app/screens/edit_profile/edit_profile.js
@@ -560,7 +560,7 @@ export default class EditProfile extends PureComponent {
             return (
                 <View style={[style.container, style.flex]}>
                     <StatusBar/>
-                    <Loading/>
+                    <Loading color={theme.centerChannelColor}/>
                 </View>
             );
         }
diff --git a/app/screens/error_teams_list/error_teams_list.js b/app/screens/error_teams_list/error_teams_list.js
index 2c6d28ee9b..7d401338bb 100644
--- a/app/screens/error_teams_list/error_teams_list.js
+++ b/app/screens/error_teams_list/error_teams_list.js
@@ -78,7 +78,7 @@ export default class ErrorTeamsList extends PureComponent {
         const style = getStyleFromTheme(theme);
 
         if (this.state.loading) {
-            return <Loading/>;
+            return <Loading color={theme.centerChannelColor}/>;
         }
 
         return (
diff --git a/app/screens/more_channels/more_channels.js b/app/screens/more_channels/more_channels.js
index 38952d8c8e..de0cfbbbd8 100644
--- a/app/screens/more_channels/more_channels.js
+++ b/app/screens/more_channels/more_channels.js
@@ -327,7 +327,7 @@ export default class MoreChannels extends PureComponent {
 
         let content;
         if (adding) {
-            content = (<Loading/>);
+            content = (<Loading color={theme.centerChannelColor}/>);
         } else {
             const searchBarInput = {
                 backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
diff --git a/app/screens/more_dms/more_dms.js b/app/screens/more_dms/more_dms.js
index 327be408fb..0a64765e06 100644
--- a/app/screens/more_dms/more_dms.js
+++ b/app/screens/more_dms/more_dms.js
@@ -420,7 +420,7 @@ export default class MoreDirectMessages extends PureComponent {
             return (
                 <View style={style.container}>
                     <StatusBar/>
-                    <Loading/>
+                    <Loading color={theme.centerChannelColor}/>
                 </View>
             );
         }
diff --git a/app/screens/permalink/__snapshots__/permalink.test.js.snap b/app/screens/permalink/__snapshots__/permalink.test.js.snap
index 2569bba476..9e7f3cc064 100644
--- a/app/screens/permalink/__snapshots__/permalink.test.js.snap
+++ b/app/screens/permalink/__snapshots__/permalink.test.js.snap
@@ -124,7 +124,7 @@ exports[`Permalink should match snapshot 1`] = `
         }
       >
         <Loading
-          color="grey"
+          color="#3d3c40"
           size="large"
           style={Object {}}
         />
diff --git a/app/screens/permalink/permalink.js b/app/screens/permalink/permalink.js
index 169ee0de8c..9f88523373 100644
--- a/app/screens/permalink/permalink.js
+++ b/app/screens/permalink/permalink.js
@@ -370,7 +370,7 @@ export default class Permalink extends PureComponent {
                 </View>
             );
         } else if (loading) {
-            postList = <Loading/>;
+            postList = <Loading color={theme.centerChannelColor}/>;
         } else {
             postList = (
                 <PostList
diff --git a/app/screens/search/search.js b/app/screens/search/search.js
index 3fdfd0a3dd..a9d5960284 100644
--- a/app/screens/search/search.js
+++ b/app/screens/search/search.js
@@ -333,11 +333,13 @@ export default class Search extends PureComponent {
     });
 
     renderFooter = () => {
-        if (this.props.isSearchGettingMore) {
-            const style = getStyleFromTheme(this.props.theme);
+        const {isSearchGettingMore, theme} = this.props;
+
+        if (isSearchGettingMore) {
+            const style = getStyleFromTheme(theme);
             return (
                 <View style={style.loadingMore}>
-                    <Loading/>
+                    <Loading color={theme.centerChannelColor}/>
                 </View>
             );
         }
@@ -634,7 +636,7 @@ export default class Search extends PureComponent {
                     id: SEARCHING,
                     component: (
                         <View style={style.searching}>
-                            <Loading/>
+                            <Loading color={theme.centerChannelColor}/>
                         </View>
                     ),
                 }];
diff --git a/app/screens/select_team/__snapshots__/select_team.test.js.snap b/app/screens/select_team/__snapshots__/select_team.test.js.snap
index 449a83f737..df12413205 100644
--- a/app/screens/select_team/__snapshots__/select_team.test.js.snap
+++ b/app/screens/select_team/__snapshots__/select_team.test.js.snap
@@ -97,11 +97,19 @@ exports[`SelectTeam should match snapshot for teams 1`] = `
     listType="flat"
     loading={false}
     loadingComponent={
-      <Loading
-        color="grey"
-        size="large"
-        style={Object {}}
-      />
+      <View
+        style={
+          Object {
+            "marginVertical": 10,
+          }
+        }
+      >
+        <Loading
+          color="#3d3c40"
+          size="small"
+          style={Object {}}
+        />
+      </View>
     }
     onLoadMore={[Function]}
     onRefresh={[Function]}
diff --git a/app/screens/select_team/select_team.js b/app/screens/select_team/select_team.js
index 7d2c297036..9e34ac3955 100644
--- a/app/screens/select_team/select_team.js
+++ b/app/screens/select_team/select_team.js
@@ -217,7 +217,7 @@ export default class SelectTeam extends PureComponent {
         const style = getStyleFromTheme(theme);
 
         if (this.state.joining) {
-            return <Loading/>;
+            return <Loading color={theme.centerChannelColor}/>;
         }
 
         if (this.props.teamsRequest.status === RequestStatus.FAILURE) {
@@ -262,7 +262,14 @@ export default class SelectTeam extends PureComponent {
                 <CustomList
                     data={teams}
                     loading={this.state.loading}
-                    loadingComponent={<Loading/>}
+                    loadingComponent={
+                        <View style={style.footer}>
+                            <Loading
+                                color={theme.centerChannelColor}
+                                size='small'
+                            />
+                        </View>
+                    }
                     refreshing={this.state.refreshing}
                     onRefresh={this.onRefresh}
                     onLoadMore={this.getTeams}
@@ -300,6 +307,9 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             width: '100%',
             height: 1,
         },
+        footer: {
+            marginVertical: 10,
+        },
         teamWrapper: {
             marginTop: 20,
         },
diff --git a/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap b/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap
index b02f70ca2a..3ac829734c 100644
--- a/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap
+++ b/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap
@@ -272,7 +272,7 @@ exports[`TermsOfService should enable/disable navigator buttons on setNavigatorB
 
 exports[`TermsOfService should match snapshot 1`] = `
 <Loading
-  color="grey"
+  color="#3d3c40"
   size="large"
   style={Object {}}
 />
@@ -329,7 +329,7 @@ exports[`TermsOfService should match snapshot for fail of get terms 1`] = `
 
 exports[`TermsOfService should match snapshot for get terms 1`] = `
 <Loading
-  color="grey"
+  color="#3d3c40"
   size="large"
   style={Object {}}
 />
diff --git a/app/screens/terms_of_service/terms_of_service.js b/app/screens/terms_of_service/terms_of_service.js
index db72b21922..beed535bb2 100644
--- a/app/screens/terms_of_service/terms_of_service.js
+++ b/app/screens/terms_of_service/terms_of_service.js
@@ -231,7 +231,7 @@ export default class TermsOfService extends PureComponent {
         const textStyles = getMarkdownTextStyles(theme);
 
         if (this.state.loading) {
-            return <Loading/>;
+            return <Loading color={theme.centerChannelColor}/>;
         }
 
         if (this.state.getTermsError) {
diff --git a/app/screens/thread/__snapshots__/thread.ios.test.js.snap b/app/screens/thread/__snapshots__/thread.ios.test.js.snap
index 531bff0c73..dc90b29bd9 100644
--- a/app/screens/thread/__snapshots__/thread.ios.test.js.snap
+++ b/app/screens/thread/__snapshots__/thread.ios.test.js.snap
@@ -32,7 +32,7 @@ exports[`thread should match snapshot, has root post 1`] = `
         }
         renderFooter={
           <Loading
-            color="grey"
+            color="#3d3c40"
             size="large"
             style={Object {}}
           />
@@ -87,7 +87,7 @@ exports[`thread should match snapshot, no root post, loading 1`] = `
     />
     <Connect(StatusBar) />
     <Loading
-      color="grey"
+      color="#3d3c40"
       size="large"
       style={Object {}}
     />
@@ -112,7 +112,7 @@ exports[`thread should match snapshot, render footer 1`] = `
   }
   renderFooter={
     <Loading
-      color="grey"
+      color="#3d3c40"
       size="large"
       style={Object {}}
     />
@@ -157,7 +157,7 @@ exports[`thread should match snapshot, render footer 3`] = `
     />
     <Connect(StatusBar) />
     <Loading
-      color="grey"
+      color="#3d3c40"
       size="large"
       style={Object {}}
     />
diff --git a/app/screens/thread/thread.android.js b/app/screens/thread/thread.android.js
index a2e60c2095..d6f62d6fcf 100644
--- a/app/screens/thread/thread.android.js
+++ b/app/screens/thread/thread.android.js
@@ -53,7 +53,7 @@ export default class ThreadAndroid extends ThreadBase {
             );
         } else {
             content = (
-                <Loading/>
+                <Loading color={theme.centerChannelColor}/>
             );
         }
 
diff --git a/app/screens/thread/thread.ios.js b/app/screens/thread/thread.ios.js
index 0d035bdd91..1470856c13 100644
--- a/app/screens/thread/thread.ios.js
+++ b/app/screens/thread/thread.ios.js
@@ -85,7 +85,7 @@ export default class ThreadIOS extends ThreadBase {
             );
         } else {
             content = (
-                <Loading/>
+                <Loading color={theme.centerChannelColor}/>
             );
         }
 
diff --git a/app/screens/thread/thread_base.js b/app/screens/thread/thread_base.js
index 0aa3c357d7..c99683d5e3 100644
--- a/app/screens/thread/thread_base.js
+++ b/app/screens/thread/thread_base.js
@@ -106,13 +106,15 @@ export default class ThreadBase extends PureComponent {
     };
 
     renderFooter = () => {
-        if (!this.hasRootPost() && this.props.threadLoadingStatus.status !== RequestStatus.STARTED) {
+        const {theme, threadLoadingStatus} = this.props;
+
+        if (!this.hasRootPost() && threadLoadingStatus.status !== RequestStatus.STARTED) {
             return (
-                <DeletedPost theme={this.props.theme}/>
+                <DeletedPost theme={theme}/>
             );
-        } else if (this.props.threadLoadingStatus.status === RequestStatus.STARTED) {
+        } else if (threadLoadingStatus.status === RequestStatus.STARTED) {
             return (
-                <Loading/>
+                <Loading color={theme.centerChannelColor}/>
             );
         }