Last updated (06/20)
There are two ways to setup any React native project and starting building a iOS or Android – Expo CLI or React Native CLI. In this post we will learn what is expo, Key features and differences, Expo development environment setup, How Expo Works, Development tools with Expo, Expo commmunity and new ways of distributing your apps.
But before we talk about Expo few lines about React Native CLI the other way to develop React Native Apps.
What is React Native CLI
React Native CLI is the defacto way of building a React Native app. However you need some prerequisites besides node, watchman and react-native-cli along with Xcode & CocoaPods installed with command line tools udpdated for iOS development. For Android JDK and Android studio setup (and setting up these pre-requisites would require another post 😉 ).
#What is Expo? Expo is complete workflow for creating React Native iOS and Android apps which is free to use. Just setup Expo with few commands and start typing your code in your favorite IDE without the hassls of interacting with Xcode or Android Studio – of course there is no hard in opening them but for a new mobile developer its more important to focus on your React Native code and building application rather learning more tools (well that’s just a suggestion). Besides React Native you get access to Expo SDK which provide an assortment of native APIs for iOS and Android.
Key Features of Expo
- Access to device capabilities like camera, location, notifications, sensors, haptics, and much more, all with universal APIs
- Build service gives you app-store ready binaries and handles certificates
- no need for you to touch Xcode or Android Studio.
- Publish updates over the air whenever you want
- Hot reloading with companion expo app
- Over-the-air updates let you update your app at any time without the hassle and delays of submitting to the store
- Publish apps as Expo app
- Publish standalone app on app stores
Expo CLI setup
Prerequisites
- 1.Recent version of Node.js
- 2.A phone or a emulator
Getting Started with Expo
- 1.Once prerequisites are in place which is mainly Node.js v12 or later you can install Expo CLI with following command:
npm install -g expo-cli
- 2.Create a new React Native project called “SampleProject” with following command
expo init AwesomeProject
- 3.Traverse into this directory and run following command to start your development server
cd AwesomeProject
npm start or expo start
- 4.That’s it !
Approx time to get started and start building your React Native application with expo few minutes.
To try the application on your device download Expo companion app from AppStore and see your app loaded on it live.
Development Tools with Expo
Expo Cli
Expo CLI is a one stop place to Serve, build and publish Expo projects. Some key commands of the CLI.
Installtion -> npm install -g expo-cli
Start local server and provides URL -> expo start
Initializing new project with sample code -> expo init
Open app in iOS simulator expo ios
Open app in in android device expo android
Signed IPA for submission to Apple App Store -> expo build:ios
Signed APK for submission to Google Play Store -> expo build:android
Eject and create Xcode and Android Studio project for your app -> expo eject
. . . and many more
Expo Client
Download Expo Client application from Apple Appstore or Google Playstore run your projects instantly. See the changes from you local immediatly, interact with device capabilities with ease.
Expo SDK
Access native device APIs with Expo SDK which supports latest React Native versions. Few of the popular APIs available to use:
Camera : Access device camera to capture images, save photos, add filters and lot more.
File System : Read and save documents, assets, images and other data objects stored in the device file system.
Accelerometer : Access to Accelerometer Sensors provides inputs to chenges in device when in motion to undertand the 3D space.
Push Notifications : Send and receive push notification with just few lines of code in JavaScript for cross platform notifications.
. . .
and many more more
Snack
Snack lets you build entire React Native projects in Browser with no download or setup required. If you are not sure about Expo or even React Native or just wanna try some quick and nifty snippet Snack is a place to visit.
Distribution of App
Testing : For testing purpose you can publish you app using Expo Dev Tools (simply click publish button). This automatically minify your core and generates two version one for iOS and one for Android. This is automatically then uploaded to a CDN and your the link for your project which you can shjare with any anyone to load it in their expo client app.
Community
Need help while working or just want to stay in touch with community members join the following channels:
- Expo slack channel -> https://slack.expo.io/
- Expo community forums -> https://forums.expo.io/
