How to start a React Native application

Photo by catiall

You missed me right? Ok, in this 2021 I promise you an article per month.

Yes, I’ve said it and I’ll do it. I want to step up the game with a “simple” but important goal that I’m setting to myself.
So no more long pauses, I’ve got plenty to tell :)
So what we’ll be talking today?

The many ways of starting up a react native application

Being a rising technology, despite all the fuss in the past about companies that dropped it, the whole React Native community offers many ways of starting up an application.
PS: This article isn’t necessarily intended for skilled or non-skilled react native developers, but it’s not about how to start developing with react native, but more of a how to produce the first boilerplate you’ll work on.
So I’ll list them and then then discuss a bit of the pros and cons about each one of them:

  • react-native init
  • create-react-native-app
  • ignite new
  • expo init*

* expo is an ecosystem which oversimplify react native development process. It enables you to produce builds, set app icons and splash screen, use native apis (and so on) in an extremely easy way. But it clearly comes with a cost. If you want to know more about my opinion on expo, I’ve wrote some stuff here.

Starters with native code

react-native init

This is the most barebone starter, the one developed by the same devs who build React Native itself.
With this you have full power and control over all the native code. I’m assuming here you know that every React Native application is made by two native projects: an iOS and an Android one (moreover some starters that I’ve listed hide this native code to you and we’ll discuss this shortly).
As a starter, this is as low level as you can get, but there are of course other ways of using React Native in a more “hardcore” manner, which is including it directly into the code of your native Java/Kotlin/Swift ecc. apps*.
*A similar strategy is used in web apps that are transitioning towards React.js for example, where you’re not yet ready to use a full blown starter like create-react-app and therefore you start to use it only in the pages where you need it.

init results

The command npx react-native init <app-name> produces these folders:

react-native init results

You can also associate some options to the init command like the folder where to put the rn app files, the tile of the application or the template to use (yes you can use various available templates or one that you can create yourself following this official one that includes typescript in the project)

Pros

It’s the most versatile one. You start with a blank page (or almost blank, based on the template you may choose) and then it’s everything up to you.
So:

  • you know your app will have particular needs such as bluetooth communication
  • you want to be able to choose by yourself the services your app will use (one signal, firebase crashlytics and so on)
  • you need to communicate with proprietary hardware or more in general you’ll have to write custom native code
  • you have a very strong feeling about the libraries you wanna use to build your app (react-native-navigation for example)
  • you don’t plan to use any of the expo modules

If any answer of each of this matters is yes, then this is the starter you want.
The pros can be derived by this list

Cons

In one word, complexity. The handling of such a barebone structure is more complex than the ones that hide you the native parts for obvious reasons. Depending on which are the things you’ll need to do, here a list of the basic stuff you might find problematic to do if you’re new to this:

  • Setup your application icon
  • Produce builds of your application
  • Set the splash screen of your application
  • Setup push notifications

And the complexity obviously grows as the functionalities requiring native knowledge increase

Starters with or without native code

create-react-native-app

This starter slightly increases the abstraction of the code it delivers by a bit including expo and the expo-unimodules and providing pre-installed libs like react-native-web (which allows you to use react native code in the browser), react-native-reanimated, screens and gesture-handler.
It’s a step towards the expo ecosystem but it still gives you the native apps code*.

Be aware that it also depends from the template you choose during the installation process. Some of them use only expo and therefore no native code is delivered.

init results

The command npx create-react-native-app <app-name> produces these folders:

create-react-native-app results

Pros

This starter (which is basically an expo init + expo eject as we are about to see) promises to give you a structure where you can use all (or almost) the useful native modules and functionalities that are included in the expo ecosystem without losing the possibilty to add native code.

Cons

We’re basically working with an higher amount of complexity compared to the “react-native init” command due to the expo native libs being included.

In conclusion, if you need this starter or not is equals to answering the following question: do you need some expo stuff in addition to stuff that expo doesn’t give you?

ignite

This starter focus greatly on the react side of things. It delivers various useful react libs and react-navigation, AsyncStorage, Flipper and Reactotron as native libs and utilities that are compatible with both react-native or expo (meaning that you can have a project with or without native code).
It also featurs generators and a preconfigured storybook istance that will help you to develop your UI.

init results

The command npx ignite new <app-name> produces these folders (you can also use the —expo flag to avoid having the native code in your project):

ignite-new results

Pros

It basically gives you a little boost as long as you know the tech stack used in there.
I honestly never completely understood this kind of starters since it’s very easy to create a simple bootstrap yourself with the tech stack you prefer… BUT, there is a but.

Ignite offers you the feature of generators. Basically you can define templates that you can use to generate certain files. (if you know angular it’s some sort of schematics but for react native and that you can customize very easily).

This is the basic component template (it uses ejs as a template system):

import * as React from "react"
import { TextStyle, View, ViewStyle } from "react-native"
import { observer } from "mobx-react-lite"
import { color, typography } from "../../theme"
import { Text } from "../"

const CONTAINER: ViewStyle = {
  justifyContent: "center",
}

const TEXT: TextStyle = {
  fontFamily: typography.primary,
  fontSize: 14,
  color: color.primary,
}

export interface <%= props.pascalCaseName %>Props {
  /**
   * An optional style override useful for padding & margin.
   */
  style?: ViewStyle
}

/**
 * Describe your component here
 */
export const <%= props.pascalCaseName %> = observer(function <%= props.pascalCaseName %>(props: <%= props.pascalCaseName %>Props) {
  const { style } = props

  return (
    <View style={[CONTAINER, style]}>
      <Text style={TEXT}>Hello</Text>
    </View>
  )
})

and you can create such one with the following command:

ignite generate component MyAwesomeButton

this, by default, will generate a .stories file too! And you can actually decide everything very easily, pretty cool.

Cons

Well, pretty obvious: many, possibly, unknown stuff (to you) to handle but at least all of it isn’t part of the native code and, truth to be told, a great part of ignite “just” helps you in the process of development and gives you stuff that won’t even be part of the actual code that your users will have on their devices.

So as long as you like their tech stuff, I can’t see big cons here.

Starters strictly without native code

expo

I’ve already dropped you some info about the expo ecosystem at the beginning of the article and there isn’t much else to say. All the cons and the “why” and “when” of it have already been discussed in this other article.
It’s very easy to pick and start developing of course and this is the bigger pros.

init results

The command npx expo init <app-name> produces these folders (you also have the possibility to use templates that kickstart the app with certain navigators or with typescript): expo-init results

As you can see you don’t get any android or ios folder with this.

Conclusion

I’ve possibly showcased the most known ways of kickstarting a react native application.
Now do your magic and then come back and tell me if you made some great with it @giacomocerquone on twitter.

See you at the next one :)