MapView

react-native-maps zorgt voor een interactieve kaart in React Native. We kunnen hiermee een kaart tonen en markers op de kaart plaatsen.

Installatie

react-native-maps is een externe library die we moeten installeren. We kunnen dit doen met de expo install commando:

npx expo install react-native-maps

Gebruik

Om heel eenvoudig een kaart te tonen in React Native moeten we de MapView component gebruiken. Deze component heeft een region prop die we kunnen gebruiken om de initiele regio van de kaart te bepalen. We willen deze dynamisch maken, dus we zullen de region prop binden aan een state variabele.

latitudeDelta en longitudeDelta bepalen hoeveel van de kaart we willen tonen. Hoe kleiner deze waarden, hoe meer van de kaart we zien.

import React, { useState } from "react";
import { View, Text, Button } from "react-native";
import MapView, { Region, Coordinate } from "react-native-maps";
const App = () => {
  let [wonder, setWonder] = useState<WorldWonder>(worldWonders[0]);

  const showRandomWonder = () => {
    let randomIndex = Math.floor(Math.random() * worldWonders.length);
    setWonder(worldWonders[randomIndex]);
  };
  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ flex: 1 }}
        region={{
          latitude: wonder.latitude,
          longitude: wonder.longitude,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
      <Button title="Set random location" onPress={showRandomWonder} />
    </View>
  );
};

export default App;

Markers

We kunnen markers op de kaart plaatsen door de Marker component te gebruiken. Deze component heeft een coordinate prop die we kunnen gebruiken om de positie van de marker te bepalen. We gaan in volgend voorbeeld een marker plaatsen op de kaart per wereldwonder.

import React, { useState } from "react";
import { View, Text, Button } from "react-native";
import MapView, { Region, Coordinate } from "react-native-maps";
const App = () => {
  let [wonder, setWonder] = useState<WorldWonder>(worldWonders[0]);

  const showRandomWonder = () => {
    let randomIndex = Math.floor(Math.random() * worldWonders.length);
    setWonder(worldWonders[randomIndex]);
  };
  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ flex: 1 }}
        region={{
          latitude: wonder.latitude,
          longitude: wonder.longitude,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        {worldWonders.map((wonder) => (
          <MapView.Marker
            key={wonder.name}
            coordinate={{
              latitude: wonder.latitude,
              longitude: wonder.longitude,
            }}
            title={wonder.name}
          />
        ))}
      </MapView>
      <Button title="Set random location" onPress={showRandomWonder} />
    </View>
  );
};

export default App;

Meer informatie

Voor meer informatie over react-native-maps kan je de documentatie raadplegen.