Commit 4a5fdadd authored by Sebastian Trebunak's avatar Sebastian Trebunak
Browse files

map moved to branchInfoScree

parent c4eb8a00
import React, { PureComponent } from "react";
import { StyleSheet, Text } from "react-native";
import { withNavigation } from "react-navigation";
// import { withNavigation } from "react-navigation";
import MapView, { Marker } from "react-native-maps";
class BranchesMap extends PureComponent {
......@@ -11,9 +11,9 @@ class BranchesMap extends PureComponent {
};
state = {
region: this.getInitialState(),
markers: this.getMarkersFromBranches(this.props.data),
selectedMarker: null
region: this.getInitialState()
// markers: this.getMarkersFromBranches(this.props.data),
// selectedMarker: null
};
getInitialState() {
......@@ -25,31 +25,39 @@ class BranchesMap extends PureComponent {
};
}
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;
}
// getMarkersFromBranches(branches) {
// return 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}`
// });
// });
// }
render() {
const { data } = this.props;
return (
<MapView style={styles.map} region={this.state.region}>
{this.state.markers.map(marker => (
<MapView
style={styles.map}
initialRegion={this.state.region}
loadingEnabled
>
{/* {this.state.markers.map(marker => (
<Marker
key={marker.key}
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
/>
))}
))} */}
<Marker
key="marker"
coordinate={{ latitude: data.lat, longitude: data.long }}
title={`${data.address}, ${data.zip} ${data.city}`}
description="Pobočka Tatra banky"
/>
</MapView>
);
}
......
......@@ -4,32 +4,32 @@ export const BRANCHES = [
zip: "040 01",
city: "Košice",
id: 1,
lat: "48.717727",
long: "21.262987"
lat: 48.717727,
long: 21.262987
},
{
address: "Hlavná 81",
zip: "040 01",
city: "Košice",
id: 2,
lat: "48.723221",
long: "21.256716"
lat: 48.723221,
long: 21.256716
},
{
address: "OC Galeria",
zip: "040 01",
city: "Košice",
id: 3,
lat: "48.715233",
long: "21.238327"
lat: 48.715233,
long: 21.238327
},
{
address: "OC Optima",
zip: "040 01",
city: "Košice",
id: 4,
lat: "48.695508",
long: "21.237335"
lat: 48.695508,
long: 21.237335
}
];
......
......@@ -14,7 +14,8 @@ import SettingsScreen from "../screens/SettingsScreen";
const BranchStack = createStackNavigator({
Branches: BranchesScreen,
BranchInfo: BranchInfoScreen
BranchInfo: BranchInfoScreen,
NotificationInfo: NotificationInfoScreen
});
BranchStack.navigationOptions = {
......
import React, { Component } from "react";
import { StyleSheet, View, InteractionManager } from "react-native";
import {
ScrollView,
StyleSheet,
View,
InteractionManager,
Text
} from "react-native";
import { NOTIFICATIONS } from "../constants/Data";
import { iOSUIKit } from "react-native-typography";
import NotificationList from "../components/notifications/NotificationList";
import BranchesMap from "../components/branches/BranchesMap";
export default class BranchInfoScreen extends Component {
static navigationOptions = ({ navigation }) => {
......@@ -15,7 +23,8 @@ export default class BranchInfoScreen extends Component {
this.state = {
isLoaded: false,
branch: this.props.navigation.getParam("branch", null)
branch: this.props.navigation.getParam("branch", null),
data: []
};
}
......@@ -31,9 +40,15 @@ export default class BranchInfoScreen extends Component {
render() {
return (
<View style={styles.container}>
<NotificationList data={this.state.data} />
</View>
<ScrollView style={styles.container}>
<View style={styles.mapContainer}>
{this.state.isLoaded && <BranchesMap data={this.state.branch} />}
</View>
<View style={styles.innerContainer}>
<Text style={styles.title}>Notifikácie</Text>
<NotificationList data={this.state.data} />
</View>
</ScrollView>
);
}
}
......@@ -42,5 +57,14 @@ const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
},
innerContainer: {
marginTop: 20
},
title: {
...iOSUIKit.largeTitleEmphasized,
marginHorizontal: 20,
marginBottom: 15
},
mapContainer: { height: 275 }
});
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 {
......@@ -21,17 +20,13 @@ export default class BranchesScreen extends Component {
render() {
return (
<View style={styles.container}>
{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}
/>
)}
<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