Lightening shadows and adjusting component size in the user registration screen

src/app/components/SearchablePicker.js

@@ -65,10 +65,10 @@ function SearchablePicker({
   return (
     <View style={styles.location}>
       <Shadow
-        offset={[0, 4]}
-        distance={4}
+        offset={[0, 3]}
+        distance={3}
         radius={4}
-        startColor="rgba(0, 0, 0, 0.25)"
+        startColor="rgba(0, 0, 0, 0.15)"
         paintInside={true}
       >
         <DropDown
@@ -89,8 +89,8 @@ const styles = StyleSheet.create({
   location: {
     flex: 1,
     alignSelf: "flex-start",
-    marginRight: 12,
-    marginLeft: 12,
+    marginRight: 2,
+    marginLeft: 16,
   },
 });
 

src/app/components/TextInput.js

@@ -8,11 +8,11 @@ import { Shadow } from "react-native-shadow-2";
 function AppTextInput({ icon, width = "100%", ...otherProps }) {
   return (
     <Shadow
-      viewStyle={{ width: width, height: otherProps.numberOfLines * 21 }}
-      offset={[0, 4]}
-      distance={4}
+      viewStyle={{ width: width, height: otherProps.numberOfLines * 24 }}
+      offset={[0, 3]}
+      distance={3}
       radius={4}
-      startColor="rgba(0, 0, 0, 0.25)"
+      startColor="rgba(0, 0, 0, 0.15)"
       paintInside={true}
     >
       <View style={[styles.container, { width }]}>
@@ -41,6 +41,7 @@ const styles = StyleSheet.create({
     borderColor: colors.grayBG,
     borderWidth: 1,
     padding: 5,
+    paddingLeft: 12,
   },
   icon: {
     marginRight: 10,

src/app/components/forms/FormField.js

@@ -11,10 +11,10 @@ import { Shadow } from "react-native-shadow-2";
 function IncreaseDecreaseButtons({ content }) {
   return (
     <Shadow
-      offset={[0, 4]}
-      distance={4}
+      offset={[0, 3]}
+      distance={3}
       radius={4}
-      startColor="rgba(0, 0, 0, 0.25)"
+      startColor="rgba(0, 0, 0, 0.15)"
       paintInside={true}
     >
       <View
@@ -75,7 +75,7 @@ function RenderPluviometerInput({
 
       <TouchableOpacity
         onPress={() => {
-          increase();
+          decrease();
         }}
         style={{
           paddingLeft: 4,
@@ -83,12 +83,12 @@ function RenderPluviometerInput({
           paddingRight: 1.5,
         }}
       >
-        <IncreaseDecreaseButtons content={"+"} />
+        <IncreaseDecreaseButtons content={"-"} />
       </TouchableOpacity>
 
       <TouchableOpacity
         onPress={() => {
-          decrease();
+          increase();
         }}
         style={{
           paddingLeft: 1.5,
@@ -96,7 +96,7 @@ function RenderPluviometerInput({
           paddingRight: 16,
         }}
       >
-        <IncreaseDecreaseButtons content={"-"} />
+        <IncreaseDecreaseButtons content={"+"} />
       </TouchableOpacity>
     </View>
   );
@@ -107,6 +107,8 @@ function AppFormField({
   width,
   increaseDecreaseButtons = false,
   flex = 0,
+  paddingLeft = 16,
+  paddingRight = 16,
   ...otherProps
 }) {
   const {
@@ -122,8 +124,8 @@ function AppFormField({
     <View flex={flex}>
       <View
         style={{
-          paddingLeft: 16,
-          paddingRight: increaseDecreaseButtons ? 0 : 16,
+          paddingLeft: paddingLeft,
+          paddingRight: increaseDecreaseButtons ? 0 : paddingRight,
         }}
       >
           {name != "pluviometer" ? (

src/app/screens/RegisterScreen.js

@@ -50,23 +50,23 @@ function LocalDatePicker({ date, setDate, _moment }) {
         minimumDate={new Date(moment().subtract(110, "year"))}
         date={date}
       >
-        <View style={[styles.dateInput, { flex: 1, marginRight: 12 }]}>
+        <View style={[styles.dateInput, { flex: 1, paddingRight: 2 }]}>
           <Shadow
-            offset={[0, 4]}
-            distance={4}
+            offset={[0, 3]}
+            distance={3}
             radius={4}
-            startColor="rgba(0, 0, 0, 0.25)"
+            startColor="rgba(0, 0, 0, 0.15)"
             paintInside={true}
-            viewStyle={{ width: "100%", height: 42 }}
+            viewStyle={{ width: "100%", height: 48 }}
           >
             <View
               style={{
-                paddingLeft: 8,
+                paddingLeft: 12,
                 backgroundColor: colors.white,
-                height: 42,
+                height: 48,
                 borderColor: colors.grayBG,
                 borderWidth: 1,
-                borderRadius: 5,
+                borderRadius: 4,
                 flexDirection: "row",
                 alignItems: "center",
               }}
@@ -107,6 +107,26 @@ function GenderPicker({ value, setValue }) {
   );
 }
 
+function InstitutionPicker({ value, setValue }) {
+  const [items, setItems] = useState([
+    { value: "Escola", label: "Escola" },
+    { value: "Defesa civil", label: "Defesa civil" },
+    { value: "Não governamental", label: "Não governamental" },
+    { value: "Outra", label: "Outra" },
+    { value: "Nenhuma", label: "Nenhuma" },
+  ]);
+  return (
+    <SearchablePicker
+      value={value}
+      setValue={setValue}
+      items={items}
+      setItems={setItems}
+      formPlaceholder={"Seleciona o tipo da instituição"}
+      searchPlaceholder={"Busca..."}
+    />
+  );
+}
+
 function StatePicker({ value, setValue }) {
   const [items, setItems] = useState(states);
   return (
@@ -122,11 +142,9 @@ function StatePicker({ value, setValue }) {
 }
 
 function CityPicker({ value, setValue, state }) {
-  console.log(state)
-  
   useEffect(() => {
-    state && setItems(statesToCities[state].cities)
-  }, [state])
+    state && setItems(statesToCities[state].cities);
+  }, [state]);
 
   const [items, setItems] = useState([]);
   return (
@@ -136,7 +154,11 @@ function CityPicker({ value, setValue, state }) {
       items={items}
       setItems={setItems}
       formPlaceholder={"Selecione a sua cidade"}
-      nothingToShow={state ? "Não encontramos nada com esse termo" : "Selecione o Estado primeiro"}
+      nothingToShow={
+        state
+          ? "Não encontramos nada com esse termo"
+          : "Selecione o Estado primeiro"
+      }
       searchPlaceholder={"Busca..."}
     />
   );
@@ -146,6 +168,8 @@ export default function RegisterScreen(props) {
   const [gender, setGender] = useState("");
   const [state, setState] = useState("");
   const [city, setCity] = useState("");
+  const [institution, setInstitution] = useState("");
+  const [secQuestion, setSecQuestion] = useState("");
 
   const _moment = moment();
   const [date, setDate] = useState(_moment);
@@ -169,6 +193,7 @@ export default function RegisterScreen(props) {
           confirmPassword: "",
           state: "",
           gender: "",
+          institutionName: "",
         }}
         onSubmit={({ name, number, password, confirmPassword }) => {
           comparePassword(password, confirmPassword);
@@ -189,6 +214,7 @@ export default function RegisterScreen(props) {
                 color={colors.primary}
               />
               <FormField
+                paddingRight={2}
                 flex={1}
                 maxLength={12}
                 name="name"
@@ -201,7 +227,7 @@ export default function RegisterScreen(props) {
             <View style={styles.iconField}>
               <MaterialCommunityIcons
                 name="phone"
-                size={24}
+                size={25}
                 color={colors.primary}
               />
               <FormField
@@ -210,6 +236,7 @@ export default function RegisterScreen(props) {
                 name="number"
                 numberOfLines={2}
                 placeholder="Número de telefone celular"
+                paddingRight={2}
               />
             </View>
 
@@ -227,6 +254,7 @@ export default function RegisterScreen(props) {
                 secureTextEntry={true}
                 numberOfLines={2}
                 placeholder="Senha"
+                paddingRight={2}
               />
             </View>
 
@@ -244,6 +272,7 @@ export default function RegisterScreen(props) {
                 secureTextEntry={true}
                 numberOfLines={2}
                 placeholder="Repetir a senha"
+                paddingRight={2}
               />
             </View>
             <ErrorMessage
@@ -251,11 +280,11 @@ export default function RegisterScreen(props) {
               visible={singUpFailed}
             />
 
-            <Text style={styles.labelStyle}>Data de nascimento</Text>
+            <Text style={styles.labelStyle}>Data de nascimento:</Text>
             <View style={styles.iconField}>
               <MaterialCommunityIcons
                 name="calendar-today"
-                size={30}
+                size={25}
                 color={colors.primary}
               />
               <LocalDatePicker
@@ -295,7 +324,39 @@ export default function RegisterScreen(props) {
               <CityPicker value={city} setValue={setCity} state={state} />
             </View>
 
+            <Text style={styles.labelStyle}>Tipo de instituição:</Text>
+            <View style={[styles.iconField]}>
+              <MaterialCommunityIcons
+                name="bank"
+                size={25}
+                color={colors.primary}
+              />
+              <InstitutionPicker
+                value={institution}
+                setValue={setInstitution}
+              />
+            </View>
+
+            <Text style={styles.labelStyle}>Nome da instituição</Text>
+
+            <View style={styles.iconField}>
+              <MaterialCommunityIcons
+                name="bank"
+                size={25}
+                color={colors.primary}
+              />
+              <FormField
+                flex={1}
+                maxLength={12}
+                name="institutionName"
+                numberOfLines={2}
+                placeholder="Digite o nome da instituição"
+                paddingRight={2}
+              />
+            </View>
+
             <SubmitButton
+              flex={1}
               title="cadastrar"
               backgroundColor={colors.primary}
               marginTop={10}
@@ -341,8 +402,6 @@ const styles = StyleSheet.create({
     marginBottom: 24,
   },
   dateInput: {
-    paddingLeft: 12,
-    // flexDirection: "column",
-    // justifyContent: "center",
+    paddingLeft: 16,
   },
 });