|
|
@ -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; |