adding scrollview ans sucess message

src/App.js

@@ -7,7 +7,7 @@ import "./app/config/globals.js";
 import openDatabase from "./app/database/database-connection";
 
 import initDatabase from "./app/database/database-init";
-
+import FlashMessage from "react-native-flash-message";
 export default function App() {
   global.userDataBase = openDatabase();
   initDatabase(global.userDataBase);
@@ -15,6 +15,7 @@ export default function App() {
   return (
     <NavigationContainer theme={navigationTheme}>
       <AppNavigator />
+      <FlashMessage position="top" />
     </NavigationContainer>
   );
 }

src/app/database/databaseLoader.js

@@ -33,7 +33,7 @@ function insertFloodZone({ images, description, passable, location }) {
   transaction(global.userDataBase, query, values);
 }
 
-function insertPluviometerData({ pluviometer, images, date, location }) {
+function insertPluviometerData({ pluviometer, images, dateTime, location }) {
   const query = `INSERT INTO Pluviometer(Date, Images, Latitude, Longitude, Precipitation) VALUES(?, ?, ?, ?, ?);`;
 
   if (location === undefined) {
@@ -42,7 +42,7 @@ function insertPluviometerData({ pluviometer, images, date, location }) {
   }
 
   const values = [
-    date,
+    dateTime,
     JSON.stringify(images),
     parseFloat(location["latitude"]),
     parseFloat(location["longitude"]),

src/app/screens/PluviometerSharingDataScreen.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { StyleSheet, Text, View, Image, Button, TouchableHighlight, Platform } from "react-native";
+import { StyleSheet, Text, View, Image, ScrollView } from "react-native";
 import * as Yup from "yup";
 
 import {
@@ -10,15 +10,13 @@ import {
   SubmitButton,
 } from "../components/forms";
 import Screen from "../components/Screen";
-import DatePicker from "react-native-datepicker";
 import useLocation from "../hooks/useLocation";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import { insertPluviometerData } from "../database/databaseLoader";
-import RNDateTimePicker from '@react-native-community/datetimepicker';
-import { TextInput, TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native-gesture-handler";
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { FontAwesome5 } from '@expo/vector-icons';
-
+import { showMessage } from "react-native-flash-message";
 import moment from 'moment';
 
 const validationSchema = Yup.object().shape({
@@ -34,25 +32,16 @@ function PluviometerSharingDataScreen(props) {
   const { textStyle, defaultDate } = props;
   const [date, setDate] = useState(moment(defaultDate))
   const [show, setShow] = useState(false);
+  let dateTime = new Date().toString();
 
   const onAndroidChange = (e, selectedDate) => {
     setShow(false);
     if (selectedDate) {
       setDate(moment(selectedDate));
+      dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
       //props.onDateChange(selectedDate);
     }
   }
-
-  const onCancelPress = () => {
-    setDate(moment(defaultDate));
-    setShow(false);
-  }
-
-  const onDonePress = () => {
-    // props.onDateChange(date);
-    setShow(false);
-  }
-
   const renderDatePicker = () => {
     return (
       <DateTimePicker
@@ -64,14 +53,10 @@ function PluviometerSharingDataScreen(props) {
       />
     )
   }
-
   /*---------------------------------------------------------------------------------------------------------*/
-
-  // var day = new Date().getDate();
-  // var month = new Date().getMonth() + 1;
-  // var year = new Date().getFullYear();
   return (
     <Screen style={styles.container}>
+      
       <View style={{ alignSelf: "center" }}>
         <Image
           style={styles.image}
@@ -81,14 +66,20 @@ function PluviometerSharingDataScreen(props) {
           Pluviômetro
         </Text>
       </View>
-
+      <ScrollView style={styles.container}>
       <Form
         initialValues={{
           pluviometer: "",
           images: [],
         }}
         onSubmit={(values) => {
-          insertPluviometerData({ ...values, date, location });
+          insertPluviometerData({ ...values, dateTime, location });
+          showMessage({
+            message: "Informação enviada!",
+            duration: 1950,
+            icon: "success",
+            type: "success",
+          });
           props.navigation.goBack(null);
         }}
         validationSchema={validationSchema}
@@ -113,10 +104,10 @@ function PluviometerSharingDataScreen(props) {
           <TouchableOpacity style={styles.datepickerStyle}
             onPress={() => setShow(true)}>
             <View style={styles.datePickerView}>
-              <Text style={{ fontSize: 16, marginLeft:15}}>
+              <Text style={{ fontSize: 16, marginLeft: 15 }}>
                 {date.format('DD/MM/YYYY')}
               </Text>
-              <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey"/>
+              <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
               {show && renderDatePicker()}
             </View>
           </TouchableOpacity>
@@ -126,8 +117,11 @@ function PluviometerSharingDataScreen(props) {
           name="images"
           styles={{ width: 50 }}
         />
-        <SubmitButton title="Enviar" />
+        <SubmitButton title="Enviar" style={{marginBottom:100}}/>
+        <View style={{ flex: 1 }}>
+        </View>
       </Form>
+      </ScrollView>
     </Screen>
   );
 }
@@ -135,6 +129,7 @@ function PluviometerSharingDataScreen(props) {
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 10,
+    width: "100%",
   },
   image: {
     width: 85,
@@ -145,8 +140,8 @@ const styles = StyleSheet.create({
   datePickerView: {
     width: 280,
     flexDirection: "row",
-    justifyContent:"space-between",
-    paddingVertical:15,
+    justifyContent: "space-between",
+    paddingVertical: 15,
   },
   datepickerStyle: {
     borderRadius: 25,
@@ -154,14 +149,14 @@ const styles = StyleSheet.create({
     backgroundColor: "#f8f4f4",
   },
   dateIcon: {
-    marginRight:15, 
+    marginRight: 15,
   },
-  labelStyle:{
-      fontSize: 16,
-      fontWeight: "bold",
-      textAlign: "left",
-      color: "#1976D2",
-      marginBottom: 5,
+  labelStyle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: "#1976D2",
+    marginBottom: 5,
   },
 });
 

src/app/screens/RainSharingDataScreen.js

@@ -1,14 +1,12 @@
 import React, { useState } from "react";
-import { Button, StyleSheet, View } from "react-native";
+import { StyleSheet, View, ScrollView } 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";
@@ -16,6 +14,7 @@ import { Image, Text, TouchableOpacity } from "react-native";
 import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertRainData } from "../database/databaseLoader";
+import { showMessage } from "react-native-flash-message";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@@ -40,12 +39,21 @@ function RainSharingDataScreen(props) {
       >
         Chuva
       </Text>
+      <ScrollView style={styles.container}>
       <Form
         initialValues={{
           images: [],
         }}
         onSubmit={(values) => {
           insertRainData({ ...values, rain, location });
+          showMessage({
+            message: "Informação enviada!",
+            duration: 1950,
+            icon: "success",
+            type: "success",
+            onPress: () => {
+            },
+          });
           props.navigation.goBack(null);
         }}
         validationSchema={validationSchema}
@@ -141,6 +149,7 @@ function RainSharingDataScreen(props) {
 
         <SubmitButton title="Enviar" backgroundColor={colors.primary} />
       </Form>
+      </ScrollView>
     </Screen>
   );
 }

src/app/screens/RiverFloodSharingDataScreen.js

@@ -10,6 +10,8 @@ import { Image, Text } from "react-native";
 import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertRiverData } from "../database/databaseLoader";
+import { showMessage } from "react-native-flash-message";
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 const validationSchema = Yup.object().shape({
   images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@@ -34,12 +36,22 @@ function RiverFloodSharingDataScreen(props) {
       >
         Nível da água do rio
       </Text>
+      <KeyboardAwareScrollView
+      resetScrollToCoords={{ x: 0, y: 0 }}
+      contentContainerStyle={styles.container}
+      scrollEnabled={false}>
       <Form
         initialValues={{
           images: [],
         }}
         onSubmit={(values) => {
           insertRiverData({ ...values, riverScale, location });
+          showMessage({
+            message: "Informação enviada!",
+            duration: 1950,
+            icon: "success",
+            type: "success",
+          });          
           props.navigation.goBack(null);
         }}
         validationSchema={validationSchema}
@@ -113,6 +125,7 @@ function RiverFloodSharingDataScreen(props) {
           onPress={() => props.navigation.pop()}
         />
       </Form>
+      </KeyboardAwareScrollView>
     </Screen>
   );
 }

src/app/screens/SharingFloodZonesScreen.js

@@ -5,17 +5,18 @@ import {
   Text,
   Image,
   View,
-  KeyboardAvoidingView,
 } from "react-native";
 import * as Yup from "yup";
 
 import { Form, SubmitButton, FormField } from "../components/forms";
 import FormImagePicker from "../components/forms/FormImagePicker";
-import Screen from "../components/Screen";
 import useLocation from "../hooks/useLocation";
 import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertFloodZone } from "../database/databaseLoader";
+import { showMessage } from "react-native-flash-message";
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+import Screen from "../components/Screen";
 
 function submitForm(props) {
   // console.log(props);
@@ -37,7 +38,7 @@ function SharingFloodZonesScreen(props) {
   const location = useLocation();
 
   return (
-    <KeyboardAvoidingView behavior="padding" style={styles.container}>
+    <Screen style={styles.container}>
       <Text
         style={{
           fontSize: 18,
@@ -49,6 +50,10 @@ function SharingFloodZonesScreen(props) {
       >
         Pontos de alagamento
       </Text>
+      <KeyboardAwareScrollView
+      resetScrollToCoords={{ x: 0, y: 0 }}
+      contentContainerStyle={styles.container}
+      scrollEnabled={true}>
       <Form
         initialValues={{
           images: [],
@@ -56,6 +61,12 @@ function SharingFloodZonesScreen(props) {
         }}
         onSubmit={(values) => {
           submitForm({ ...values, passable, location });
+          showMessage({
+            message: "Informação enviada!",
+            duration: 1950,
+            icon: "success",
+            type: "success",
+          });
           props.navigation.goBack(null);
         }}
         validationSchema={validationSchema}
@@ -98,7 +109,8 @@ function SharingFloodZonesScreen(props) {
         />
         <SubmitButton title="Enviar" backgroundColor={colors.primary} />
       </Form>
-    </KeyboardAvoidingView>
+      </KeyboardAwareScrollView>
+    </Screen>
   );
 }