Goal Tracker App: written in React.js and React Native and showcased with Android and IOS

Posted by

Hello readers! Long time, no post. My schedule has gotten the better of me these days. Most of the time, I am waking up early to work on a project or take a class before my son wakes up, however I never really find the time to take my learnings/activities and turn them into a post that my followers or those who are interested can see. Luckily, I have found a rare window where I can sit down and put my thoughts to digital paper.

Lately (I would say over the last year and a half), I have gotten super into mobile dev. All of this started with an interest in getting smarter about our money when my son was born. A google spreadsheet turned into a Salesforce 1 app which turned into a Swift IOS app which has now shifted to a app being build in React Native for cross platform compatibility. I have no idea where this road will take me but I am really enjoying the journey of learning this and growing as an engineer.

For those that are interested, this is the course I am currently taking on Udemy:

React Native – The practical guide

So far, the course has been amazing. I had very little experience in React Native but a good amount in React.js and I was excited to see how everything was applied.

This first project went over most of the basics but still allowed us to get our hands dirty and build a real app. It was really interesting to see the crossover between React Native components and how you could envision them being converted into swift code before they are rendered on a particular device.

As for the platform all of this is running on, I am currently using Expo. I chose expo, rather than the traditional react native implementation because I could get started easily, learn a lot and be able to easily simulate devices across IOS and Android with very little effort.

For IOS simulations, I am just using a component of XCode and for Android, I am using Android Studio and its device manager feature.

So far, I would say the most powerful thing I have seen out of React Native and React.js is the use of props with custom components. For those who are unfamiliar, this is a good source of information around how they can be used: React props. I am fairly used to creating new components for encapsulated usage across an application, but there is something that is so cool about a component that can create its own world outside of your App.js file and a simple reference of it in your main files brings it to life.

Another interesting piece of React Native is the use of a StyleSheet. Being so accustomed to CSS, its a bit odd to expose styling to React Native components through what is basically JavaScript and figuring how how that styling inheritance (or lack-thereof) works within what you are building.

Another interesting element of React Native is how these interfaces are built and shown on a mobile application. Elements such as <View>, <Text>, <Pressable>, <FlatList>, <Button> and other custom components that you can embed in your app structure are highly useful when making the translation from previous Swift experience and how each of these elements can contribute to your UI/UX / interact with your backend code.

Mostly, in all honesty, I am just humbled. I have been a Salesforce professional/developer/engineer for a lot of my career. You can sometimes reach a point in your technical understanding thats inflated with a massive ego and pride, however something like this comes along and totally brings you back down to earth and gives you a new appreciation for what we choose to wake up and do every single day. I love this and I couldn’t imagine my life being dedicated to any other thing in the amount of time that I am given to experience it. I feel very grateful that I get to wake up every morning, make my coffee, sit down to learn, and have everything I learn directly apply to my career and day job.

For each of the projects that I do as part of this course, I will be tracking it in my personal Github portfolio as a public repository so that others can fork the repo, connect it to expo and have fun learning. If there is anyone who reads this and is interested, I am more than happy to meet with you, help you set up your environment and get you going on building some cool apps.

Here is the link to the Github repo for the Goal Tracker App.

Thanks so much for taking the time to read a little bit of my experience and I am excited to get more into this course so that I can start applying all of these cool concepts to my budgeting app.

Happy coding!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s