Refactor to using RNP & UI Updates.

components/screen-splash/screen-splash.component.jsx

@@ -1,29 +1,35 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Image, StyleSheet, View } from "react-native";
-import { BarIndicator } from "react-native-indicators";
+import { ActivityIndicator, Image, StyleSheet, View } from "react-native";
 import { Title } from "react-native-paper";
 import Logo from "../../assets/logo192.png";
-import styles from "../styles";
 
 export default function ScreenSplash() {
   const { t } = useTranslation();
   return (
-    <View
-      contentContainerStyle={[
-        styles.contentContainer__centered,
-        localStyles.middleAlign,
-      ]}
-    >
-      <Image style={localStyles.logo} source={Logo} />
-      <Title>{t("app.title")}</Title>
-      <BarIndicator count={5} color="dodgerblue" />
+    <View style={[localStyles.container]}>
+      <View style={[localStyles.logoContainer]}>
+        <Image style={localStyles.logo} source={Logo} />
+        <Title>{t("app.title")}</Title>
+      </View>
+
+      <ActivityIndicator color="dodgerblue" size="large" />
     </View>
   );
 }
 const localStyles = StyleSheet.create({
-  middleAlign: {
+  container: {
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+    alignContent: "center",
+    justifyContent: "center",
+  },
+  logoContainer: {
+    display: "flex",
+    flexDirection: "column",
+
     alignItems: "center",
   },
-  logo: { width: 100, height: 100, margin: 20 },
+  logo: { width: 175, height: 175, margin: 20 },
 });