Mobile Development with React Native

Introduction

This react native tutorial should help you to get a high level understanding of how to begin or get started with Mobile Development with React Native.

There are two ways to get your React Native applications bootstrapped. The first way is to use Expo Managed App (we will get into what a managed app is later) and this is the easiest and most hassle free way to get started. The second way is to use React Native CLI and create a Bare App. This process is definitely more involved but gives a lot more control and access to libraries which might not be available via Expo.

Managed vs Bare Applications

Pros for Managed Apps

• Managed Applications is the way to go if you would like expo to take care of everything for you. You only write Javascript or Typescript and expo helps with everything else from publishing your project, providing links to share with other people, and even releasing the Apps (IOS and Android) on the App store. Official Documentation describing the difference between them is here

• Expo removes a lot of the tedious set up portions for you and provides you with a plethora of API's and Services that can be used to make your development process smoother.

• You can easily share the Apps with anyone using Expo Go to get feedback during the development process. Once you publish your app with Expo, you will get a URL, which can be shared with anyone who has the Expo Go app installed and they can then view and run your application on their native devices. This is also possible for Bare Apps with Expo, albeit it requires a bit more work.

Cons for Managed Apps

• Downsides to Managed Apps is some features and libraries are only available as React Native Modules and hence will not work with a Managed App from Expo. If you find yourself in this position there is a feature to eject from Expo.

• Managed Apps are usually larger in size because of all the prepackaged libs that are associated with them so they do increase the size of your vanilla application. This could be a deterrent for some people with limited space on their devices.

Bare Applications (Expo)

Expo does give you the option of having bare apps and thus you get some support from expo, while also getting the freedom of using any libraries that use react native modules. Expo is usually a version behind on React native , but the benefits of that is they have a lot of testing before they upgrade to the latest offering from React Native.

Bare Apps with React Native CLI

This gets as close to bare metal as you can. You get to choose the libs you want so you application size will definitely be the smallest possible. You also get access to the latest features versions of React Native.

Installation

The official Documentation to install expo is available here and is extremely precise and detailed.
Install the expo cli

• npm install -g expo-cli BootStrap a new project called AwesomeProject
• expo init AwesomeProject

Install Options

• Now using Expo CLI we will init a new expo project. You will have two options creating a bare project or a managed project.
• Choose the Managed Options and proceed.
• yarn start
• Choose your platform IOS, Android or Web.

Common Installation Problems (with expo installation)

1. Ensure that you have the latest version of Xcode Running for IOS, and Android Studio if you are developing for Android.

2. When you yarn start and your App doesn't open up in the simulator and you get an error, then the first thing to try is open the simulator with Native IDE. So use Xcode and Open simulator or Android Studio and open simulator. Once that works then you can close Xcode / Android Studio. Now try starting you App again yarn start and choose IOS or Android, it should open up your simulator and you should see your App running

Conclusion

If you are new to React Native Mobile Development and are just looking to hit the ground running, then Expo Managed Apps is a great way to do that. They also provide a lot of services that enable you to release your code for both Apple and Google PlayStores.

However if you would like to use specific react native modules that don't have expo equivalents, and care about your application size, and just want more granular control, then you have Choice of having Bare Apps with expo or Just with React Native CLI.