What's React Native?
Simply put, React Native is a cross-platform framework that uses JavaScript to create truly native applications for iOS and Android, all from the same codebase.
This framework is not some new kid on the block , it was released in 2015 and has has been battle-tested over and over in production by big apps such as Facebook, Tesla, Discord, Bloomberg...
React Native's main philosophy is: "Learn once, write anywhere." This refers to the fact that you can write applications for Android and iOS with React Native, and web applications using React. The latter being the most-used web framework and is very similar to React Native.
For now, React Native only works reliably on Android and iOS, but the React Native team and the open source community are working hard to make it possible to export your app to web, Windows, Mac, smart-TVs, virtual reality, and other devices.
What's Expo?
React Native already sounds pretty cool and efficient, but what's this whole Expo thing about? Expo is a new framework that sits on top of React Native, to make creating, and especially launching apps easier than ever before.
It provides a developer and their team a set of tools that make it easier to:
- 👉 Launch the project once the code has been written
👉 Fix bugs while still in production
👉 Collaborate as a team
👉 Collaborate with clients
👉 Develop frequently used features (localization, splash screens, fonts, deeplinks...)
What are the advantages?
Builds
When you're building applications and you're ready to publish them to Play Store and the App Store, you first have to "create a build". This a process where your code is transformed into one single file which can then be uploaded to the stores.
When you're only using React Native you have to do this with xCode for iOS and Gradle for Android. Creating these builds manually (and locally) often results in errors, paired with an alarming amount of frustration for the developers.
This is where Expo really shines; you can upload your code to their service and let them do all the heavy lifting; Expo can create builds using its own servers. This might take a couple of minutes longer, but it results in way less build errors.
Over-the-air updates
It shouldn't happen, but it probably will at some point... There is a bug in the production version of your app. When you're using traditional app development methods or React Native, and a bug occurs you'll usually assign a developer to take care of the issue. Once he's done fixing it, a new build has to be created and a new store submission to the app stores has to be made.
Apple and Google will then will manually validate your app before it's approved, again. When all of this is done, the user is able download an updated version of the app from the store. Because you have to wait for Google and Apple to approve the app, it will most likely take over 48 hours before the fix is available in the stores. And that's assuming the user will immediately update their app, which is rarely the case.
All this sounds pretty dreadful, and in reality, it is. Luckily Expo has a solution for this. Since the source code of the app is hosted on an Expo service, this means that every time a user opens your app, a version check can be made to see if that person is running the latest version of the app. If this is not the case, Expo will load the new version of the code and the app will be updated automatically. In practice, this means nor the app stores, nor the user, are aware of new versions being published; they will automatically be using the latest version at all times.
TypeScript
Originally, React Native and Expo used pure JavaScript as their programming language, but as a lot of web developers have moved on to TypeScript, React Native and Expo followed suit. This shift is great news for developers and here's why:
TypeScript is like an extension of JavaScript, but it's strongly typed. This means that the programming language enforces restrictions on mixing data types. In other words, whenever a developer writes a piece of code which will likely result in errors when the app is executed, the code editor will indicate this to the developer. This makes for a faster development process and less bugs that sneak past QA or worse, make it in production.
Expo SDK
Expo also provides developers with a big set of tools or Software Development Kits (SDKs) that make it easier to integrate device-specific features into an app. For example:
- 👉 Calendar: read and write to the users default calendar app/account
👉 Camera/Image Picker: allow the user to upload or take pictures from within the app
👉 Localization: know in what region the user is located without using GPS data
👉 Sensors: read the data from a device's many sensors.
👉 Haptics: use the vibration motor to enhance certain features and interactions.
👉 Lottie: integrate smooth Lottie animations for a more premium feel.
👉 Splash Screen: control the initial splash screen when the app is loading.
👉 Store Review: prompt the user to review the app after a successful action.
👉 Web Browser: show web content without leaving the app
Proximity to React
Because React (Native) is so widely adopted, it not as hard to find talented people who can work with this technology.
The same occurs when we hand over a project to a client. Often times, this client has an IT department themselves who are familiar with the technologies used in a React Native codebase. This enables them to maintain and iterate on this project without having to learn a new tech stack.
Because React and React Native are so similar, there is no need for a web and an app team. The required skillset for these teams is almost identical.
Collaboration
Expo also provides their own Expo Client app. Essentially it's a testing environment for the app, which can be made accessible to any and all stakeholders.
This is essential when working in an agile way, where gathering rapid feedback is essential. During development, we provide clients with a version of the app that gets updated daily. This way we can capture feedback at a pace that's otherwise not feasible with any other framework.
Expo even provides methods that automatically create a new app that can be tested by everybody on our team for every feature we're building. This feature can then be thoroughly tested before it get's merged with the main app.
What are the disadvantages?
Native SDKs
One of the biggest drawbacks of Expo is that you're unable to drop down to native code, meaning using native SDKs for third party integrations won't work. A lot of services provide an SDK for Android and iOS. But when you're using Expo this will not work.
Accessing native code is possible when using React Native, but without Expo.
App size
Although storage is getting cheaper and cheaper, and even budget phones come with loads of storage these days, apps built using Expo are substantially larger in size than when using more traditional build methods. If app size is a big concern, using Expo might not be the best pick. You can assume an app exported with Expo will end up being around 20 megabytes in size.
What should I choose?
Seasoned developers are often skeptical towards anything that's regarded as being low-code. Which makes sense, many if not most low-code tools are rarely perfect nor do they support every single feature or use case. And the idea that you won't be able to build exactly what you want using Expo, can scare people off.
For us, however, it's really a no-brainer. Expo is by far the easiest way to deliver full-fledged apps in the least amount of time. But wait, there's more!
Should you choose for Expo, that doesn't mean you're locked in their ecosystem forever. You can always eject your code. That's right, when you eject your code you essentially leave Expo and return to a regular React Native environment. You do, however, lose the ability to build your app using Expo services and over-the-air updates won't be possible anymore either.
The most common use case for ejecting would be the need to access native code. However, we usually prefer not to, as the added value of Expo often beats ejecting the whole thing for often times minor custom native code.