Screen: Rain sharing data

src/App.js

@@ -8,13 +8,15 @@ import openDatabase from "./app/database/database-connection";
 
 import SharingFloodZonesScreen from "./app/screens/SharingFloodZonesScreen";
 import initDatabase from "./app/database/database-init";
+import RainSharingDataScreen from "./app/screens/RainSharingDataScreen";
 
 export default function App() {
   global.userDataBase = openDatabase();
   initDatabase(global.userDataBase);
 
   return (
-    // <SharingFloodZonesScreen />
+    //<SharingFloodZonesScreen />
+    //<RainSharingDataScreen/>
     <NavigationContainer theme={navigationTheme}>
       <AppNavigator />
     </NavigationContainer>

src/app/navigation/RainSharingDataNavigator.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { Platform, StyleSheet, Text, View, YellowBox } from 'react-native';
+import { createStackNavigator } from 'react-navigation';
+import RainSharingDataScreen from '../screens/RainSharingDataScreen';
+import SharingDataScreen from '../screens/SharingDataScreen';
+
+const RootStack = createStackNavigator(
+    {
+    Home: { screen: SharingDataScreen },
+    Profile: { screen: RainSharingDataScreen },
+    },
+    {
+    initialRouteName: 'SharingData',
+    }
+    );
+    export default class App extends Component {
+    render() {
+    return <RootStack />;
+    }
+    }

src/app/screens/RainSharingDataScreen.js

@@ -0,0 +1,125 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import * as Yup from "yup";
+
+import {
+  Form,
+  FormField,
+  FormPicker as Picker,
+  SubmitButton,
+} from "../components/forms";
+import CategoryPickerItem from "../components/CategoryPickerItem";
+import Screen from "../components/Screen";
+import FormImagePicker from "../components/forms/FormImagePicker";
+import useLocation from "../hooks/useLocation";
+import { Image, Text, TouchableOpacity } from 'react-native';
+//1/3
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 50,
+  },
+  rainLogo: {
+    width: 110,
+    height: 100,
+    margin: 30,
+  },
+  floodingLogo: {
+    width: 85,
+    height: 85,
+    marginTop: 30,
+
+  },
+})
+
+const validationSchema = Yup.object().shape({
+  images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
+  description: Yup.string()
+    .label("Description")
+    .required("Por favor, forneça uma descrição"),
+});
+
+const RainSharingDataScreen = ({ navigation }) => {
+  return (
+    <Screen style={styles.container}>
+      <Form
+        initialValues={{
+          title: "",
+          price: "",
+          description: "",
+          category: null,
+          images: [],
+        }}
+        onSubmit={(values) => console.log("submissao")}
+        validationSchema={validationSchema}
+      >
+        <View>
+          <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray' }}>
+            Enviar uma informação
+          </Text>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+
+            <View style={{ alignItems: 'center' }}>
+              <Image
+                style={styles.floodingLogo}
+                source={require("../assets/sem_chuva.png")}
+              />
+              <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Sem chuva</Text>
+            </View>
+
+            <View style={{ alignItems: 'center' }}>
+              <Image
+                style={styles.floodingLogo}
+                source={require("../assets/chuva_peq.png")}
+              />
+              <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva fraca</Text>
+            </View>
+
+            <TouchableOpacity style={{ alignItems: 'center' }}>
+              <Image
+                style={styles.floodingLogo}
+                source={require("../assets/chuva_peq.png")}
+              />
+              <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva{"\n"}moderada</Text>
+            </TouchableOpacity>
+          </View>
+          <View style={{ flexDirection: 'row' }}>
+
+          </View>
+
+          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+            <View style={{ alignItems: 'center' }}>
+              <Image
+                style={styles.floodingLogo}
+                source={require("../assets/chuva_forte.png")}
+              />
+              <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva forte</Text>
+            </View>
+
+            <View style={{ alignItems: 'center' }}>
+              <Image
+                style={styles.floodingLogo}
+                source={require("../assets/chuva_muito_forte.png")}
+              />
+              <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva muito{"\n"}forte</Text>
+            </View>
+
+            <View style={{ alignContent: 'center' }}>
+              <Image
+                style={styles.floodingLogo}
+                source={require("../assets/chuva_pancadas.png")}
+              />
+              <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pancada de{"\n"}chuva</Text>
+            </View>
+          </View>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+
+          </View>
+        </View>
+        
+        <FormImagePicker backgroundColor="blue" name="images"/>
+      </Form>
+    </Screen>
+  );
+}
+
+export default RainSharingDataScreen;

src/app/screens/SharingDataScreen.js

@@ -12,8 +12,7 @@ import CategoryPickerItem from "../components/CategoryPickerItem";
 import Screen from "../components/Screen";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import useLocation from "../hooks/useLocation";
-import { Image, Text } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import { Image, Text, TouchableOpacity} from 'react-native';
 //1/3
 const styles = StyleSheet.create({
   container:{
@@ -31,27 +30,37 @@ const styles = StyleSheet.create({
 
   },
 })
-
-const SharingDataScreen = () => {
+class SharingDataScreen extends React.Component {
+  static navigationOptions = {
+  title: "SharingDataScreen",
+  headerStyle: {
+  backgroundColor: "#73C6B6"
+  }
+  };
+  render() {
   return(
     <View style={styles.container}>      
       <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray'}}>
         Enviar uma informação
       </Text>
-      
       <View style={{flexDirection:'row', justifyContent: 'space-around'}}>
+
+      <TouchableOpacity>
         <Image
           style = {styles.floodingLogo}
           source={require("../assets/pontos_alagamento_peq.png")}
         />
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => this.props.navigation.navigate("RainSharingData")}>
         <Image
           style = {styles.floodingLogo}
           source={require("../assets/chuva_peq.png")}
         />
+        </TouchableOpacity>
       </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>
+        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 110}}>Chuva</Text>
       </View>
 
       <View style={{flexDirection:'row', justifyContent: 'space-around'}}>
@@ -71,6 +80,6 @@ const SharingDataScreen = () => {
     </View>
   );
 }
-
+}
 
 export default SharingDataScreen;