Browse Source

Placing FloatButton in MapFeed

master
GabrielTrettel 4 years ago
parent
commit
5f630fe867
  1. 55
      src/app/components/FloatButton.js
  2. 2
      src/app/screens/MapFeedScreen.js

55
src/app/components/FloatButton.js

@ -1,22 +1,26 @@
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View, Animated, TouchableWithoutFeedback } from "react-native";
import {
StyleSheet,
Text,
TouchableOpacity,
View,
Animated,
TouchableWithoutFeedback,
} from "react-native";
import colors from "../config/colors"; import colors from "../config/colors";
import ActionButton from 'react-native-action-button';
import ActionButton from "react-native-action-button";
import { AntDesign, Entypo } from "@expo/vector-icons"; import { AntDesign, Entypo } from "@expo/vector-icons";
import { Colors } from "react-native/Libraries/NewAppScreen"; import { Colors } from "react-native/Libraries/NewAppScreen";
import { FlatList } from "react-native-gesture-handler"; import { FlatList } from "react-native-gesture-handler";
import { Fontisto } from '@expo/vector-icons';
import { Fontisto } from "@expo/vector-icons";
import DataMenu from "./DataMenu"; import DataMenu from "./DataMenu";
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Dimensions } from "react-native"; 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;
function FloatButton(props) { function FloatButton(props) {
const animation = useRef(new Animated.Value(0)).current; const animation = useRef(new Animated.Value(0)).current;
@ -28,7 +32,7 @@ function FloatButton(props) {
Animated.spring(animation, { Animated.spring(animation, {
toValue: value, toValue: value,
friction: 6, friction: 6,
useNativeDriver: true
useNativeDriver: true,
}).start(); }).start();
setOpen(!open); setOpen(!open);
@ -39,10 +43,9 @@ function FloatButton(props) {
rotate: animation.interpolate({ rotate: animation.interpolate({
inputRange: [0, 1], inputRange: [0, 1],
outputRange: ["0deg", "0deg"], outputRange: ["0deg", "0deg"],
})
}
]
}),
},
],
}; };
const cameraStyle = { const cameraStyle = {
@ -51,11 +54,11 @@ function FloatButton(props) {
{ {
translateX: animation.interpolate({ translateX: animation.interpolate({
inputRange: [0, 1], inputRange: [0, 1],
outputRange: [0, 20]
})
}
]
}
outputRange: [0, 20],
}),
},
],
};
return ( return (
<View style={[styles.container]}> <View style={[styles.container]}>
<TouchableWithoutFeedback> <TouchableWithoutFeedback>
@ -63,10 +66,14 @@ function FloatButton(props) {
<DataMenu /> <DataMenu />
</Animated.View> </Animated.View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<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]}>
<MaterialCommunityIcons name="layers-plus" size={36} color={colors.white} />
<MaterialCommunityIcons
name="layers-plus"
size={36}
color={colors.white}
/>
</Animated.View> </Animated.View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</View> </View>
@ -78,10 +85,11 @@ const styles = StyleSheet.create({
container: { container: {
alignItems: "center", alignItems: "center",
position: "absolute", position: "absolute",
bottom: 0,
left: 0,
flex: 1, flex: 1,
}, },
button: { button: {
// position: "absolute",
width: 50, width: 50,
height: 50, height: 50,
borderRadius: 6, borderRadius: 6,
@ -97,13 +105,10 @@ const styles = StyleSheet.create({
backgroundColor: colors.primary, backgroundColor: colors.primary,
}, },
submenu: { submenu: {
// position:"relative",
width: screenWidth, width: screenWidth,
height: screenHeight * 0.9, height: screenHeight * 0.9,
flex: 1, flex: 1,
}
},
}); });
export default FloatButton; export default FloatButton;

2
src/app/screens/MapFeedScreen.js

@ -7,6 +7,7 @@ import { screen_width, screen_height } from "../config/dimensions";
import attachFocusToQuery from "../hooks/useFocus"; import attachFocusToQuery from "../hooks/useFocus";
import { CurrentLocationContext } from "../context/CurrentLocationContext"; import { CurrentLocationContext } from "../context/CurrentLocationContext";
import { MapMarkerList } from "../components/MapMarkerList"; import { MapMarkerList } from "../components/MapMarkerList";
import FloatButton from "../components/FloatButton";
function MapFeedScreen(props) { function MapFeedScreen(props) {
const context = useContext(CurrentLocationContext); const context = useContext(CurrentLocationContext);
@ -40,6 +41,7 @@ function MapFeedScreen(props) {
> >
<MapMarkerList reload={focusChanged} /> <MapMarkerList reload={focusChanged} />
</MapView> </MapView>
<FloatButton />
</View> </View>
); );
} }

Loading…
Cancel
Save