Untitled

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import axios from 'axios';

const TrafficApp = () => {
      const [trafficData, setTrafficData] = useState([]);
        
          useEffect(() => {
                // Fetch live traffic data (for example, from Google Maps API)
                    axios.get('YOUR_API_ENDPOINT')
                          .then(response => {
                                    setTrafficData(response.data);
                          })
                                .catch(error => console.log(error));
          }, []);
            
              return (
                    <View style={{ flex: 1 }}>
                          <MapView 
                                  style={{ flex: 1 }}
                                          initialRegion={{
                                                      latitude: 37.78825,
                                                                longitude: -122.4324,
                                                                          latitudeDelta: 0.0922,
                                                                                    longitudeDelta: 0.0421,
                                          }}
                                                >
                                                        {trafficData.map((incident, index) => (
                                                                      <Marker
                                                                                  key={index}
                                                                                              coordinate={{ latitude: incident.lat, longitude: incident.lon }}
                                                                                                          title={incident.type}
                                                                                                                      description={incident.details}
                                                                                                                                />
                                                        ))}
                                                              </MapView>
                                                                    
                                                                          <Button title="Report Incident" onPress={() => { /* Handle reporting incident */ }} />
                                                                                <Text>Traffic Alerts:</Text>
                                                                                      {trafficData.length > 0 && trafficData.map((incident, index) => (
                                                                                                <Text key={index}>{incident.type}: {incident.details}</Text>
                                                                                      ))}
                                                                                          </View>
              );
};

export default TrafficApp;

                                                                                      ))}
                                                        ))}
                                          }}
              )
                          })
          })
}