Preparing FormField changing shadow props to secure-field

src/app/components/TextInput.js

@@ -7,35 +7,27 @@ import { Shadow } from "react-native-shadow-2";
 
 function AppTextInput({ icon, width = "100%", ...otherProps }) {
   return (
-    <Shadow
-      viewStyle={{ width: width, height: otherProps.numberOfLines * 24 }}
-      offset={[0, 3]}
-      distance={3}
-      radius={4}
-      startColor="rgba(0, 0, 0, 0.15)"
-      paintInside={true}
-    >
-      <View style={[styles.container, { width }]}>
-        {icon && (
-          <MaterialCommunityIcons
-            name={icon}
-            size={20}
-            color={defaultStyles.colors.medium}
-            style={styles.icon}
-          />
-        )}
-        <TextInput
-          style={defaultStyles.text}
-          placeholderTextColor={colors.medium}
-          {...otherProps}
+    <View style={[styles.container, { width }]}>
+      {icon && (
+        <MaterialCommunityIcons
+          name={icon}
+          size={20}
+          color={defaultStyles.colors.medium}
+          style={styles.icon}
         />
-      </View>
-    </Shadow>
+      )}
+      <TextInput
+        style={defaultStyles.text}
+        placeholderTextColor={colors.medium}
+        {...otherProps}
+      />
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
+    ...defaultStyles.shadow,
     backgroundColor: colors.white,
     borderRadius: 6,
     borderColor: colors.grayBG,

src/app/components/forms/FormField.js

@@ -6,30 +6,23 @@ import ErrorMessage from "./ErrorMessage";
 import { View, Text } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import colors from "../../config/colors";
-import { Shadow } from "react-native-shadow-2";
+import defaultStyles from "../../config/styles";
 
 function IncreaseDecreaseButtons({ content }) {
   return (
-    <Shadow
-      offset={[0, 3]}
-      distance={3}
-      radius={4}
-      startColor="rgba(0, 0, 0, 0.15)"
-      paintInside={true}
+    <View
+      style={{
+        ...defaultStyles.shadow,
+        backgroundColor: colors.primary,
+        width: 35,
+        height: 48,
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: 4,
+      }}
     >
-      <View
-        style={{
-          backgroundColor: colors.primary,
-          width: 35,
-          height: 48,
-          justifyContent: "center",
-          alignItems: "center",
-          borderRadius: 4,
-        }}
-      >
-        <Text style={{ color: "white", fontSize: 24 }}>{content}</Text>
-      </View>
-    </Shadow>
+      <Text style={{ color: "white", fontSize: 24 }}>{content}</Text>
+    </View>
   );
 }
 
@@ -48,11 +41,12 @@ function RenderPluviometerInput({
   }, [fieldVal]);
 
   const increase = () => {
-    (Number(fieldVal) + 1) <= 999 && setFieldVal((Number(fieldVal) + 1).toString());
+    Number(fieldVal) + 1 <= 999 &&
+      setFieldVal((Number(fieldVal) + 1).toString());
   };
 
   const decrease = () => {
-    (Number(fieldVal) - 1) >= 0 && setFieldVal((Number(fieldVal) - 1).toString());
+    Number(fieldVal) - 1 >= 0 && setFieldVal((Number(fieldVal) - 1).toString());
   };
 
   return (
@@ -63,11 +57,11 @@ function RenderPluviometerInput({
     >
       <View style={{ flex: 1, alignSelf: "stretch" }}>
         <TextInput
+          height={38}
           onBlur={() => setFieldTouched(name)}
           onChangeText={(val) => {
             setFieldVal(val);
           }}
-          width={width}
           value={fieldVal.toString()}
           {...otherProps}
         />
@@ -79,7 +73,6 @@ function RenderPluviometerInput({
         }}
         style={{
           paddingLeft: 4,
-          paddingBottom: 8,
           paddingRight: 1.5,
         }}
       >
@@ -92,7 +85,6 @@ function RenderPluviometerInput({
         }}
         style={{
           paddingLeft: 1.5,
-          paddingBottom: 8,
           paddingRight: 16,
         }}
       >
@@ -109,6 +101,7 @@ function AppFormField({
   flex = 0,
   paddingLeft = 16,
   paddingRight = 16,
+  numberOfLines = 1,
   ...otherProps
 }) {
   const {
@@ -130,6 +123,7 @@ function AppFormField({
       >
         {name != "pluviometer" ? (
           <TextInput
+            height={numberOfLines <= 1 ? 48 : 60}
             onBlur={() => setFieldTouched(name)}
             onChangeText={handleChange(name)}
             width={width}

src/app/config/styles.js

@@ -9,4 +9,17 @@ export default {
     fontSize: 18,
     fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",
   },
+  shadow: {
+    // IOS shadow config
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    // Android shadow config
+    elevation: 5,
+  },
 };

src/app/screens/ActivateInstitutionCode.js

@@ -40,7 +40,7 @@ function Header() {
   );
 }
 
-function Institution({ user, institutionRole }) {
+function Institution({ user }) {
   const institutionMap = {
     E: "Escola",
     D: "Defesa Civil",
@@ -81,7 +81,7 @@ function Institution({ user, institutionRole }) {
           size={30}
           color={colors.primary}
         />
-        <Text style={styles.subText}>{roleMap[user.role]}</Text>
+        <Text style={styles.subText}>{roleMap[user?.roles[0]]}</Text>
       </View>
     </View>
   );
@@ -110,7 +110,7 @@ function ValidateCode({ user }) {
           flex={1}
           maxLength={36}
           name="code"
-          numberOfLines={2}
+          // numberOfLines={1}
           placeholder="Digite o código de ativação"
         />
       </View>

src/app/screens/LoginScreen.js

@@ -119,7 +119,6 @@ export default function LoginScreen(props) {
               maxLength={12}
               name="name"
               keyboardType="numeric"
-              numberOfLines={2}
               placeholder="Número de telefone celular"
             />
           </View>
@@ -129,7 +128,6 @@ export default function LoginScreen(props) {
               maxLength={12}
               name="password"
               secureTextEntry={true}
-              numberOfLines={2}
               placeholder="Senha"
             />
           </View>

src/app/screens/PluviometerSharingDataScreen.js

@@ -68,7 +68,7 @@ function PluviometerSharingDataScreen(props) {
           <FormField
             keyboardType="number-pad"
             maxLength={200}
-            numberOfLines={2}
+            numberOfLines={1}
             name="pluviometer"
             placeholder="Quantidade de chuva"
             increaseDecreaseButtons={true}

src/app/screens/RegisterScreen.js

@@ -386,7 +386,6 @@ export default function RegisterScreen(props) {
                 flex={1}
                 maxLength={40}
                 name="name"
-                numberOfLines={2}
                 placeholder="Digite o apelido de usuário"
               />
             </View>
@@ -397,7 +396,6 @@ export default function RegisterScreen(props) {
                 flex={1}
                 maxLength={12}
                 name="number"
-                numberOfLines={2}
                 placeholder="Digite o número de telefone celular"
                 paddingRight={2}
               />
@@ -410,7 +408,6 @@ export default function RegisterScreen(props) {
                 maxLength={12}
                 name="password"
                 secureTextEntry={true}
-                numberOfLines={2}
                 placeholder="Digite a senha"
                 paddingRight={2}
               />
@@ -423,7 +420,6 @@ export default function RegisterScreen(props) {
                 maxLength={12}
                 name="confirmPassword"
                 secureTextEntry={true}
-                numberOfLines={2}
                 placeholder="Repita a senha"
                 paddingRight={2}
               />
@@ -468,7 +464,6 @@ export default function RegisterScreen(props) {
                 flex={1}
                 maxLength={12}
                 name="institutionName"
-                numberOfLines={2}
                 placeholder="Digite o nome da instituição"
                 paddingRight={2}
               />
@@ -494,7 +489,6 @@ export default function RegisterScreen(props) {
                 flex={1}
                 maxLength={255}
                 name="secQuestionAns"
-                numberOfLines={2}
                 placeholder="Degite a resposta à pergunta"
                 paddingRight={2}
                 paddingLeft={2}

src/app/screens/SharingFloodZonesScreen.js

@@ -123,7 +123,7 @@ function SharingFloodZonesScreen(props) {
             maxLength={255}
             multiline
             name="description"
-            numberOfLines={3}
+            numberOfLines={2}
             placeholder="Escreva um comentário (Opcional)..."
           />