Aven
Intro to React Native »

Chapter 9: React Native Maps

We will be using the community map component to display a native map in our app. According to Expo's install instructions, we run:

expo install react-native-maps

First we need to load the data for our map:

CityScreen.js
function CityMap({ city }) {
  const fullCity = useCity(city.cityId);
  if (!fullCity)
    return (
      <Layout style={styles.spinnerLayout}>
        <Spinner />
      </Layout>
    );
  return <Map fullCity={fullCity} />;
}

Now we can use the MapView and render Markers on the map:

CityScreen.js
import MapView, { Marker } from "react-native-maps";

function Map({ fullCity }) {
  return (
    <MapView
      initialRegion={{
        latitude: fullCity?.lat,
        longitude: fullCity?.lon,
        latitudeDelta: 0.1,
        longitudeDelta: 0.1,
      }}
      style={{ flex: 1 }}
    >
      {fullCity.sensors.map(
        (sensor) =>
          sensor.PM2_5Value && (
            <Marker
              key={sensor.ID}
              coordinate={{
                latitude: sensor.Lat,
                longitude: sensor.Lon,
              }}
              title={sensor.Label}
              description={sensor.PM2_5Value && `PM2.5 = ${sensor.PM2_5Value}`}
            />
          )
      )}
    </MapView>
  );
}

With that, our simple app is complete! In the next section, we explain how it will be built for production.

Next: Distribution

© Aven LLC and Aven Contributors. Licensed under Creative Commons BY-NC-SA 4.0

Open Source under Apache 2.0