What you need:
- Knowledge of React or HTML
- An account with Google
- Node.js and npm
- Expo: An App you can download on your phone (for Android, I preferred this route for app testing)
- Xcode: If you have a Mac and want to test using the iOS simulator (alternative for app testing)
Time to do some installs:
First we global install n which is awesome because it allows you to change your version of node. You might be wondering why would I want to revert back to an older version of node. The answer is that when working with libraries such as GraphQL or Stripe the latest version of node can have various install issues. I keep running into this problem when working with the newer libraries.
Above our line ‘npm install -g n’ is saying install n globally so we can access it in all our directories. Type sudo before the command if you have permission issues. Then our second command ‘sudo n 7.7’ tells n to go to version 7.7.
Use ‘node -v’ to check the version of node, this command will tell you if node’s version changed to the one your specified. Do this after to ensure that node changed. How do we go back? Simple.
This will take us back to the latest version of node. Now, to create our basic mobile app with a map.
‘myproject’ is a placeholder for whatever you would like to call your app. Give it a good name. Next cd into your project and npm install. npm is an amazing copy and paste machine. It will get all the files required in the package.json and install them. Then you can npm start and you should get something like this.
This QR code needs to be scanned by the Expo App on your phone. After you scan the code, the JavaScript will bundle and you should get a view on your phone. This will be how you can test your App for Android. Expo might close or re-bundle sometimes, so don’t get worried if your screen goes blank.
Conversely, if you’re developing an App for iOS, you will need Xcode, located in the App store. Disclaimer: Xcode can take half an hour or more to install. You will need to use ‘npm run ios’ instead of ‘npm start’. I do truly recommend Expo over the simulator because you can use Expo on your iOS device. The choice is yours.
After you get your App on your phone, you should see a screen that looks like the one below. What you see in the screen is exactly what you will see inside App.js.
Now look through App.js to see anything familiar. You see <View> and <Text> tags. These tags are synonymous to the corresponding tags listed below. Your <View> tag will contain everything you want to render inside your view.
- View === div
- Text == p (paragraph tag)
- Image === img
When you get rid of the styling on the bottom of App.js, it will look like this:
We are now going to make our own simple styling for our map. Not much longer till we can render a map. We need to install react native maps and go make an account.
- npm install react-native-maps
- Go to https://cloud.google.com/maps-platform/
Go to the ‘Get Started’ section and it will walk you through how to get an API key. Select ‘map’ in the check box option. It will ask you for credit card information. Google will give you a free trial and will not bill you unless you ask to upgrade your account. You will not be charged and they give $300 in credit for whatever you want to do with your App. Now you will get an API key for your map. If you do not hide your API key, bad things can happen like someone else ruining your account — or worse. Get in the habit of hiding your API keys.
We now need to secure our API key. Inside our root directory (same level as package.json), we need to make a file called:
Make sure you’re inside of the ‘myproject’ directory. Inside of the command line run
This will show you the environmental variables for this directory.
Inside of the app-env, export your API key like the following example. Do this without quotes so you can directly paste your API key.
Also give your API key a good name so you can differentiate it from other possible keys. For example, we have one key for maps and one for firebase here.
Now, to make the magic happen. Inside the same directory, add this:
If you ‘printenv’ after this command, your keys will now show up. We can now access these keys with:
Now inside of .gitignore / if you do not have a .gitignore make one
This will allow you to ignore the app-env information. You are now safe to push your code up to Github. So lets finally render this map. Go to:
Now you can see all the special tags that React-Native-Maps gives you. Install react-native-maps in your command line. Lets go back to App.js and import maps.
The react native maps documentation gives you a simple template to start with the map. Inside of the View, tag remove all the text and replace it with the <MapView> example the documents provide you. With Maps, Icons, and Images in react native, you may run into the problem rendering them when placed in the view. This can be fixed by styling these tags or components.
For the view you can pass in a style of flex 1 and for the map, you can pass in the style of flex 10 so the map renders on the whole view or more. Then, we pass the map view our api key and the provider.
This will only render the map on your Apps view. If you wish to use Markers or any of the other components provided by react native maps, check out the documents as they are quite clear to help you improve your map. https://github.com/react-community/react-native-maps
In the next post, I will demonstrate how to have a TabNavigation to clean up our app and give it more views. We will also map coordinates and style Icons representing coordinates.
Until next time.
Apply to App Academy: http://bit.ly/AppAcademyOnline