How To Easily Build A Cross Platform Mobile Application With React Native

Coding in JavaScript. Photo by Luca Bravo on Unsplash

Did you just found out how great React Native is in building cross-platform mobile applications, and are looking for something like one-stop-know-all solutions to make your development process pain-less, then you have stumbled on the right place!

Like you, I also found React Native great, not only because of it being a cross-platform framework but also the easiness of how one can build an application- which is nearly similar to native android or iOS application in look, feel and performance. Earlier I tried Cordova, which, unlike React Native, makes an hybrid app and was not as fast in performance as a native application.

During my app developing phase, I faced pitfalls which taught me a thing or two — those I will document here.

This story will best serve its purpose if you have recently started with React Native and already tried a demo application either from the official tutorials or by yourself, and want to know how to setup the application properly or the common practices and stuffs which will make the development easy.

Basics

First of all you must have gone through the official documentation of both React and React Native as it provides all the necessary knowledge to get you up and running.

If you have done so, now you know that React —

1. uses state and props, to pass data throughout the application,
2. the data travels one-way, and
3. the data passed in props is not mutable.

Also, you might have heard about the following terms, which are related to React Native —

1. Action
2. Stateless Component
3. Stateful Component
4. Reducer
5. Store

Setting Up Project

Whenever you start a new project, few things are universally applied—

1. You need to figure out different types of tasks needed in your application.
2. You need to organise those files properly.
3. You need to follow a particular set of coding conventions and popular guidelines.

And for React Native specific you have to consider these things —

1. You need a single top container which will pass data to every other containers. By containers I mean stateful components (Learn more on this here).
2. You need an easy way of transition of screens.
3. You need an easy way to manage your application forms.
4. You need to see what values are passed where easily, for better debugging.

So let’s get started.

A man, ready to start learning. Photo by Connor Limbocker on Unsplash

Task Division

In every development you need to assign different tasks that each section of your application will cover. In React Native following are the major tasks that you would need divisions for —

1. Containers — these are the stateful components of React Native which deal with data i.e. make server calls, set local state and pass the necessary data to components. So their job is limited to accessing and distributing data as and when required.
2. Components — these are the stateless components which deal with the visualisation of the data. Their job may include reorganising and omitting data as and when required to build the UI of the application. Data and callbacks are passed to them by containers via props.
3. Actions — they do the job of passing data to reducers for updating the store, where all the application data is stored. It may include some fetch request — calling to specific APIs, get response and pass appropriate data to reducers, or may include some custom data to be passed to reducers.
4. Reducers — what they do is listen to the emitting actions and update the store as required with the data received.
5. Store — where all the data live.

These are the major tasks of an application in React Native and keeping these tasks independent is necessary to keep yourself organised. Not only it would help you keep track of your data flow but also ease your debugging process. I believe that these amount of boilerplate is necessary to keep things clean. This structure will help you find your culprit, in case of any misdoings/mishappenings, and do justice to your application.

Rest of the files which are not directly involved with your application but eases your work can be organised as you feel necessary, like

• helper functions — which are needed inside your code can be refactored to a helper directory,
• application fixed values — which remain constant throughout the application can be refactored to defaultValues directory.

Structured files helping people to look at specific places. Photo by Anthony Martino on Unsplash

Project Structure

The next milestone for painless development is to rightly setup the project-structure. There are two directory structures that I found very useful while working previously with flask web applications, which can be applied here too.

For small and mid sized application, you can create common place for all the actions, components, containers, reducers etc. The major advantage of such setup is that you can keep track of similar functionalities at a single place.

SmallApp/
  android/
    ...
  ios/
    ...
  src/
    actions/
      login.js
    api/
      login.js
    components/
      Login.js
    containers/
      Login.js
    reducers/
      login.js
    styles/
      login.js
    App.js
  ...
  index.js

When an application grows larger, it becomes difficult to keep track of functionalities of certain component across different directories. For a large application, you can keep every component as a module. The major advantage of such setup is that you can import/export any reusable code that you might have previously worked upon. All you need to do is to copy the whole module into the new application.

LargeApp/
  android/
    ...
  ios/
    ...
  src/
    login/
      action.js
      api.js
      component.js
      container.js
      reducer.js
      style.js
    signin/
      ...
    App.js
  ...
  index.js

Guidelines shown, to help people reach the destination. Photo by Smart on Unsplash

Conventions and Guidelines

Following a widely used convention is productive as not only that practice will make you avoid obstacles that others had faced before but will also make you learn and understand others project easily.

Since this is a JavaScript framework, you can follow one of the JavaScript conventions.

Besides, you can keep these points in mind —

1. Use camelCase for naming variables and functions
2. Use PascelCase for naming classes and arrow functions
3. Avoid use of inline styling
4. Proper use of components and containers
5. Use local state for UI changes (like toggling switch)

For coding I used Visual Studio Code editor and integrated ESLint (a linter tool for identifying and reporting on patterns in JavaScript) with it. What it did was automatically fixed my code as per conventions. Those which it could not fix automatically, it reported. It might not auto fix correctly all the time, but mostly it did.

Here is what I used in the user settings for my VS Code —

{
  ...
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
}

For debugging, you can use Chrome Developer Tools or React Developer Tools. Chrome Developer Tools show values passed via state and props and React Developer Tools show data passed to different components.

A stack of stones building a structure. Photo by Lisa Zoe on Unsplash

Stacks

As of now we covered all the universal setup that you should consider in your project. Now moving on to React Native specific.

For all of the problems that was discussed before, specific to react native, you need to use packages which have already done the heavy lifting for you. You are only required to call the API, and voila, your work is done.

Here are few packages that I found useful for my project. I will not discuss about them in detail, only about what they do.

1. React Redux
   If you have used React then you might have heard about Redux. Redux is a single store where all our applications’ data is stored. In React Native, there is a counterpart of Redux named React Redux providing similar functionality. It recommends you to declare a single top container Provider which will pass data store to every other containers. Any container which wishes to access data needs to stay connect()ed.
2. React Navigation
   This package is used for transition of screens. It allows you to have three different navigation possible —
   Stack navigation — where next screen is stacked on top of previous one,
   Tab navigation — where next screen replaces current screen, and
   Drawer navigation — toggle drawer screen.
3. Redux Logger
   This package allows you to log data when there emits an action in your application.
4. Redux Form
   It manages your form state in Redux, which means they provide easy APIs to read and update data in your application forms.
5. React Native Vector Icons
   Who does not love icons. If you are one of the lovers feel free to have a look at this package consisting of wide varieties of icons from different bundle sets and use it in your application.

Apart from these you can have a look at this (react community), this (react native commnuity) and this (awesome react) repository to find other packages as per your needs.

Once you get the hang of React Native and need more feature for easy implementations of different stuffs, you can look into Redux Thunk, ImmutableJs, PropTypes etc.

Conclusion

That was all you need to know to easily get your application geared up and running with React Native. Since without a real example all these explanation seems incomplete, I will write another story — continuing this, where I will build a demo application with all the stated packages and make it running.

Hope you found what you came for. Peace!

Edit: You can find the next article here.