A few things you need to know before building your first react native app

Before you start building your first react native app make sure you read through this guide

I am by no means an expert on react native by any sense of the word. But I do absolutely love using it to build mobile apps.

It’s fast, it’s simple and it’s easy to learn, you can even publish to both the app store and google play with the same code base!

It is incredibly easy, especially for those of you who are already react or javascript developers.

The first time I tried building an app, it only took me about 5 minutes to get up and running with react native.

Then after a few weeks of building and learning, I was getting ready to publish only to find… the back button on my android closed the app rather than the screen!

Back to square one. I had to add in react-navigation which meant re-writing a lot of code.

Then I ended up removing firebase after building the app based around it… as you can guess it ended up taking me an extra couple of weeks before releasing my first app, MaBudget - IOS | Android.

So now you can learn from my mistakes as there are a few things that you should always bare in mind before starting your react native app.

Contents

• Planning
• Expo
• React navigation
• Styles
• Ejecting
• Final notes

1. Proper planning

Make sure that when you plan out your react native app, you plan it thoroughly, I would suggest that after you have it all planned out, sleep on it for a couple of nights before going ahead otherwise you may shoot yourself in the foot.

When planning, get rid of anything that you do not absolutely need, because people don’t want complicated apps that takes up their valuable time to learn how to use. It needs to be easy enough so that whoever uses your app can pick it up with no prior knowledge and start using it right away.

For example, if you are planning on adding users, accounts, and databases, have a long hard think about if there is another way to do it because signing in is not only a big deterrent for the user, it’s also a lot of extra work for you.

Perhaps you could use react natives AsyncStorage for this scenario instead of having an external database.

As developers we often get lazy if we ever have to design something, maybe we will draw a wireframe on a piece of paper and build from there.

Whilst there is nothing wrong with that, you need to then use that wireframe to build a proper design using something like Adobe Illustrator, Photoshop or Sketch. You need a good, clear, finished design to create a user friendly app that is easy to use. Simply put, you need a good final design to do that.

Designing an app is far quicker than building it because you have software that helps you do it.

So, take the time and design it properly.

Finally, in terms of planning, try to plan it so you do not need to eject it from expo, I will talk more about this later on, but if you plan from the start trying to avoid ejection, you will save a lot of time!

2. Expo

You can think of Expo as react natives version of create-react-app, expo is a true life saver. It will literally divide the amount of time it takes you to build an app by two, or more.

This is not an exaggeration, it really does save you a lot of time, it does this in a few ways, the biggest being no configuration.

You no longer need to deal with the android and ios config files with gradle and cocoa-pods when you use expo. You just need to add in a few bits like your app logo or app name into app.json.

One little tip regarding the app.json, make sure you add in the permissions property otherwise expo will assume that you will need access to all permissions. You can remove all permissions like this: app.json

"android": {
    …,
    "permissions": []
}

Expo gives you access to some really easy debugging tools, some of which resemble google chrome’s css debugger a little.

The main part that makes debugging with expo so easy is the expo app. You can run your application directly through their and this works on any device, whether it is an emulator or a real device.

All you need to do is scan the QR Code and you’re good to go!

Expo is also shipped with loads of functionality that you might need in a lot of apps. Sourcing and learning how to configure and use each package would be a task but with expo having it built-in, it makes it very easy.

Here are a few packages that come with expo that I use on almost every build (location and localization are for translations).

 - Google AdMob
 - Localization
 - Location
 - Font.loadAsync

3. React Navigation

When you make a website (that isn’t an SPA) you will often make use of the browsers history to go back to previous pages.

Whist your browser may handle this for you on standard browsers, in react native nothing will do this out of the box.

This is where react navigation comes into play, it handles all the “browser history”, the navigation, and functions for you, you can even pass props through it!

It is an essential part of native mobile apps because when the user presses the back button they expect to go back one screen and not close the whole app.

It is incredibly easy to set up and will save you a lot of time (and save you rebuilding your app because you’re reading this!).

Here is a quick set up example where you use a component called Home as your initial screen:

import React from 'react';
import { Image } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from './src/ui/home';
import Settings from './src/ui/settings;

import logo from './src/assets/logo.png';

const AppNavigator = createStackNavigator(
  {
    Home,
    Settings,
  },
  {
    initialRouteName: "Home",
    defaultNavigationOptions: {
      headerLeft: (
        <Image source={logo} style={{ height: 44, width: 44, marginLeft: 20, }} />
      ),
      headerStyle: {
        backgroundColor: '#008c8c',
        borderBottomColor: '#fff',
        borderBottomWidth: 1,
        height: 60,
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

export default createAppContainer(AppNavigator);

A prop called navigation will be passed into each screen, which you can call to move between screens navigation.navigate('Settings', {...props});.

That’s the basics of using react navigation. I suggest that you look at their official documentation before using it though, you can find it by clicking here.

4. Styles

If you have ever used css modules this will be straightforward for you to get the hang of, if not you might have accidentally make a mess of this, prior to reading this post but don’t worry there isn’t a massive learning curve.

Styling in react native is actually pretty easy as it is very similar to the properties you would use in css, it’s more about trying to figure out how to structure it all and having the correct mindset.

I would recommend that you write reusable components, not reusable styles, doing this will keep your code clean and easy to find what is styled and where.

• Avoid having one huge file with styles as it will become ugly very quickly.
• Avoid inline styles like the plague.
• Avoid trying to recreate media queries, instead build intelligently using flex.

Try to structure your components in directories to keep all styles with their component files, I have a whole blog post on this (click here), about react architecture. This will make your code very clean, maintainable, and manageable, it is a must.

5. Ejecting

Finally, when you use expo you may have heard a term called “ejecting” or “linking”, avoid this at all costs.

Basically all the benefits you have gained through using expo will vanish if you do this, unfortunately you cannot always avoid this, but if you can avoid it you will save yourself a lot of time now, and later on.

You may have to do this if you need to add in extra packages / modules that require linking to you app such as In App Purchases (at time of writing).

The good news is, is that expo seem to be very active in adding new modules, so chances are, if there is a large group of people needing a module it will be a matter of time before it gets added in, but that doesn’t help you now regrettably…

Ejecting will mean you have to deal with gradle and CocoaPods again, but you can still finish your app if you do have to, just save these bits for last.

If you have managed to get by without ejecting you can now build both your Android and IOS packages in an instant by running: expo build:android or expo build:ios.

Final notes

If you are going to add in translations in the future, build your app with it in mind now because this will save you a lot of time if your app has a lot of text.

Once you have finished building your first react native app, you still have a little while to go.

You now need to upload your app to the various stores, which will cost a fee to join as a developer.

Once you have joined, you will have to craft yourself a high quality listing page which will need creative screen shots, copy, keyword research and maybe a video, then you will need to wait to get your app approved by apple and google.

Then you need to think about how you are planning to market your app, which 9 times out of 10 will cost you a little bit of money.

But with all this aside, it is 100% worth it.

Enjoy making your app, and post any apps you have build using this information in the comments below, I would love to see them and try them out!

Will