Browse Source

fixing float button issue

master
analuizaff 4 years ago
parent
commit
57b4b60809
  1. 3
      src/app/components/DataMenu.js
  2. 21
      src/app/components/FloatButton.js

3
src/app/components/DataMenu.js

@ -56,13 +56,14 @@ export default class DataMenu extends Component {
render() { render() {
const screenHeight = Dimensions.get("window").height; const screenHeight = Dimensions.get("window").height;
const screenWidth = Dimensions.get("window").width;
const { layers, selectedValue } = this.state; const { layers, selectedValue } = this.state;
return ( return (
<View style={styles.container} > <View style={styles.container} >
<View style={{ <View style={{
flex: 0.70,
flex: 1,
height: screenHeight * 0.70,//solução temporária, procurar soluções pro menu se ajustar melhor ao layout 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) paddingTop: (screenHeight > 600 ? 0 : screenHeight * 0.09)
}}> }}>

21
src/app/components/FloatButton.js

@ -21,7 +21,7 @@ import { Dimensions } from "react-native";
const screenWidth = Dimensions.get("window").width; const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get("window").height; const screenHeight = Dimensions.get("window").height;
console.log(screenHeight);
function FloatButton(props) { function FloatButton(props) {
const animation = useRef(new Animated.Value(0)).current; const animation = useRef(new Animated.Value(0)).current;
@ -35,6 +35,7 @@ function FloatButton(props) {
friction: 6, friction: 6,
useNativeDriver: true, useNativeDriver: true,
}).start(); }).start();
console.log(open);
setOpen(!open); setOpen(!open);
}; };
@ -49,7 +50,7 @@ function FloatButton(props) {
], ],
}; };
const cameraStyle = {
const menuStyle = {
transform: [ transform: [
{ scale: animation }, { scale: animation },
{ {
@ -62,11 +63,14 @@ function FloatButton(props) {
}; };
return ( return (
<View style={[styles.container]}> <View style={[styles.container]}>
<TouchableWithoutFeedback>
<Animated.View style={[styles.submenu, cameraStyle]}>
<View style={{
width: (open ? screenWidth * 0.70 : 0),
flex: 1,
}}>
<Animated.View style={[menuStyle]}>
<DataMenu /> <DataMenu />
</Animated.View> </Animated.View>
</TouchableWithoutFeedback>
</View>
<View style={{ margin: 35, alignSelf: "flex-end" }}> <View style={{ margin: 35, alignSelf: "flex-end" }}>
<TouchableWithoutFeedback onPress={toggleMenu}> <TouchableWithoutFeedback onPress={toggleMenu}>
<Animated.View style={[styles.button, styles.menu, rotation]}> <Animated.View style={[styles.button, styles.menu, rotation]}>
@ -87,8 +91,7 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
position: "absolute", position: "absolute",
bottom: 0, bottom: 0,
left: 0,
flex: 1,
right: 0,
}, },
button: { button: {
width: 50, width: 50,
@ -105,10 +108,6 @@ const styles = StyleSheet.create({
menu: { menu: {
backgroundColor: colors.primary, backgroundColor: colors.primary,
}, },
submenu: {
width: screenWidth,
flex: 1,
},
}); });
export default FloatButton; export default FloatButton;
Loading…
Cancel
Save