adjusting 'Dados' menu

src/app/components/DataMenu.js

@@ -1,16 +1,20 @@
 import React, { Component, useRef, useState } from "react";
 import { StyleSheet, Text, TouchableOpacity, View, CheckBox } from "react-native";
+import { FontAwesome5 } from '@expo/vector-icons';
 
 import colors from "../config/colors";
 import { FlatList } from "react-native-gesture-handler";
 import { Fontisto } from '@expo/vector-icons';
 import { dimensions } from "../config/dimensions";
 
+import { Dimensions } from "react-native";
+
+
 export default class DataMenu extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            timeSlots: [
+            layers: [
                 {
                     id: 1,
                     name: 'Chuva',
@@ -33,7 +37,7 @@ export default class DataMenu extends Component {
                 },
                 {
                     id: 6,
-                    name: 'Área de inundação',
+                    name: 'Área de inundação',                    
                 },
             ],
             selectedValue: {},
@@ -51,37 +55,41 @@ export default class DataMenu extends Component {
     }
 
     render() {
-        const { timeSlots, selectedValue } = this.state;
+        const screenHeight = Dimensions.get("window").height;
+        const { layers, selectedValue } = this.state;
         return (
 
             <View style={styles.container} >
 
-                <View style={{ flex: 0.70, backgroundColor: colors.light }}>
+                <View style={{
+                    flex: 0.70,
+                    height: screenHeight * 0.70,//solução temporária, procurar soluções pro menu se ajustar melhor ao layout
+                    paddingTop:  (screenHeight > 600 ? 0 : screenHeight * 0.09)
+                }}>
                     <FlatList
-                        data={timeSlots}
+                        data={layers}
                         keyExtractor={(datas) => datas.id.toString()}
                         renderItem={({ item }) => {
                             const isSelected = selectedValue[item.id];
                             return (
-                                <View style={{flexDirection:"row", flex: 1, marginTop: 15 }}>
-                                    <View style={{flexDirection:"row", flex: 0.85}}>
-                                        <Fontisto name="rain" color={colors.lightBlue} size={20}/>
-                                    <Text style={styles.item}> {item.name}</Text>
+                                <View style={{ flexDirection: "row", flex: 1, marginTop: 15, }}>
+                                    <View style={{ flexDirection: "row", flex: 0.80 }}>
+                                        <Fontisto name="rain" color={colors.lightBlue} size={20} />
+                                        <Text style={styles.item}> {item.name} </Text>
                                     </View>
-                                    <View 
-                                        style={{alignSelf:"flex-end", flexDirection:"row"}}>
-                                    <CheckBox
-                                        value={isSelected}
-                                        onChange={() => this.toggleItem(item.id)}
-                                        tintColors={{ true: colors.lightBlue, false: 'black' }}
-                                    />
+                                    <View
+                                        style={{ flex: 0.20, alignSelf: "flex-end", flexDirection: "row" }}>
+                                        <CheckBox
+                                            value={isSelected}
+                                            onChange={() => this.toggleItem(item.id)}
+                                            tintColors={{ true: colors.lightBlue, false: 'black' }}
+                                        />
                                     </View>
                                 </View>
                             );
                         }}
                         extraData={[selectedValue]}
                     />
-
                     <View style={styles.submit_btn}>
                         <TouchableOpacity onPress={() => console.log("Aplicar camadas")}>
                             <View style={styles.button}>
@@ -100,10 +108,10 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         flexDirection: "row",
-        alignSelf: "flex-end",
+        alignSelf: "flex-end",        
+    backgroundColor: colors.white,
     },
     submit_btn: {
-        //  position: "absolute",
         bottom: 0,
         width: "100%",
         padding: 20,
@@ -115,7 +123,6 @@ const styles = StyleSheet.create({
         alignItems: "center",
         width: "100%",
         height: 42,
-        //  marginVertical: 10,
         textAlign: "center",
     },
     text: {
@@ -128,9 +135,6 @@ const styles = StyleSheet.create({
         color: colors.lightBlue,
         fontSize: dimensions.text.tertiary,
         fontWeight: "bold",
-
-
-
     }
 
 });

src/app/components/FloatButton.js

@@ -21,6 +21,7 @@ import { Dimensions } from "react-native";
 
 const screenWidth = Dimensions.get("window").width;
 const screenHeight = Dimensions.get("window").height;
+console.log(screenHeight);
 
 function FloatButton(props) {
   const animation = useRef(new Animated.Value(0)).current;
@@ -52,9 +53,9 @@ function FloatButton(props) {
     transform: [
       { scale: animation },
       {
-        translateX: animation.interpolate({
+        translateY: animation.interpolate({
           inputRange: [0, 1],
-          outputRange: [0, 20],
+          outputRange: [0, 30],
         }),
       },
     ],
@@ -106,7 +107,6 @@ const styles = StyleSheet.create({
   },
   submenu: {
     width: screenWidth,
-    height: screenHeight * 0.9,
     flex: 1,
   },
 });