Add a MapScale map to React Native

Beginner

Install the native map package

For Expo, use a development build because native map packages cannot run inside Expo Go.

Install the native map package

npm install @maplibre/maplibre-react-native

Add location permission only if you show user location

You can render a map without asking for location. Ask only when you enable user tracking.

Add location permission only if you show user location

// app.json
{
	"expo": {
		"ios": {
			"infoPlist": {
				"NSLocationWhenInUseUsageDescription": "Show your position on the map."
			}
		}
	}
}

Render the map

The style URL is the only MapScale-specific part. Put your key in app config or secure runtime config.

Render the map

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

const key = "pk_test_your_key_here"

export function MapScreen() {
	return (
		<View style={styles.screen}>
			<MapLibreGL.MapView
				style={styles.map}
				styleURL={`https://api.mapscale.io/styles/v1/streets?key=${key}`}
			>
				<MapLibreGL.Camera zoomLevel={11} centerCoordinate={[100.5018, 13.7563]} />
			</MapLibreGL.MapView>
		</View>
	)
}

const styles = StyleSheet.create({
	screen: { flex: 1 },
	map: { flex: 1 },
})

Add a MapScale map to React Native

Install the native map package

Add location permission only if you show user location

Render the map

On this page