Browse Source

Placing FloatButton in MapFeed

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

53
src/app/components/FloatButton.js

@ -1,22 +1,26 @@
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 ActionButton from 'react-native-action-button';
import ActionButton from "react-native-action-button";
import { AntDesign, Entypo } from "@expo/vector-icons";
import { Colors } from "react-native/Libraries/NewAppScreen";
import { FlatList } from "react-native-gesture-handler";
import { Fontisto } from '@expo/vector-icons';
import { Fontisto } from "@expo/vector-icons";
import DataMenu from "./DataMenu";
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Dimensions } from "react-native";
const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get('window').height;
const screenHeight = Dimensions.get("window").height;
function FloatButton(props) {
const animation = useRef(new Animated.Value(0)).current;
@ -28,7 +32,7 @@ function FloatButton(props) {
Animated.spring(animation, {
toValue: value,
friction: 6,
useNativeDriver: true
useNativeDriver: true,
}).start();
setOpen(!open);
@ -39,10 +43,9 @@ function FloatButton(props) {
rotate: animation.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "0deg"],
})
}
]
}),
},
],
};
const cameraStyle = {
@ -51,11 +54,11 @@ function FloatButton(props) {
{
translateX: animation.interpolate({
inputRange: [0, 1],
outputRange: [0, 20]
})
}
]
}
outputRange: [0, 20],
}),
},
],
};
return (
<View style={[styles.container]}>
<TouchableWithoutFeedback>
@ -66,7 +69,11 @@ function FloatButton(props) {
<View style={{ margin: 35, alignSelf: "flex-end" }}>
<TouchableWithoutFeedback onPress={toggleMenu}>
<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>
</TouchableWithoutFeedback>
</View>
@ -78,10 +85,11 @@ const styles = StyleSheet.create({
container: {
alignItems: "center",
position: "absolute",
bottom: 0,
left: 0,
flex: 1,
},
button: {
// position: "absolute",
width: 50,
height: 50,
borderRadius: 6,
@ -97,13 +105,10 @@ const styles = StyleSheet.create({
backgroundColor: colors.primary,
},
submenu: {
// position:"relative",
width: screenWidth,
height: screenHeight * 0.9,
flex: 1,
}
},
});
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 { CurrentLocationContext } from "../context/CurrentLocationContext";
import { MapMarkerList } from "../components/MapMarkerList";
import FloatButton from "../components/FloatButton";
function MapFeedScreen(props) {
const context = useContext(CurrentLocationContext);
@ -40,6 +41,7 @@ function MapFeedScreen(props) {
>
<MapMarkerList reload={focusChanged} />
</MapView>
<FloatButton />
</View>
);
}

Loading…
Cancel
Save