Making a React Native app turned out to be much more difficult than I originally thought it would be, so I figured I would share some of what I learned and try to save you from some of the hellish nightmares I experienced when working with these poorly documented technologies. Unfortunately, almost every mobile app needs a map feature because these danged millennials nowadays don't know where anything is located anymore. Back in my day we used a real map or printed out directions from Map Quest, or we just got lost. And we were grateful dag-nabbit! Anyway, enough nonsense, let's get started.
First you're going to want to install Expo. Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, and deploy on iOS and Android. If Expo really makes building a mobile app easier I seriously do not want to know what the more difficult option is like. Go ahead and install Expo globally and init a new project.
# Install the command line tools
npm install --global expo-cli
# Create a new project
expo init my-map-app
Now you're probably going to need to install Watchman also. Watchman exists to watch files and record when they change. That sounds important, even though I'm not really sure what it means. Expo recommends using it if you're running on iOS, but I was running on Android and still had to download it, so just get it. The cli commands are as follows -
$ cd ~
$ git clone https://github.com/facebook/watchman.git
$ cd watchman/
$ git checkout v4.9.0
$ sudo apt-get install -y autoconf automake build-essential python-dev
$ sudo apt-get install libtool
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install
$ watchman --version
Almost started. Fantastic. Open up your new app in your favorite code editor, and let's get that map in there. From the cli run npm install react-native-maps --save-exact or yarn add react-native-maps -E if you're into that kind of thing. You now have everything you need to get a map on a phone screen. Sweet. This next step is kind of iffy, because who really knows if we need all this stuff? I don't, Expo doesn't, React sure doesn't - or at least they're not telling us. So wing it we shall! Follow my lead and import all this stuff -
You'll probably want your map app to know where you are, and for that it will need your permission to get your location. Luckily, Expo actually documents how to do that here (https://docs.expo.io/versions/latest/sdk/permissions/).
But who wants to read docs??? Here's the code -
BTW this example takes place solely in App.js, so don't be bouncing around all confused about where to put stuff. You'll only need to keep track of location and loading for this app, so just two simple useState() calls will do it for you -
And you also need a couple functions to handle loading and errors -
Alright let's wrap this up. Expo has a handy-dandy component called AppLoading that hides away the rest of the app while it loads the needed resources with startAsync, and after the resources have loaded it can perform a function with onFinish to get the app started. You'll want to pass the previously mentioned getLocationAsync to onFinish here, and use the location to set your state. It'll look like this -
Once you have the location you can render your map. You need to put the MapView component inside a ScrollView component and possibly inside a SafeAreaView component. It's an inexact science to say the least, but that's what I had to do.
If you can't get the location to come out right, don't worry, it's not you, React Native Maps hates everyone equally. Just mess around with it for a while and eventually you'll get what you need. The object that initialRegion is looking for is built like this -
So there you have it. A mobile app map. There's a lot of other stuff you can do with your map, but you'll obviously want to look elsewhere for advice. I'm currently trying to render a scrollable list of messages over mine, so if you have any good ideas let me know.
Top comments (0)