Flutter Development

Flutter Development

Why should you try Expo

Why should you try Expo

Featured on Hashnode

I remember Expo when it was far from ideal, not so many features were implemented and some of them were not properly working, but…

A few months ago I’ve started a new project from scratch using the Expo.io platform, it was the decision of my client.

He said, “We can’t spend time to build ReactNative anymore, we need a power burst!”. Of course, he was ready to cut some functional which will require native dependency.

The Expo is a great platform and if you have never tried or you have experience with old versions you probably should try it.

Development process

Each time when you need to run the application on a real device you just need to scan QR-Code from the terminal or if you would like to run on iOS Simulator/Android Emulator just use hotkeys, this feature extremely speed up your development.

image.png

Built-in Expo Developer Tools which you can easily invoke by pressing the “D” key in the terminal window.

image.png

Also, you have other shortcuts like:

  • “I” — Runs the application on iOS Simulator.
  • “A” — Runs the application on the Android Device/Emulator.
  • “C” — Shows QR-Code to scan from real-device.
  • “P” — Switches to production mode.
  • “R” — When you need to restart bundler.

image.png

Of course, the same actions you can do in the Expo Developer Tools window.

How to init project?

First of all, forget about native development at all! Then you will need to initialize the project, there are few options:

image.png

You can use a specific template: “blank”, “tabs”, “bare-minimum”, set package manager “yarn” or “npm”, also you can set up package name and bundle identifier.

But the cherry on the pie: initialize a project with TypeScript support.

image.png

Once you complete the initialization wizard, you can start development or run the application with the command yarn start it will start bundler and Expo server also you will see the Expo Developer Tools window.

image.png

Here we go! Just press “I” to run the application on iOS Simulator.

1_P4bPsvJji-Mb0Nnj_QTs1w.png

1_7lXFp4xR8Z9s67tzwLKZqg.png

1_oTHtnBiW5aM7FT5TbYNe6A.png

Now you see that starting project is pretty simple!

Expo SDK

Of course, if want to use an exotic library in the Expo project you be faced with a support problem, but I’m sure that Expo SDK cools down your desire to write on ReactNative.

Let’s start with simple then come to hard

Expo has a lot of already integrated libraries which is ordinarily used in most applications, just look into Expo API Documentation.

In common cases, you will need: SplashScreen — to make a splash screen to indicate application launching AppLoading — to load assets/fonts/etc. Localization — to manage l10n/i18n of your application ImagePicker/ImageManipulator — Open/edit images or videos from the device MapView — to use maps in the app Sharing — to share data between applications in the device SecureStore — to persist data to the storage on the device

You would like to use, also: AppAuth, AuthSession — to authenticate a user via OAuth BlurView — to make a blur effect on the views Camera — to capture a photo or video Haptics — which provides vibration on Android and use Haptic Engine on the iOS Devices KeepAwake — to keep the screen on while the user working with a part of the app ScreenOrientation — to detect and handle changing the orientation of the screen

Expo supports extra features like: Notifications — Push Notifications (works through the Expo Push service) Branch — integration with branch.io Admob — Google AdMob SDK FacebookAds — Facebook Audience SDK Amplitude — Amplitude mobile analytics

Also, you will have access to exotic: ART — draw using SVG Audio — Play/record sounds AV — Play audio/video content BackgroundFetch — Run background tasks Brightness — Manage brightness Payments — Payments through the Stripe with (ApplePay, AndroidPay)

In general, there are about 80 API which you can use once you installed it using the yarn/npm/expo without closing bundler, it’s one more thing to speed up your development.

Android X64

Developers who are faced with upgrading ReactNative knows that is a painful operation and you will haven’t guarantee that all modules will work correctly and your native project will build properly in favor of this Expo SDK supports Android X64 out of the box and upgrade scenario includes only updates a few JS libraries, this will simplify upgrade process to a minimum level of stress.

Just upgrade versions of your libraries in the package.json file and continue fantastic development and make this world better.

Publishing

When the time is coming to release the application, you will have a new experience in publishing the application to stores, coz you will have a few options.

Build

expo build:[ios|android]

This command will run building a bundle but not locally it will starts on the server that’s why no needs to have a high-performance Laptop/PC also it’s ok if you are a Windows user coz Xcode you will never need it. So you just make a cup of coffee, relax and wait until the build ends.

image.png

As you can see in the screenshot, the build is queued and you can close the terminal without hesitations. Visit the URL below the text “You can monitor the build at” if you need to check the status of the build. On URL you will find a download button that will be active after build success, you also can wait in the terminal and receive a direct link to download the bundle.

OTA

You don’t need to use frameworks like CodePush to implement update Over-The-Air, the Expo supports OTA out of the box. By default, it works automatically when you publish JS bundle via expo publish to Expo in a specific release channel, also you can configure it in the app.json. In case you want to manage the updating process, you will probably need to use Updates API.

Upload to Stores

Yeah, that is a good question, coz you will need to upload your product to the store, but do not hurry do it yourself! The best solution to configure expo to do that with the command:

expo upload:[ios|android]

Conclusion

Nowadays Expo grows up very fast, every month I see new major versions with bug fixing and new features. The development has become easiest and faster than it’s possible on flat ReactNative this fact helps you to be more productive and interested in the development of cross-platform applications.

#expo#exponentjs#developer#frontend-development#tutorial
 
Share this