React Native with Maplibre and Expo

194 views Asked by At

I'm usin expo and Maplibre react native library (through eas build). The app builds and starts as expected, unfortunately, there is no map displayed. I'm running the app on android device. 

Here's my App.js:

import { StyleSheet, Text, View } from "react-native";
import MapLibreGL from "@maplibre/maplibre-react-native";

export default function App() {
  MapLibreGL.setAccessToken(null);
  MapLibreGL.setConnected(true);

  const MAPTILER_API_KEY = "<my-token>";

  return (
    <View>
      <Text>It works!</Text>
      <View style={styles.container}>
        <MapLibreGL.MapView
          style={styles.map}
          styleURL={`https://api.maptiler.com/maps/streets-v2/style.json?key=${MAPTILER_API_KEY}`}
          logoEnabled={false}
          attributionPosition={{ bottom: 8, right: 8 }}
        ></MapLibreGL.MapView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  map: {
    flex: 1,
    alignSelf: "stretch",
  },
});

In my app.json I added plugins key, as it is guided in the docs:

"plugins": ["@maplibre/maplibre-react-native"],

Am I missing anything?

0

There are 0 answers