How to add maps and location to your app.
A step-by-step walkthrough.
Maps and GPS normally mean native modules, a paid maps key, and permission files in two different formats. With Newly, the map ships in the template and the permissions go through app.json. This guide covers how to add maps and location to your app with Newly, step by step, and what each part does under the hood.
The three steps
The three steps, from map to GPS.
The full path for how to add maps and location to your app is three steps, and only the last one touches GPS. First you put places on a map. Then you shape how that map behaves. Device location comes third, and only if the app needs to know where the user is. Every step is a plain-language prompt. You describe the behaviour; Newly writes the code.
- 1
Prompt for the map
No install neededTell Newly what you want to see: "show these coffee shops on a map" or "put a map of our venues on the home screen." The AI adds the built-in Map component to a screen and wires in your list of places. No npm install, no native module to link, no maps API key to register. On a phone the map renders through Leaflet in a WebView; in the web preview it uses react-leaflet. You see the same map either way.
Best for. Showing a set of places, a store locator, a venue map, anything that starts with "put these points on a map."
- 2
Shape it with markers, region, and routes
Built-in optionsNow describe the behaviour. Ask for a marker on each location with its name and a short note, and you get tappable pins with title-and-description popups. Ask it to open on a particular area, and Newly sets a custom initial region from a latitude, longitude, and zoom. Ask for directions between two points, and it draws a route with leaflet-routing-machine. There is a loading state, so the screen does not sit empty while tiles arrive. You configure none of this by hand. You say what the map should do; the AI sets the options.
Best for. Labelled pins, opening on your city or venue, point-to-point routes, a clean first paint.
- 3
Add device location when you need it
Newly adds expo-locationDoes the app need the user's actual position, the "center on me" or "show the nearest shop" kind of feature? That is device GPS, and it runs on Expo Location. expo-location is not pre-installed, since not every app needs coordinates, so Newly adds it the moment you ask and declares the matching permissions in app.json. The generated code follows the standard flow: requestForegroundPermissionsAsync() to ask, then getCurrentPositionAsync() to read the location once granted. A plain Expo integration in your own code, not a black box.
Best for. "Find me," nearest-location sorting, centering the map on the user, location-aware screens.
Built on Leaflet and OpenStreetMap, not Google Maps.
One detail worth pinning down, because it surprises people: the Map component runs on Leaflet with OpenStreetMap tiles. Not Google Maps, not Mapbox, not expo-maps, not react-native-maps. The reason that matters is billing. The Google Maps SDK wants a billing-enabled API key before it draws a single tile; OpenStreetMap does not. So a simple map with a pin costs you nothing and waits on no approval.
Maps and location, at a glance.
Packages you install for the map – leaflet and react-leaflet already ship in the template
File that controls location permissions – app.json, regenerated by Expo prebuild
What it is
Why maps and location are usually the hard part.
On most stacks, putting a map in an app is a small project of its own. You pick a maps provider, register a billing-enabled API key, install a native module, then link it on both iOS and Android. Device location piles on more: you add a location library, then declare the permissions twice, once in the iOS Info.plist and once in the Android manifest. Two files, two formats. They drift out of sync the first time you edit one and forget the other.
None of that work is hard, exactly. It is just tedious, easy to get subtly wrong, and the same on every project. That is the part how to add maps and location to your app with Newly skips. The rest of this guide walks the path that replaces it.
Newly vs hand-coding
What Newly handles vs the manual route.
Hand-coding maps and location is entirely doable. Leaflet, react-leaflet, and expo-location are open source, and plenty of people wire them up by hand. The difference is how much setup is already done for you. Here is the same job, split down the middle: what ships in the template, and what you would otherwise wire up yourself.
What Newly handles
- Built-in Map component, already in the template – no install
- Leaflet + OpenStreetMap, so no billing-enabled maps API key
- Markers with title and description popups
- Custom initial region from latitude, longitude, and zoom
- Route between two points via leaflet-routing-machine
- Permissions declared in app.json, generated by Expo prebuild
The manual route
- Pick and register a paid maps SDK and API key
- Install and native-link a maps module by hand
- Open Xcode to add NSLocationWhenInUseUsageDescription to Info.plist
- Hand-edit AndroidManifest.xml for ACCESS_FINE_LOCATION
- Keep two platform-specific permission files in sync
- Write a WebView bridge to share one map across web and native
To get a map with a pin and a “center on me” button, the number of native files you edit is zero. app.json is the only file in play, and Expo generates the rest.
Where Newly fits
What Newly is, and the code it writes.
Newly is a paid AI mobile-app builder, from $25 a month. The output is real React Native and Expo (SDK 54), the same stack you would reach for by hand, and it lands in a repo that is yours to read, edit, and keep.
When you need the device’s position, Newly adds expo-location and declares the permissions in app.json, using the standard requestForegroundPermissionsAsync() and getCurrentPositionAsync() flow. You can open that code and change it. That is the short version of how to add maps and location to your app with Newly: skip the SDK shopping and the per-platform permission setup, and work in plain React Native.
How it works
What the Map component actually does.
You do not configure any of this by hand, but knowing how to add maps and location to your app means knowing what is there to ask for. Here is what the built-in map does out of the box, with the kind of prompt that turns each piece on.
The map renders the same on native and web
On iOS and Android the Map component runs Leaflet inside a WebView through react-native-webview; on the web build it uses react-leaflet. That split stays invisible to you, since it is one component in your code, and it is why the map behaves the same in your browser preview and on a real device. You write one map and get one map.
Markers carry a title and a description
Each marker takes a title and a description, which surface in a popup when the pin is tapped. That is enough to label a store with its name and hours, or a property with its address and price, without building a custom callout. Ask Newly to "label each pin with the shop name and a one-line note" and the markers come back populated.
You choose where the map opens
A world map is rarely what you want on first paint. Pass a custom initial region (a latitude, longitude, and zoom level) and the map opens framed on your city, your neighbourhood, or a single venue. Tell Newly "open the map zoomed in on downtown Lisbon" and it sets the region, so the first frame already shows the right place.
Routes are drawn between two points
The component can calculate and draw a route between two points with leaflet-routing-machine, for the "how do I get from here to there" case. Pair it with device location and the start point becomes the user's current position. Ask for "a route from the user to the selected restaurant" and the line appears on the same map. There is no extra service to sign up for.
Location permissions live in app.json
When Newly adds expo-location, it declares the permissions in app.json rather than in the native projects. Expo's prebuild then writes NSLocationWhenInUseUsageDescription into the iOS Info.plist and ACCESS_FINE_LOCATION into the Android manifest at build time. One file is the source of truth; the per-platform entries are generated. You never open a plist or merge a manifest by hand.
Everything lands in editable React Native code
The Map component, the expo-location calls, and the app.json permission entries all land in a real React Native and Expo (SDK 54) project. You can open each of them, read how they work, and change them. Newly handles the initial wiring so you skip the boilerplate, and the files stay plain React Native after that.
Describe the map, and try it.
From $25 a month, you describe the map in plain language and Newly assembles it in a real React Native and Expo (SDK 54) codebase. Tell it the pins, the area to open on, the route, and whether the map should follow the user. It writes the rest.
FAQ
How to add maps and location to your app, answered plainly.
You describe it. The generated app template already includes a built-in Map component, so there is nothing to install. Prompt the AI with something like "show these locations on a map" and it drops the component into a screen with your data wired in. The map runs on Leaflet and OpenStreetMap. On a real iOS or Android device it renders through Leaflet inside a WebView (react-native-webview); on the web build it uses react-leaflet directly, so the same screen works in both places. Because leaflet and react-leaflet ship in the template from the start, you never run an install step or touch a native module.
Put your places on a map with Newly.
With Newly, from $25 a month, you describe the map in plain language and get a real React Native and Expo (SDK 54) codebase. The Leaflet map is already in the template, and GPS and its permissions arrive the moment you ask.