Sharing data Screen - layout

src/app/screens/SharingDataScreen.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import * as Yup from "yup";
 
 import {
@@ -12,98 +12,65 @@ import CategoryPickerItem from "../components/CategoryPickerItem";
 import Screen from "../components/Screen";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import useLocation from "../hooks/useLocation";
-
-const validationSchema = Yup.object().shape({
-  title: Yup.string().required().min(1).label("Title"),
-  price: Yup.number().required().min(1).max(10000).label("Price"),
-  description: Yup.string().label("Description"),
-  category: Yup.object().required().nullable().label("Category"),
-  images: Yup.array().min(1, "Please select at least one image."),
-});
-
-const categories = [
-    {
-        backgroundColor: "#2e53ff",
-        icon: "wave",
-        label: "Pontos de alagamento",
-        value: 1,
-      },
-      {
-        backgroundColor: "#2e53ff",
-        icon: "weather-pouring",
-        label: "Chuva",
-        value: 2,
-      },
-      {
-        backgroundColor: "#2e53ff",
-        icon: "waves",
-        label: "Diário do pluviômetro",
-        value: 3,
-      },
-      {
-        backgroundColor: "#2e53ff",
-        icon: "waves",
-        label: "Diário do pluviômetro",
-        value: 3,
+import { Image, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+//1/3
+const styles = StyleSheet.create({
+  container:{
+    paddingTop:50,
   },
-      {
-        backgroundColor: "#2e53ff",
-        icon: "water-percent",
-        label: "Nível do rio",
-        value: 4,
+  rainLogo: {
+    width: 110,
+    height:100,
+    margin:30,
   },
-];
+  floodingLogo: {
+    width: 85,
+    height:85,
+    marginTop: 70,
 
-function SharingDataScreen() {
-  const location = useLocation();
+  },
+})
 
+const SharingDataScreen = () => {
   return(
-    <Screen style={styles.container}>
-      <Form
-        initialValues={{
-          title: "",
-          price: "",
-          description: "",
-          category: null,
-          images: [],
-        }}
-        onSubmit={(values) => console.log(location)}
-        validationSchema={validationSchema}
-      >
-        <FormImagePicker name="images" />
-        <FormField maxLength={255} name="title" placeholder="Título" />
-        <FormField
-          keyboardType="numeric"
-          maxLength={8}
-          name="price"
-          placeholder="Valor"
-          width={120}
+    <View style={styles.container}>      
+      <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray'}}>
+        Enviar uma informação
+      </Text>
+      
+      <View style={{flexDirection:'row', justifyContent: 'space-around'}}>
+        <Image
+          style = {styles.floodingLogo}
+          source={require("../assets/pontos_alagamento_peq.png")}
         />
-        <Picker
-          items={categories}
-          name="category"
-          numberOfColumns={3}
-          PickerItemComponent={CategoryPickerItem}
-          placeholder="Categoria"
-          width="50%"
+        <Image
+          style = {styles.floodingLogo}
+          source={require("../assets/chuva_peq.png")}
+        />
+      </View>
+      <View style={{flexDirection:'row'}}>
+        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 50}}>Pontos de {"\n"}alagamento</Text>
+        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 130}}>Chuva</Text>
+      </View>
+
+      <View style={{flexDirection:'row', justifyContent: 'space-around'}}>
+        <Image
+          style = {styles.floodingLogo}
+          source={require("../assets/diario_pluviometrico.png")}
         />
-        <FormField
-          maxLength={255}
-          multiline
-          name="description"
-          numberOfLines={3}
-          placeholder="Descrição"
+        <Image    
+          style = {styles.floodingLogo}
+          source={require("../assets/nivel_rio.png")}
         />
-        <SubmitButton title="Post" />
-      </Form>
-    </Screen>
+      </View>      
+      <View style={{flexDirection:'row', justifyContent: 'space-around'}}>
+        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Diário do{"\n"}pluviômetro</Text>
+        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Nível de água {"\n"}no rio</Text>
+      </View>
+    </View>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    padding: 10,
-  },
-});
 
 export default SharingDataScreen;