My Challenges with React Native: Blog post 3

For this blog post, I wanted to focus on the challenges of rendering google maps on react native applications using MapView.

Recap: My last post explored the challenges with the structure of native applications and the rendering of sub-components inside a main component.

I built a basic application with two tabs within a single app. The first tab is a the Home screen with a ‘Go To Google Maps’ button. The second is a Settings tab.

Though we have two tabs, we have three components -

1. The Home Screen
2. The Google Maps Screen
3. The Settings Screen

For the Settings screen, I simply constructed a SettingsScreen class with only styling components inside it. I’ll add more features to this screen later.

For the Home screen, we should construct a HomeScreen class that contains a Button titled “Go to Google Maps”. This button when pressed should navigate to the Maps screen. Within the code block below, we see OnPress navigate to ‘Maps’ — this is the Maps Route we will declared in our Stack Navigation.

Lastly, for the Maps screen, we should construct a MapsScreen class that uses MapView to render google maps on the application.

What is Map View?

When I was first trying to figure out the best way to render google maps, I came across many blogs and tutorials that used react-native-maps. However, these tutorials used the old react native format where the android and ios development modules were separate. Understanding these tutorials was confusing, especially since the folder layouts and errors look different in native now. Thus, I would highly recommend using MapView and tutorial on the expo development website.

MapView is a component that uses Apple Maps or Google Maps on iOS and Google Maps on Android. It was built by AirBnb and can be used directly when running applications on expo.

When I first ran the code for MapView, it confused me because the screen appears blank. When I looked up the error, I found this link that led me to believe that I needed an API key for development on my android device. At the bottom of the expo MapView page, there are special instructions to “configure for deployment as a standalone app on Android.” Thus, I spent a long time trying to retrieve a key which was not required. Even if you’re only running expo on an android device, do not get confused by this. These instructions are slightly more complicated and should only be delved into if you’re using an android simulator.

With react native being a new technology, sometimes there are unexplained errors or results. What I learned was that if the answers are not immediately found, one should simply rewrite the code and run it afresh, and this might solve half the problems (as it did for the blank screen in this case).

To use MapView, you must import it from ‘expo’ as shown in the code snippet below. We need an initial location to launch the maps from and so, I’ve hard-coded the latitude and longitude for Bucknell University, Lewisburg, PA (which is where I am).

Now that we’ve constructed the screen, we have to find a way to move between them. In the next blog post, I will spend some time on navigation and using the GPS location to launch maps.