My first app in React Native

Hello everybody who reads this article. Here I’ll describe to you how I created and deployed my first mobile app.

The Screenshots above shows how it looks now, but I’ll tell you how I created my first version of the app.

By using javaScript at the Back-End and Front-End I fell in love with it and I was curious if I could create a mobile app by JavaScript. Exploring the internet I found the React-Native framework. Since I was using the React framework for building an SPA it was easy to start developing for mobile using the React-Native framework. I was shocked that with React-Native I was able to develop for iOS and Android platforms. I immediately read the documentation and set up an environment. It wasn’t easy because you have to use Android Studio and Xcode for developing and deploying an app to both the apple and play stores, so be ready to read a lot. Of course, you can pass on it, but I recommend you start to explore each platform because it’ll save you a lot of time in the future and you’ll be able to make features for separate platforms. Then I created my first app which obviously was “Hello World”. I was excited when it showed up on both platforms. Since that time I started my project called Budget.

The next step was to find an idea for an app which I wanted to create and help people solve their problems. I was exploring the internet trying to find an idea for an app for about a week. Once, when I was writing down my expenses on excel, when I realised, that I’m too lazy to do it anymore and it would be nice to use a simple app in which to control my budget. Then I started to ask people how they count their money and if they use any apps for it. A lot of people complained to me that financial apps are too large and difficult to use. I was on the same page with them and it’s how I discovered the Idea for my app.

As for each product, firstly, we have to create an MVP and check it with our users. So of course I found the minimum for my app and it was 3 screens:

• main screen
• new transaction screen
• stat screen

I didn’t draw a design of any pages just made sketches on paper, because my main idea was about trying new technology not about starting a business. Firstly, it seemed easy and I started to create my first screen. But Immediately I found a lot of questions which I had to solve:

• where can I save data?
• how to change screens?
• Where can I save the state of the app?

Since I have been using React + Redux on a lot of web projects, I decided to try something new and my choice fell on React + MobX. For routing in the app I took react navigation. It was easy to save data because React Native has async-storage API, by using it we can save data on users’ phones.

Then I had to think about the architecture and make the app flexible to grow. Now I can say that’s the most important thing which you have to think about. I have been developing this app for more than one year and I can tell you that if you create flexible architecture and small components it’ll be easy to change logic or add new functionality. I took each screen and separated it into small components:

main screen:

• main info block
• add income or expenses
• footer buttons

new transaction screen:

• text input
• number input
• save button

stat screen:

• list of translations
• transaction

When you separate a big task into small pieces it doesn’t seem as big as you thought.

The next step was thinking about what data and data types I need. This is how the new object appeared:

Then I had to create functions like CRUD:

• add new transaction
• get transactions
• remove transaction

For each function, I wrote a test and checked that it worked well. In general, I find that writing tests save me time. I don’t worry about breaking something because tests usually ensure that everything works fine. I recommend writing tests simultaneously with creating new functionality. The second reason to write tests is laziness. When you create something without tests you have to debug it on devices but tests work faster and show you a result immediately.

One of the tests:

When you check each function of your app it helps you avoid a lot of mistakes.

Finally, after writing tests, I was ready to move on and create screens. On the main screen I had to show:

• total balance
• monthly income
• monthly expense

It pushed me to create 3 new functions:

After that all my functionality of the app was ready and I deployed it. I have to recognise that deploying isn’t an easy process and at the beginning, can take a lot of time.

Pitfalls

• updating React-Native is always a headache, always do it in a new branch
• check all functionality on both platforms because it might work differently
• be careful with updating Xcode and Android Studio it might provide bugs
• don’t forget to check your app on real devices (emulators work differently)

Conclusion

React-Native changed my mind and now I’m able to create mobile apps. I have a lot of friends (Native developers) and I know that it’s not the best way to create apps, but it’s the fastest way to create something uncomplicated. React-Native has a lot of advantages which I like and I already have tried to integrate it to native platforms, but this topic is for the next article if you like this one. I’m still developing this app which you can download here and I am working on a new one.

It’s my first article and I hope you’ll like it. Don’t hesitate to send me feedback.