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