diff --git a/react/features/app/components/App.native.js b/react/features/app/components/App.native.js
index 30d544a68..e29720df6 100644
--- a/react/features/app/components/App.native.js
+++ b/react/features/app/components/App.native.js
@@ -10,7 +10,6 @@ import '../../mobile/audio-mode';
import '../../mobile/background';
import '../../mobile/external-api';
import '../../mobile/full-screen';
-import '../../mobile/network-activity';
import '../../mobile/permissions';
import '../../mobile/proximity';
import '../../mobile/wake-lock';
diff --git a/react/features/base/react/components/native/LoadingIndicator.js b/react/features/base/react/components/native/LoadingIndicator.js
new file mode 100644
index 000000000..f57f251f8
--- /dev/null
+++ b/react/features/base/react/components/native/LoadingIndicator.js
@@ -0,0 +1,24 @@
+/* @flow */
+
+import React, { Component } from 'react';
+import { ActivityIndicator } from 'react-native';
+
+/**
+ * Simple wrapper around React Native's {@code ActivityIndicator}, which
+ * displays an animated (large) loading indicator.
+ */
+export default class LoadingIndicator extends Component {
+ /**
+ * Implements React's {@link Component#render()}.
+ *
+ * @inheritdoc
+ * @returns {ReactElement}
+ */
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/react/features/base/react/components/native/index.js b/react/features/base/react/components/native/index.js
index 42d7e8783..97d794000 100644
--- a/react/features/base/react/components/native/index.js
+++ b/react/features/base/react/components/native/index.js
@@ -1,3 +1,4 @@
export { default as Container } from './Container';
export { default as Link } from './Link';
+export { default as LoadingIndicator } from './LoadingIndicator';
export { default as Text } from './Text';
diff --git a/react/features/mobile/network-activity/components/NetworkActivityIndicator.js b/react/features/mobile/network-activity/components/NetworkActivityIndicator.js
new file mode 100644
index 000000000..a9e07ffe7
--- /dev/null
+++ b/react/features/mobile/network-activity/components/NetworkActivityIndicator.js
@@ -0,0 +1,58 @@
+/* @flow */
+
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { LoadingIndicator } from '../../../base/react';
+
+/**
+ * The React Component which renders a progress indicator when there
+ * are ongoing network requests.
+ */
+class NetworkActivityIndicator extends Component {
+ /**
+ * NetworkActivityIndicator React Component's prop types.
+ *
+ * @static
+ */
+ static propTypes = {
+ /**
+ * Indicates whether there is network activity i.e. ongoing network
+ * requests.
+ *
+ * @private
+ */
+ _networkActivity: PropTypes.bool
+ };
+
+ /**
+ * Implements React's {@link Component#render()}.
+ *
+ * @inheritdoc
+ * @returns {ReactElement}
+ */
+ render() {
+ return this.props._networkActivity ? : null;
+ }
+}
+
+/**
+ * Maps (parts of) the redux state to the React Component props of
+ * NetworkActivityIndicator.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {{
+ * _networkActivity: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+ const { requests } = state['features/network-activity'];
+
+ return {
+ _networkActivity: Boolean(requests && requests.size)
+ };
+}
+
+export default connect(_mapStateToProps)(NetworkActivityIndicator);
diff --git a/react/features/mobile/network-activity/components/index.js b/react/features/mobile/network-activity/components/index.js
new file mode 100644
index 000000000..2039867c3
--- /dev/null
+++ b/react/features/mobile/network-activity/components/index.js
@@ -0,0 +1,3 @@
+export {
+ default as NetworkActivityIndicator
+} from './NetworkActivityIndicator';
diff --git a/react/features/mobile/network-activity/index.js b/react/features/mobile/network-activity/index.js
index 200d25492..daaa5d02a 100644
--- a/react/features/mobile/network-activity/index.js
+++ b/react/features/mobile/network-activity/index.js
@@ -1,2 +1,4 @@
+export * from './components';
+
import './middleware';
import './reducer';
diff --git a/react/features/welcome/components/BlankPage.native.js b/react/features/welcome/components/BlankPage.native.js
index 5414062dd..8de8063f3 100644
--- a/react/features/welcome/components/BlankPage.native.js
+++ b/react/features/welcome/components/BlankPage.native.js
@@ -2,10 +2,10 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import { ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import { destroyLocalTracks } from '../../base/tracks';
+import { NetworkActivityIndicator } from '../../mobile/network-activity';
import { isWelcomePageAppEnabled } from '../functions';
import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
@@ -23,14 +23,6 @@ class BlankPage extends Component {
* @static
*/
static propTypes = {
- /**
- * Indicates whether there is network activity i.e. ongoing network
- * requests.
- *
- * @private
- */
- _networkActivity: PropTypes.bool,
-
/**
* The indicator which determines whether WelcomePage is (to
* be) rendered.
@@ -58,15 +50,12 @@ class BlankPage extends Component {
* Implements React's {@link Component#render()}.
*
* @inheritdoc
- * @override
* @returns {ReactElement}
*/
render() {
return (
-
+
);
}
@@ -79,16 +68,11 @@ class BlankPage extends Component {
* @param {Object} state - The redux state.
* @private
* @returns {{
- * _networkActivity: boolean,
* _welcomePageEnabled: boolean
* }}
*/
function _mapStateToProps(state) {
- const { requests } = state['features/network-activity'];
-
return {
- _networkActivity:
- Boolean(requests && (requests.length || requests.size)),
_welcomePageEnabled: isWelcomePageAppEnabled(state)
};
}