August 16

React Native: A full new application, Nature Tracker!

Hi again! Been a while since last time, but I promise you it has been worth it! So I knew that last time I said I would take a look at PHP and Laravel next, but turns out I lied… a little.

I did finish the PHP course on SoloLearn!

But my dad came to me with a pretty good app idea that I wanted to make for his birthday! The idea is an app where you can easily keep track of various stuff you find out in the nature. We both sat down and designed the app, and I got to work as soon as I got home!

After spending around 8 workdays on it, I ended up with this:

The app works like this: You have a big map (provided by Google Maps and react-native-maps) you can drag around or search for a specific location, and place markers on. To place a marker, you simply have to drag and drop one of the markers from the left side. Like this:

Now the user just need to put in a description of the marker (if they want to), and a marker is created!

If the user now taps the marker, it will show the marker name, description, how far away the marker is (it’s also updating the distance in real time!), the ability to delete it and also buttons to open Google Maps for plotting a route towards it!

The user can press the “Marks” button at the bottom to open a modal that shows a list of all the markers. The user can then press one of the markers to be brought to it on the map:

The settings screen allows the user to switch between English and Norwegian language, and adjust the icon sizes.

And that’s it! If you want to try out the app then it’s available on Google Play now!

There’s still some features that could be implemented, stuff that could be optimized, but overall I’m pretty happy with what I’ve accomplished in the 8 days I worked on the app. The challenges I’ve had with this app was learning how to deal with react-native-maps and Google Maps, localization and focusing more on performance based coding (using async functions, and just better code overall).

Thanks for reading!

Copyright 2020. All rights reserved.

Posted August 16, 2020 by Atle in category "JavaScript", "React Native

Leave a Reply

Your email address will not be published. Required fields are marked *