How I developed my first React Native app in 14 days

React Native tips for newbies… By a newbie…

As a junior Web developer, I try to learn as much framework and programming languages that I can. In the past two weeks, I’ve decided to focus on React-Native: a javascript framework that let you build native mobile apps.

Typically, when I decide to learn something new, I think to build an app that can be useful for me and other people. However, with React Native I’ve decided to design an app for money management… Nothing original this time, but I wanted to design something that can be easy to use and secure (user financial movements aren’t shared with an external server).

Ok. Stop talking about my app, let’s talk about my React-Native journey and some important tips!

1st Rule: don’t use Expo!

Using Expo (as suggested by official documentation) caused me to waste two days. Let me explain: Expo is an (official) set of tools, libraries, and services that let you build React-Native app very easily.

When you use Expo, you don’t need to worry about a lot of things, but if you want to use or build something that is not included in Expo tools, your life will become very complicated.

In my case, the breaking point was the Google Sign in process and the necessity to implement some charts. Expo had a library for Google Sign in, but doesn’t have a library for SVG charts. The solution was to use one external library (react-native-svg-charts) but… Surprise! When you use Expo, it seems impossible to use a library designed for pure React Native.

For this reason, after two days of developing, I was forced to kill the Expo project and build a new pure React Native project from scratch. Regarding this… When you will read the React Native Getting Started page, follow the guide under the section “Building Projects with Native Code” (pure React Native) instead of Quick Start (Expo).

PS: Expo isn’t so bad… But if you want to learn React Native and you don’t want limits during the development process, Expo isn’t the right choice.

Setup process: getting started

Deciding to start bypassing Expo, you will face a more complex setup process. You need to:

• Install dependencies (Node and Watchman)
• Setup Xcode or/and the Android development environment
• Link an Android/iOS device via USB for real-time debug

Nothing complex, but that isn’t a “ready to go solution” as the Expo environment. Obviously, there is no need to explain this process, you can follow the official documentation that is clear and more updated than this post.

Design your app and think about file structure

When your React Native app is ready to be customized, you should stop one moment and think about what you want to achieve. Start with:

• Mockups: even if it isn’t the most professional way to start a developing project, if you begin with graphical mockups, you will have no technical limits in your mind. This happens because, when you draw on a paper, you don’t think about how much difficult is to build a particular type of menu, an animation, a scroll view, or any other components. In this way, you will face a lot of challenges during the developing process and you will be motivated to achieve your targets.
• Components: defining every app components is one of the most important things when you decide to develop a React Native app (same for ReactJS and Vue). Think about your app as a “box of components” where every component has some props and, why not, also sub-components. The more props you will include, more flexible and easily editable your app will be.
• File Structure: as I said, your React app will be composed of a lot of small elements. Every element should be included in a stand-alone JS file. Decide in advance where and how to place that files in the project folder.

Components: more is more (WTF?)

Dashboard View

About the components, let me explain in what consists. In my case, my app is composed by many views and, in every view there are some components. Let’s talk about the main view called “Dashboard”. Here I’ve a lot of components like:

• 2 Round animated buttons
• Box for current balance
• Navigation Button (Stats)
• Records Box with last 3 records

Some of these components, like the Round Animated Button, are used in other part of the app. For this reason, i though to include some props like:

• Button text
• Button background color
• Button onPress color
• Pulsating animation
• Pulsating animation color
• Button onPress action

With this single component <RoundButton>, I don’t need to develop a new button for every new usage in the app, but I can include that component every time that I want simply using different props:

In order from left to right:

<RoundButton text={”+”} color={”green”} pulsatingColor={”lightGreen”} pulsating={true} onPressAction={…} />

<RoundButton text={”+”} color={”green”} pulsating={false} onPressAction={…} />

<RoundButton text={”✔”} color={”lighterGreen”} pulsatingColor={”lightGreen”} pulsating={true} onPressAction={…} />

<RoundButton text={”-”} color={”red”} pulsating={false} onPressAction={…} />

Android or iOS? No problem if you can test both

With React Native, you don’t need to choose to build an app for Android devices OR for iOS devices. Your app will be compatible with both operative systems, but during the development process, there are some small differences.

One example is the Date Picker. React Native use the Android and iOS native picker and their implementation is slightly different.

Nothing so difficult, but if this is your first project, my suggestion is to focus only on one operative system. In my case, I focused on Android because I could test the app on numerous real devices during the development process.

Debug process very easy with these 2 tools!

When you will develop your first app with React Native, you can test all progress in real time on a virtual or on a real device. I preferred to test my app progress on a real Android device linked to my Mac via a simple USB cable.

Following the official guide, you will able to develop your app while it shows every alteration on your device. Once that you will launch the app on your PC, the app will be synched on your mobile device and updated at every code alteration. But watch out: this isn’t a default setting, you need to shake your device (opening the React Native development menu) and enable “Hot Reloading”. In this way, when you will update the code and you will click on the terminal where you had launched the React Native run command (react-native run-android), the app will be automatically rebuilt and sent to your device.

Another great debug tool is the “Debug JS Remotely” feature that can be enabled by opening the React Native development menu (shake your device!). By using this feature with Chrome, the browser will automatically open a new tab where you can open the Development Tool console… Yes, the same tool that you use to debug Javascript (and many other things) when you work on a website.

Exporting the app as APK (installable file)

You had followed the getting started guide, you thought about your app structure, you had developed your React components, and you had tested your app using all the debug tools provided by React Native.

Now it’s time to build and exporting your app as an installable file. In my case, using Android, the result was a new and sparkling APK file ready to be installed on my device or, why not, uploaded on the Google Play Store.

Ready to go? Here some useful React Native libraries

About libraries… Here are some React Native libraries that I used in my first project and could be useful for your first project too:

• react-navigation: an essential library that allows you to build a multi-page app with navigation buttons, gesture, props, etc…
• react-native-gesture-handler: give more control on gestures
• react-native-google-signin: useful if you want to implement the typical signin/signup with Google process
• react-native-swiper: if you want to include components similar to a carousel
• react-native-svg-charts: if you want to include charts (area, bar, line, pie, progressCircle charts)

Let’s Recap

Following these tips, you can develop a fully working React Native app ready to be installed on Android and/or iOS in a bunch of days. Let’s recap some important steps:

• Avoid Expo
• Setup your React Native application following the official documentation
• Think about a simple mobile app to build
• Make some mockup (pencil+paper or Adobe XD)
• Decide what will be the first platform to focus on (Android or iOS)
• Design and Develop React components
• Develop the app with the help of React debug tools and libraries
• Good luck!