115 lines
2.7 KiB
JavaScript
115 lines
2.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Dimensions,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import MapView, { Marker } from "react-native-maps";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
|
|
// Koordinat awal Nganjuk (misal: Alun-Alun Nganjuk)
|
|
const initialRegion = {
|
|
latitude: -7.6079,
|
|
longitude: 111.903,
|
|
latitudeDelta: 0.05,
|
|
longitudeDelta: 0.05,
|
|
};
|
|
|
|
// Contoh lokasi TPS di Nganjuk
|
|
const locations = [
|
|
{ id: 1, name: "TPS Alun-Alun", latitude: -7.6085, longitude: 111.9012 },
|
|
{
|
|
id: 2,
|
|
name: "TPS Jl. Gatot Subroto",
|
|
latitude: -7.6102,
|
|
longitude: 111.9051,
|
|
},
|
|
{ id: 3, name: "TPS Pasar Wage", latitude: -7.6055, longitude: 111.9083 },
|
|
];
|
|
|
|
const LokasiTerdekat = () => {
|
|
const navigation = useNavigation();
|
|
const [region, setRegion] = useState(initialRegion);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
style={styles.backButton}
|
|
onPress={() => navigation.navigate("Home")}
|
|
>
|
|
<Ionicons name="arrow-back" size={28} color="#000" />
|
|
</TouchableOpacity>
|
|
<Text style={styles.title}>LOKASI TERDEKAT</Text>
|
|
<View style={{ width: 28 }} /> {/* Spacer untuk keseimbangan header */}
|
|
</View>
|
|
|
|
{/* MapView */}
|
|
<MapView
|
|
style={styles.map}
|
|
region={region}
|
|
onRegionChangeComplete={(newRegion) => setRegion(newRegion)}
|
|
>
|
|
{locations.map((location) => (
|
|
<Marker
|
|
key={location.id}
|
|
coordinate={{
|
|
latitude: location.latitude,
|
|
longitude: location.longitude,
|
|
}}
|
|
title={location.name}
|
|
description={`Lat: ${location.latitude}, Lng: ${location.longitude}`}
|
|
/>
|
|
))}
|
|
</MapView>
|
|
|
|
{/* Deskripsi */}
|
|
<Text style={styles.description}>
|
|
Menampilkan lokasi TPS terdekat di wilayah Nganjuk.
|
|
</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#fff",
|
|
paddingTop: 40,
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 16,
|
|
marginBottom: 10,
|
|
},
|
|
backButton: {
|
|
padding: 8,
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
fontWeight: "bold",
|
|
textAlign: "left",
|
|
marginRight: 160,
|
|
},
|
|
map: {
|
|
width: Dimensions.get("window").width,
|
|
height: 800,
|
|
// width: 500,
|
|
},
|
|
description: {
|
|
fontSize: 16,
|
|
color: "#555",
|
|
marginTop: 16,
|
|
textAlign: "center",
|
|
paddingHorizontal: 16,
|
|
},
|
|
});
|
|
|
|
export default LokasiTerdekat;
|