Navigation to RainSharingDataScreen and FloodSharingDataScreen

src/App.js

@@ -9,14 +9,17 @@ 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";
+import RainSharingDataNavigator from "./app/navigation/RainSharingDataNavigator";
+import PluviometerSharingDataScreen from "./app/screens/PluviometerSharingDataScreen";
 
 export default function App() {
   global.userDataBase = openDatabase();
   initDatabase(global.userDataBase);
 
   return (
-    //<SharingFloodZonesScreen />
+    //<SharingFloodZonesScreen/>
     //<RainSharingDataScreen/>
+    //<PluviometerSharingDataScreen/>
     <NavigationContainer theme={navigationTheme}>
       <AppNavigator />
     </NavigationContainer>

src/app/screens/PluviometerSharingDataScreen.js

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { StyleSheet } 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 DatePicker from 'react-native-datepicker';
+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."),
+});
+
+
+function PluviometerSharingDataScreen() {
+    const location = useLocation();
+
+    const [date, setDate] = useState('09-10-2020');
+
+    return (
+        <Screen style={styles.container}>
+            <Form
+                initialValues={{
+                    title: "",
+                    price: "",
+                    description: "",
+                    category: null,
+                    images: [],
+                }}
+                onSubmit={(values) => console.log(location)}
+                validationSchema={validationSchema}
+            >
+                <FormField
+                    keyboardType="numeric"
+                    maxLength={200}
+                    name="price"
+                    placeholder="não esstá atualizando"
+                    width={220}
+                />
+<DatePicker
+                    style={styles.datePickerStyle}
+                    date={date} // Initial date from state
+                    mode="date" // The enum of date, datetime and time
+                    placeholder="select date"
+                    format="DD-MM-YYYY"
+                    minDate="01-01-2016"
+                    maxDate="01-01-2019"
+                    confirmBtnText="Confirm"
+                    cancelBtnText="Cancel"
+                    customStyles={{
+                        dateIcon: {
+                            //display: 'none',
+                            position: 'absolute',
+                            left: 0,
+                            top: 4,
+                            marginLeft: 0,
+                        },
+                        dateInput: {
+                            marginLeft: 36,
+                        },
+                    }}
+                    onDateChange={(date) => {
+                        setDate(date);
+                    }}
+                />
+
+                <SubmitButton title="Post" />
+            </Form>
+        </Screen>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 10,
+    },
+});
+
+export default PluviometerSharingDataScreen;

src/app/screens/SharingDataScreen.js

@@ -4,11 +4,11 @@ import { StyleSheet, View } from "react-native";
 import { Image, Text, TouchableOpacity } from 'react-native';
 import { createStackNavigator } from "@react-navigation/stack";
 import RainSharingDataScreen from '../screens/RainSharingDataScreen';
+import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
 
 //1/3
 const styles = StyleSheet.create({
   container: {
-    paddingTop: 50,
   },
   rainLogo: {
     width: 110,
@@ -30,7 +30,7 @@ function SharingDataScreen({ navigation }) {
         </Text>
       <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
 
-        <TouchableOpacity style={{ alignItems: 'center' }}>
+        <TouchableOpacity style={{ alignItems: 'center' }} onPress={()=> navigation.navigate('FloodSharingData')}>
           <Image
             style={styles.floodingLogo}
             source={require("../assets/pontos_alagamento_peq.png")}
@@ -75,8 +75,9 @@ function RainSharingDataNavigator() {
     <Stack.Navigator initialRouteName="SharingData">
       <Stack.Screen name="SharingData" component={SharingDataScreen} />
       <Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
+      <Stack.Screen name="FloodSharingData" component={SharingFloodZonesScreen} />
     </Stack.Navigator>
   );
 }
 
-export default RainSharingDataNavigator;
+export default RainSharingDataNavigator;