Melhorando o components/LoaderComponent.js

src/components/LoaderComponent.js

 import React from 'react';
-import { ActivityIndicator } from 'react-native';
+import { ActivityIndicator, StyleSheet } from 'react-native';
 import colors from '../constants/colors';
 
-export default function LoaderComponent({ color }) {
-  return <ActivityIndicator size={100} color={color} />;
+export default function LoaderComponent({ color, isActivityIndicator }) {
+  return isActivityIndicator ? (
+    <ActivityIndicator size={100} color={color} />
+  ) : (
+    <View style={loaderStyles.loader}>
+      <ActivityIndicator size={100} color="#FFF" />
+    </View>
+  );
 }
+
+const loaderStyles = StyleSheet.create({
+  loader: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: colors.primary,
+    justifyContent: 'center',
+  },
+});

src/screens/AppSelectionScreen.js

@@ -18,23 +18,6 @@ import LoaderComponent from '../components/LoaderComponent';
 import APPS from '../constants/apps';
 import { updateInstalledApps } from '../api';
 
-function LoaderScreen() {
-  const loaderStyles = StyleSheet.create({
-    loader: {
-      flex: 1,
-      alignItems: 'center',
-      backgroundColor: colors.primary,
-      justifyContent: 'center',
-    },
-  });
-
-  return (
-    <View style={loaderStyles.loader}>
-      <LoaderComponent color="#FFF" />
-    </View>
-  );
-}
-
 export default function AppSelectionScreen({ navigation, route }) {
   const [isLoading, setIsLoading] = React.useState(false);
   const [appsInstalled, setAppInstalled] = useState(
@@ -70,7 +53,7 @@ export default function AppSelectionScreen({ navigation, route }) {
   }
 
   return isLoading ? (
-    <LoaderScreen />
+    <LoaderComponent isActivityIndicator="false" />
   ) : (
     <View style={styles.screen}>
       <HeaderComponent

src/screens/AppoioStepScreen.js

@@ -16,23 +16,6 @@ import StepComponent from '../components/StepComponent';
 import { registerAppoio } from '../api';
 import colors from '../constants/colors';
 
-function LoaderScreen() {
-  const loaderStyles = StyleSheet.create({
-    loader: {
-      flex: 1,
-      alignItems: 'center',
-      backgroundColor: colors.primary,
-      justifyContent: 'center',
-    },
-  });
-
-  return (
-    <View style={loaderStyles.loader}>
-      <LoaderComponent color="#FFF" />
-    </View>
-  );
-}
-
 export default function AppoioStepScreen({ route, navigation }) {
   const [isLoading, setIsLoading] = React.useState(false);
   const [steps, setSteps] = React.useState([
@@ -123,7 +106,7 @@ export default function AppoioStepScreen({ route, navigation }) {
   }
 
   return isLoading ? (
-    <LoaderScreen />
+    <LoaderComponent isActivityIndicator="false" />
   ) : (
     <View style={styles.screen}>
       <Header

src/screens/CreateAccountScreen.js

@@ -26,23 +26,6 @@ import ButtonGroupComponent from '../components/ButtonGroupComponent';
 import Icon from 'react-native-vector-icons/Feather';
 import api from '../api';
 
-function LoaderScreen() {
-  const loaderStyles = StyleSheet.create({
-    loader: {
-      flex: 1,
-      alignItems: 'center',
-      backgroundColor: colors.primary,
-      justifyContent: 'center',
-    },
-  });
-
-  return (
-    <View style={loaderStyles.loader}>
-      <LoaderComponent color="#FFF" />
-    </View>
-  );
-}
-
 export default function CreateAccountScreen({ navigation }) {
   const [chosenOptionState, setChosenOptionState] = useState(null);
   const [chosenOptionYear, setChosenOptionYear] = useState(null);
@@ -142,7 +125,7 @@ export default function CreateAccountScreen({ navigation }) {
   };
 
   return isLoading ? (
-    <LoaderScreen />
+    <LoaderComponent isActivityIndicator="false" />
   ) : (
     <View style={styles.screen}>
       <Header

src/screens/CuradoriaScreen.js

@@ -50,7 +50,7 @@ export default function CuradoriaScreen({ navigation }) {
       </HeaderComponent>
       <BodyComponent>
         {isLoading ? (
-          <LoaderComponent color={colors.primary} />
+          <LoaderComponent color={colors.primary} isActivityIndicator="true" />
         ) : tutorials.length > 0 ? (
           tutorials.map(tutorial => (
             <TutorialCard

src/screens/LoginScreen.js

@@ -26,23 +26,6 @@ import ButtonComponent from '../components/ButtonComponent';
 import FooterComponent from '../components/FooterComponent';
 import LoaderComponent from '../components/LoaderComponent';
 
-function LoaderScreen() {
-  const loaderStyles = StyleSheet.create({
-    loader: {
-      flex: 1,
-      alignItems: 'center',
-      backgroundColor: colors.primary,
-      justifyContent: 'center',
-    },
-  });
-
-  return (
-    <View style={loaderStyles.loader}>
-      <LoaderComponent color="#FFF" />
-    </View>
-  );
-}
-
 export default function LoginScreen({ navigation }) {
   const [email, setEmail] = useState(null);
   const [password, setPassword] = useState(null);
@@ -96,7 +79,7 @@ export default function LoginScreen({ navigation }) {
   }
 
   return isLoading ? (
-    <LoaderScreen />
+    <LoaderComponent isActivityIndicator="false" />
   ) : (
     <ScrollView style={styles.screen}>
       <Header large>