Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Longboard_App_Prototype/Directions.js
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
127 lines (120 sloc)
3.71 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect } from 'react'; | |
import { Text, View, TextInput, Button, StyleSheet, TouchableWithoutFeedback, Keyboard, Alert} from 'react-native'; | |
import MapView, { Polyline, Marker } from 'react-native-maps'; | |
// Mock data for directions | |
const mockRoute = [ | |
{ latitude: 37.78825, longitude: -122.4324 }, | |
{ latitude: 37.79025, longitude: -122.4324 }, | |
{ latitude: 37.79225, longitude: -122.4224 }, | |
{ latitude: 37.79425, longitude: -122.4124 }, | |
{ latitude: 37.79625, longitude: -122.4024 }, | |
{ latitude: 37.79825, longitude: -122.4124 }, | |
]; | |
export default function DirectionsScreen() { | |
const [startingPoint, setStartingPoint] = useState(''); | |
const [endingPoint, setEndingPoint] = useState(''); | |
const [route, setRoute] = useState(null); | |
// Function to handle route planning | |
const planRoute = () => { | |
if (startingPoint && endingPoint) { | |
// Mock route planning logic | |
setRoute(mockRoute); | |
} | |
if (!startingPoint || !endingPoint) { | |
Alert.alert('Error', 'Please fill in all fields'); | |
return; | |
} | |
}; | |
useEffect(() => { | |
// Perform any additional actions on component mount | |
}, []); | |
return ( | |
<TouchableWithoutFeedback onPress={Keyboard.dismiss}> | |
<View style={styles.container}> | |
<Text style={styles.heading}>Plan Your Route</Text> | |
{/* Input fields for starting and ending points */} | |
<TextInput | |
style={styles.input} | |
placeholder="Starting Point" | |
value={startingPoint} | |
onChangeText={text => setStartingPoint(text)} | |
/> | |
<TextInput | |
style={styles.input} | |
placeholder="Ending Point" | |
value={endingPoint} | |
onChangeText={text => setEndingPoint(text)} | |
/> | |
{/* Button to plan route */} | |
<Button title="Plan Route" onPress={planRoute} /> | |
{/* Display route on map */} | |
{route && ( | |
<View style={styles.mapContainer}> | |
<Text style={styles.subheading}>Route</Text> | |
{/* Render the route on a map component */} | |
<MapView | |
style={styles.map} | |
initialRegion={{ | |
latitude: mockRoute[0].latitude, | |
longitude: mockRoute[0].longitude, | |
latitudeDelta: 0.0922, | |
longitudeDelta: 0.0421, | |
}} | |
> | |
{/* Display markers for starting and ending points */} | |
<Marker | |
coordinate={{ | |
latitude: mockRoute[0].latitude, | |
longitude: mockRoute[0].longitude, | |
}} | |
title="Starting Point" | |
/> | |
<Marker | |
coordinate={{ | |
latitude: mockRoute[mockRoute.length - 1].latitude, | |
longitude: mockRoute[mockRoute.length - 1].longitude, | |
}} | |
title="Ending Point" | |
/> | |
{/* Display the route polyline */} | |
<Polyline | |
coordinates={mockRoute} | |
strokeWidth={2} | |
strokeColor="blue" | |
/> | |
</MapView> | |
</View> | |
)} | |
</View> | |
</TouchableWithoutFeedback> | |
); | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
padding: 20, | |
}, | |
heading: { | |
fontSize: 24, | |
fontWeight: 'bold', | |
marginBottom: 20, | |
}, | |
input: { | |
height: 40, | |
borderColor: 'gray', | |
borderWidth: 1, | |
marginBottom: 10, | |
}, | |
mapContainer: { | |
marginTop: 20, | |
}, | |
subheading: { | |
fontSize: 18, | |
fontWeight: 'bold', | |
marginBottom: 10, | |
}, | |
map: { | |
width: '100%', | |
height: 300, | |
}, | |
}); |