Refactor to using RNP & UI Updates.

components/screen-sign-in/screen-sign-in.component.jsx

@@ -1,7 +1,8 @@
 import { Formik } from "formik";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, Image, StyleSheet, View, Text } from "react-native";
+import { Image, StyleSheet, Text, View } from "react-native";
+import { Button, TextInput, Title } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import Logo from "../../assets/logo192.png";
@@ -11,8 +12,6 @@ import {
   selectSigningIn,
 } from "../../redux/user/user.selectors";
 import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component";
-import styles from "../styles";
-import { TextInput, Button, Subheading } from "react-native-paper";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -33,41 +32,46 @@ export function SignIn({ emailSignInStart, signingIn }) {
   };
 
   return (
-    <View
-      scrollEnabled={false}
-      contentContainerStyle={styles.contentContainer__centered}
-      style={localStyles.content}
-    >
-      <View style={styles.evenlySpacedRow}>
+    <View style={localStyles.content}>
+      <View
+        style={{
+          display: "flex",
+
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-evenly",
+        }}
+      >
         <Image style={localStyles.logo} source={Logo} />
-        <Text>{t("app.title")}</Text>
+        <Title>{t("app.title")}</Title>
       </View>
       <Formik initialValues={{ email: "", password: "" }} onSubmit={formSubmit}>
         {({ handleChange, handleBlur, handleSubmit, values }) => (
           <View>
-            <View>
-              <Subheading>{t("signin.fields.email")}</Subheading>
-              <TextInput
-                autoCapitalize="none"
-                keyboardType="email-address"
-                onChangeText={handleChange("email")}
-                onBlur={handleBlur("email")}
-                value={values.email}
-              />
-            </View>
-            <View>
-              <Subheading>{t("signin.fields.password")}</Subheading>
-              <TextInput
-                secureTextEntry={true}
-                onChangeText={handleChange("password")}
-                onBlur={handleBlur("password")}
-                value={values.password}
-              />
-            </View>
+            <TextInput
+              label={t("signin.fields.email")}
+              mode="outlined"
+              autoCapitalize="none"
+              keyboardType="email-address"
+              onChangeText={handleChange("email")}
+              onBlur={handleBlur("email")}
+              value={values.email}
+              style={[localStyles.input]}
+            />
+
+            <TextInput
+              label={t("signin.fields.password")}
+              mode="outlined"
+              secureTextEntry={true}
+              onChangeText={handleChange("password")}
+              onBlur={handleBlur("password")}
+              value={values.password}
+              style={[localStyles.input]}
+            />
+
             <SignInErrorAlertComponent />
-            <Button full onPress={handleSubmit}>
+            <Button mode="outlined" loading={signingIn} onPress={handleSubmit}>
               <Text>{t("signin.actions.signin")}</Text>
-              {signingIn ? <ActivityIndicator size="large" /> : null}
             </Button>
           </View>
         )}
@@ -78,9 +82,13 @@ export function SignIn({ emailSignInStart, signingIn }) {
 
 const localStyles = StyleSheet.create({
   content: {
-    paddingBottom: 200,
+    display: "flex",
+    flex: 1,
   },
   logo: { width: 100, height: 100 },
+  input: {
+    margin: 12,
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(SignIn);