Skip to main content

React Native CLI Vs Expo what to use?


React Native CLI vs Expo :New React Native Apps.


If you’ve decided that React Native is right for your project, this article is for you! We will be cover your options for bootstrapping your app, and the pros and cons for each option.

There are two methods for initializing and developing your app: Expo, and the React Native CLI. Until recently there was a distinct third method, using Create React Native App (CRNA). CRNA has since been merged with the Expo project, and only continues to exist as a separate entity to provide backwards compatibility.

Expo falls into the first category of tools, providing a more robust and developer friendly development workflow at the cost of some flexibility. Apps bootstrapped with Expo also have access to a slew of useful features provided by the Expo SDK, like BarcodeScanner, MapView, ImagePicker, and so many more.

Initializing an app with the React Native CLI, via the react-native init command provides flexibility at the cost of ease of development. A React Native app created with the react-native init command is said to be a pure React Native app, since none of the native code is hidden away from the developer.

As a rule of thumb, if the documentation for a third party package states that you need to run the command react-native link as part of the setup process, then this package can only be used with a pure React Native app.

So what do you do when you are half way through building an app with Expo, only to find out that a package integral to your app’s requirements is not supported by an Expo development workflow? Luckily Expo has a method for turning an Expo project into a pure React Native app, just as if it had been created with the react-native init command. When a project is ejected, all of the Native code is unpacked into ios and android folders, and the App.js file is split into App.js and index.js, exposing the code that mounts the root React Native component.

But what if your Expo app depends on features provided by the Expo SDK? After all, much of the value of developing with Expo comes from the excellent features the SDK provides, including AuthSession, Permissions, WebBrowser, and so much more.

That’s where ExpoKit comes into play. When you choose to eject from a project, you’re given the option of including ExpoKit as part of the ejected project. Including ExpoKit will ensure that all of the Expo dependencies being used in your app will continue to work, and also give you the ability to continue using all the features of the Expo SDK, even after the app has been ejected.

Expo

According to the expo.io site, Expo is “a free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React.” Expo is becoming an ecosystem of its own, and is made up of 5 interconnected tools:

  1. XDE: the Expo Development Environment. The Expo team calls XDE the “graphical development environment,” and it has macOS, Windows, and Linux versions. This is the main tool you will use for creating, building, serving, and sharing React Native apps. Expo even has a workflow for publishing your compiled app to the App Store / Google Play Store!
  2. Expo CLI: The command line interface for Expo. If you prefer to live in the terminal, the CLI provides all of the power of the GUI based XDE in command line form.
  3. Expo Client: An app for Android and iOS. This app allows you to run your React Native project within the Expo app on the device without the need for installing. This allows developers to hot reload on a real device, or share development code with anyone else without the need for installing.
  4. Expo Snack: hosted at https://snack.expo.io, this web app allows you to work on a React Native app in the browser, with a live preview of the code you’re working. If you ever used CodePen or JSFiddle, Snack is the same concept applied to React Native apps.
  5. Expo SDK: This is the SDK that houses a wonderful collection of JavaScript APIs that provide Native functionality not found in the base React Native package, including working with the device’s accelerometer, camera, notifications, geolocation, among many others. This SDK comes baked in with every new project created with Expo.

These tools together makeup the Expo workflow. With the Expo XDE or CLI you can create and build new apps with the Expo SDK support baked in. The XDE/CLI also provides a simple way to serve your in-development app by automatically pushing your code to Amazon S3, and generating a url for the project. From there, the XDE/CLI generates a QR code linked to the hosted code. Open the Expo Client app on your iPhone or Android device, scan the QR code, and BOOM there’s your app, equipped with Live/Hot Reload! And since the app is hosted on Amazon S3, you can even share the in-development app with other developers in real-time. (Note that the QR code method of sharing an in-development Expo app has been disabled for iPhone by Apple, and is now an Android only feature. The app can still be shared via SMS, however.)

The XDE/CLI can also streamline building your final app.

2. react-native init

The original bootstrapping method for creating a new React Native app is the react-native init command provided by the React Native CLI. I’ve listed this method last because it is no longer the official team’s recommended method for initializing React Native apps in their Getting Started guide.

In the React Native community, an app created with this method is said to be a pure React Native app, since all of the development and Native code files are exposed to the developer. While this provides the most freedom, it also forces the developer to maintain the Native code. If you’re a JavaScript developer that’s jumped onto the React Native bandwagon because you intend on writing Native apps solely with JavaScript, having to maintain the Native code in a React Native project is probably the biggest disadvantage of this method.

On the other hand, you’ll have access to third party plugins when working on an app that’s been bootstrapped with the react-native init command, and get direct access to the Native portion of the codebase. You’ll also be able to sidestep a few of the limitations in Expo currently, particularly the inability to use background audio or background GPS services.

3. CRNA or create-react-native-app

As mentioned previously, this method of bootstrapping has been deprecated since the CRNA project was merged with Expo. However at the time of this writing the official React Native Getting Started documentation still reference using it, so I have included some basic information about it.

CRNA (create-react-native-app) is a project by the open source React community react-community. It’s conceptually the same as the CRA (create-react-app) project that’s built and maintained by Facebook, but made for React Native projects. Initialize a new React Native project with CRNA takes a single command:

create-react-native-app my-app
Labels:

Comments

Post a Comment

Popular posts from this blog

Push-Notification in React-native

Implimenting Push-notification in React-native Note: To send push notification you have to implement firebase first for implementing firebase check my previour blog 1. Install Package =  @react-native-firebase/messaging, 2.FcmService.js                                                                                           import   messaging   from   '@react-native-firebase/messaging' ; import  { Platform }  from   'react-native' ; class   FCMService  {     register  = ( onRegister ,  onNotification ,  onOpenNotification )  => {         this . checkPermission ( onRegister )         this . createNotificationListeners ( onRegister ,  onNotification ,  onOpenNotification )    }     registerAppWithFCM  =  async ()  =>  {         if ( Platform . OS  ===  'ios' ){          await   messaging (). registerDeviceForRemoteMessages ();          await   messaging . setAutoInitEnabled ( true )        }           }     checkPermission  = ( onRegister )  =>  {       
Post a Comment
Read more

React Native or Flutter?

1.Flutter was harder to learn than React Native.      Mainly because React Native uses JavaScript (which is a familiar language for me) whereas I was new to Dart – the language used by Flutter. So,  if you are new to Dart and trying to learn Flutter, it will take more time than learning React Native . But the opposite is also true – if you have experience in Dart, then learning Flutter will be a walk in a park. 2. performance:=> Flutter has the upper hand as it’s compiled to ARM or x86 native libraries, which makes it really fast.  React Native isn’t compiled to native code, and it still has the JavaScript layer, making it less performant than Flutter.   3. Bugs on React Native have also started to take a lot longer to get fixed.  The dashed border issue, for one; as well as a separate issue supporting various build flavours etc. Most companies running React Native in production, run a custom fork to fix bugs that aren’t fixed upstream. The Flutter devs are more proactive, and you c
Post a Comment
Read more

Implement Firebase in React-Native

Welcome to React Native Firebase! To get started, you must first setup a Firebase project and install the "app" module. I  Installation Installing React Native Firebase requires a few steps; installing the NPM module, adding the Firebase config files & rebuilding your application. 1. Install via NPM Install the React Native Firebase "app" module to the root of your React Native project with NPM or Yarn: # Using npm npm install --save @react-native-firebase/app # Using Yarn yarn add @react-native-firebase/app The  @react-native-firebase/app  module must be installed before using any other Firebase service. 2. Android Setup To allow the Android app to securely connect to your Firebase project, a configuration file must be downloaded and added to your project. Generating Android credentials On the Firebase console, add a new Android application and enter your projects details. The "Android package name" must match your local projects package name w
Post a Comment
Read more