Commit f4f68e5c authored by Matúš Žiak's avatar Matúš Žiak
Browse files

Added branches map

parent ecd7029c
import React, { PureComponent } from "react";
import { StyleSheet, Text } from "react-native";
import { withNavigation } from "react-navigation";
import MapView, { Marker } from "react-native-maps";
class BranchesMap extends PureComponent {
_onPress = () => {
this.props.navigation.navigate("BranchInfo", {
branch: this.state.selectedMarker
});
};
state = {
region: this.getInitialState(),
markers: this.getMarkersFromBranches(this.props.data),
selectedMarker: null
};
getInitialState() {
return {
latitude: 48.723221,
longitude: 21.256716,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
};
}
getMarkersFromBranches(branches) {
markers = [];
branches.map(b => {
markers.push({
title: `${b.address}, ${b.zip} ${b.city}`,
latlng: { latitude: parseFloat(b.lat), longitude: parseFloat(b.long) },
description: "Tatra banka",
key: `${b.lat},${b.long}`
});
});
return markers;
}
render() {
return (
<MapView style={styles.map} region={this.state.region}>
{this.state.markers.map(marker => (
<Marker
key={marker.key}
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
/>
))}
</MapView>
);
}
}
const styles = StyleSheet.create({
map: {
flex: 1
}
});
export default BranchesMap;
export const BRANCHES = [
{ address: "OC Aupark", zip: "040 01", city: "Košice", id: 1 },
{ address: "Autobusova 71", zip: "040 01", city: "Košice", id: 2 },
{ address: "OC Galeria", zip: "040 01", city: "Košice", id: 3 },
{ address: "OC Optima", zip: "040 01", city: "Košice", id: 4 }
{
address: "OC Aupark",
zip: "040 01",
city: "Košice",
id: 1,
lat: "48.717727",
long: "21.262987"
},
{
address: "Hlavná 81",
zip: "040 01",
city: "Košice",
id: 2,
lat: "48.723221",
long: "21.256716"
},
{
address: "OC Galeria",
zip: "040 01",
city: "Košice",
id: 3,
lat: "48.715233",
long: "21.238327"
},
{
address: "OC Optima",
zip: "040 01",
city: "Košice",
id: 4,
lat: "48.695508",
long: "21.237335"
}
];
export const NOTIFICATIONS = [
......
import React, { Component } from "react";
import { StyleSheet, FlatList, View } from "react-native";
import BranchListItem from "../components/branches/BranchListItem";
import BranchesMap from "../components/branches/BranchesMap";
import { BRANCHES } from "../constants/Data";
export default class BranchesScreen extends Component {
......@@ -9,7 +10,8 @@ export default class BranchesScreen extends Component {
};
state = {
data: BRANCHES
data: BRANCHES,
mapView: true
};
_keyExtractor = item => `branch-${item.id}`;
......@@ -19,13 +21,17 @@ export default class BranchesScreen extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={BranchListItem.Divider}
data={this.state.data}
/>
{this.state.mapView ? (
<BranchesMap data={this.state.data} />
) : (
<FlatList
contentContainerStyle={styles.listContainer}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={BranchListItem.Divider}
data={this.state.data}
/>
)}
</View>
);
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment