Moved loading screen in own component

components/Amicale/AuthenticatedScreen.js

@@ -1,11 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {View} from "react-native";
-import {ActivityIndicator, withTheme} from 'react-native-paper';
+import {withTheme} from 'react-native-paper';
 import ConnectionManager, {ERROR_TYPE} from "../../managers/ConnectionManager";
 import NetworkErrorComponent from "../Custom/NetworkErrorComponent";
 import i18n from 'i18n-js';
+import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 
 type Props = {
     navigation: Object,
@@ -71,32 +71,6 @@ class AuthenticatedScreen extends React.Component<Props, State> {
         this.setState({loading: false});
     }
 
-    /**
-     * Gets the loading indicator
-     *
-     * @return {*}
-     */
-    getRenderLoading() {
-        return (
-            <View style={{
-                backgroundColor: this.colors.background,
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: '100%',
-                height: '100%',
-                flex: 1,
-                alignItems: 'center',
-                justifyContent: 'center'
-            }}>
-                <ActivityIndicator
-                    animating={true}
-                    size={'large'}
-                    color={this.colors.primary}/>
-            </View>
-        );
-    }
-
     getErrorRender() {
         let message;
         let icon;
@@ -128,7 +102,7 @@ class AuthenticatedScreen extends React.Component<Props, State> {
     render() {
         return (
             this.state.loading
-                ? this.getRenderLoading()
+                ? <BasicLoadingScreen/>
                 : (this.data !== undefined
                 ? this.props.renderFunction(this.data)
                 : this.getErrorRender())

components/Custom/BasicLoadingScreen.js

@@ -0,0 +1,35 @@
+// @flow
+
+import * as React from 'react';
+import {ActivityIndicator, withTheme} from 'react-native-paper';
+import {View} from "react-native";
+
+/**
+ * Component used to display a header button
+ *
+ * @param props Props to pass to the component
+ * @return {*}
+ */
+function BasicLoadingScreen(props) {
+    const {colors} = props.theme;
+    return (
+        <View style={{
+            backgroundColor: colors.background,
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            width: '100%',
+            height: '100%',
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center'
+        }}>
+            <ActivityIndicator
+                animating={true}
+                size={'large'}
+                color={colors.primary}/>
+        </View>
+    );
+}
+
+export default withTheme(BasicLoadingScreen);

components/Screens/WebViewScreen.js

@@ -1,10 +1,10 @@
 // @flow
 
 import * as React from 'react';
-import {View} from 'react-native';
 import WebView from "react-native-webview";
-import {ActivityIndicator, withTheme} from 'react-native-paper';
+import {withTheme} from 'react-native-paper';
 import HeaderButton from "../Custom/HeaderButton";
+import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 
 type Props = {
     navigation: Object,
@@ -88,24 +88,7 @@ class WebViewScreen extends React.PureComponent<Props> {
      * @return {*}
      */
     getRenderLoading() {
-        return (
-            <View style={{
-                backgroundColor: this.colors.background,
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: '100%',
-                height: '100%',
-                flex: 1,
-                alignItems: 'center',
-                justifyContent: 'center'
-            }}>
-                <ActivityIndicator
-                    animating={true}
-                    size={'large'}
-                    color={this.colors.primary}/>
-            </View>
-        );
+        return <BasicLoadingScreen/>;
     }
 
     render() {