diff --git a/src/app/components/DataMenu.js b/src/app/components/DataMenu.js
new file mode 100644
index 0000000..61d034b
--- /dev/null
+++ b/src/app/components/DataMenu.js
@@ -0,0 +1,137 @@
+import React, { Component, useRef, useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View, CheckBox } from "react-native";
+
+import colors from "../config/colors";
+import { FlatList } from "react-native-gesture-handler";
+import { Fontisto } from '@expo/vector-icons';
+import { dimensions } from "../config/dimensions";
+
+export default class DataMenu extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ timeSlots: [
+ {
+ id: 1,
+ name: 'Chuva',
+ },
+ {
+ id: 2,
+ name: 'Ponto de alagamento',
+ },
+ {
+ id: 3,
+ name: 'Pluviômetro artesanal',
+ },
+ {
+ id: 4,
+ name: 'Pluviômetro oficial',
+ },
+ {
+ id: 5,
+ name: 'Água no rio',
+ },
+ {
+ id: 6,
+ name: 'Área de inundação',
+ },
+ ],
+ selectedValue: {},
+ }
+ }
+ toggleItem = (itemId) => {
+ const { selectedValue } = this.state;
+ const isSelected = selectedValue[itemId];
+ selectedValue[itemId] = !isSelected;
+
+
+ this.setState({
+ selectedValue: { ...selectedValue },
+ })
+ }
+
+ render() {
+ const { timeSlots, selectedValue } = this.state;
+ return (
+
+
+
+
+ datas.id.toString()}
+ renderItem={({ item }) => {
+ const isSelected = selectedValue[item.id];
+ return (
+
+
+
+ {item.name}
+
+
+ this.toggleItem(item.id)}
+ tintColors={{ true: colors.lightBlue, false: 'black' }}
+ />
+
+
+ );
+ }}
+ extraData={[selectedValue]}
+ />
+
+
+ console.log("Aplicar camadas")}>
+
+ Confirmar
+
+
+
+
+
+ )
+ };
+
+
+};
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ flexDirection: "row",
+ alignSelf: "flex-end",
+ },
+ submit_btn: {
+ // position: "absolute",
+ bottom: 0,
+ width: "100%",
+ padding: 20,
+ },
+ button: {
+ backgroundColor: "#1976D2",
+ borderRadius: 20,
+ justifyContent: "center",
+ alignItems: "center",
+ width: "100%",
+ height: 42,
+ // marginVertical: 10,
+ textAlign: "center",
+ },
+ text: {
+ color: colors.white,
+ fontSize: 16,
+ textTransform: "uppercase",
+ fontWeight: "bold",
+ },
+ item: {
+ color: colors.lightBlue,
+ fontSize: dimensions.text.tertiary,
+ fontWeight: "bold",
+
+
+
+ }
+
+});
+
diff --git a/src/app/components/FloatButton.js b/src/app/components/FloatButton.js
new file mode 100644
index 0000000..98e49f4
--- /dev/null
+++ b/src/app/components/FloatButton.js
@@ -0,0 +1,111 @@
+import React, { useRef, useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View, Animated, TouchableWithoutFeedback } from "react-native";
+
+import colors from "../config/colors";
+import ActionButton from 'react-native-action-button';
+import { AntDesign, Entypo } from "@expo/vector-icons";
+import { Colors } from "react-native/Libraries/NewAppScreen";
+import { FlatList } from "react-native-gesture-handler";
+import { Fontisto } from '@expo/vector-icons';
+import DataMenu from "./DataMenu";
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+
+import { Dimensions } from "react-native";
+
+
+const screenWidth = Dimensions.get("window").width;
+const screenHeight = Dimensions.get('window').height;
+
+
+
+function FloatButton(props) {
+ const animation = useRef(new Animated.Value(0)).current;
+ const [open, setOpen] = useState(false);
+
+ const toggleMenu = () => {
+ const value = open ? 0 : 1;
+ console.log(value);
+
+ Animated.spring(animation, {
+ toValue: value,
+ friction: 6,
+ useNativeDriver: true
+ }).start();
+
+ setOpen(!open);
+ };
+ const rotation = {
+ transform: [
+ {
+ rotate: animation.interpolate({
+ inputRange: [0, 1],
+ outputRange: ["0deg", "0deg"],
+
+ })
+ }
+ ]
+ };
+
+ const cameraStyle = {
+ transform: [
+ { scale: animation },
+ {
+ translateX: animation.interpolate({
+ inputRange: [0, 1],
+ outputRange: [0, 20]
+ })
+ }
+ ]
+ }
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ alignItems: "center",
+ position: "absolute",
+ //flex: 1,
+ zIndex: 3,
+ },
+ button: {
+ position: "absolute",
+ width: 50,
+ height: 50,
+ borderRadius: 6,
+ alignItems: "center",
+ shadowColor: colors.primary,
+ shadowOpacity: 0.3,
+ shadowOffset: {
+ height: 10,
+ },
+ padding: 3,
+ },
+ menu: {
+ backgroundColor: colors.primary,
+ },
+ submenu: {
+ // position:"relative",
+ width: screenWidth,
+ height: screenHeight * 0.9,
+ flex: 1,
+
+ }
+
+});
+
+export default FloatButton;
diff --git a/src/package-lock.json b/src/package-lock.json
index 15cb56b..90d26f3 100644
--- a/src/package-lock.json
+++ b/src/package-lock.json
@@ -16597,6 +16597,14 @@
}
}
},
+ "react-native-action-button": {
+ "version": "2.8.5",
+ "resolved": "https://registry.npmjs.org/react-native-action-button/-/react-native-action-button-2.8.5.tgz",
+ "integrity": "sha512-BvGZpzuGeuFR2Y6j93+vKiSqDhsF87VHvNXFs/qEYKfzT4b1ASAT/GQbgS6gNt4jRJCUnJWYrIwlBzRjesZQmQ==",
+ "requires": {
+ "prop-types": "^15.5.10"
+ }
+ },
"react-native-chart-kit": {
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.11.0.tgz",
@@ -16656,6 +16664,11 @@
"resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.27.1.tgz",
"integrity": "sha512-HygBkZBecTnIVRYrSiLRAvu4OmXOYso/A7c6Cy73HkOh9CgGV8Ap5eBea24tvmFGptjj5Hg8AJ94/YbmWK1Okw=="
},
+ "react-native-multiple-choice": {
+ "version": "0.0.8",
+ "resolved": "https://registry.npmjs.org/react-native-multiple-choice/-/react-native-multiple-choice-0.0.8.tgz",
+ "integrity": "sha1-732ZrBBElBzfi5QQnMWjMHqhnoc="
+ },
"react-native-places-input": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/react-native-places-input/-/react-native-places-input-1.1.7.tgz",
diff --git a/src/package.json b/src/package.json
index b6e378b..e647f54 100644
--- a/src/package.json
+++ b/src/package.json
@@ -36,12 +36,14 @@
"react-dom": "16.13.1",
"react-google-places-autocomplete": "^3.2.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
+ "react-native-action-button": "^2.8.5",
"react-native-chart-kit": "^6.11.0",
"react-native-flash-message": "^0.1.18",
"react-native-gesture-handler": "~1.7.0",
"react-native-google-places-autocomplete": "^2.1.3",
"react-native-keyboard-aware-scroll-view": "^0.9.3",
"react-native-maps": "0.27.1",
+ "react-native-multiple-choice": "0.0.8",
"react-native-places-input": "^1.1.7",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",