Directions.js

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,
  },
});