Discover the Top Highlights of the Expo in 100 Seconds – Don’t Miss Out!

By
Leah Sirama
-
44
360



Building Universal Native Apps with Expo

Expo: Building Universal Native Apps with React

As a developer, working on various platforms for building native apps can be a hassle. Typically, developers need to write Swift code for Apple or Kotlin for Android to build a mobile app. This can be quite cumbersome, especially for web developers who are more comfortable with JavaScript. However, Expo, an open-source toolset, aims to simplify this process by allowing developers to build universal native apps for iOS, Android, and the web using a single React codebase.

React Native and Expo

React Native addresses the issue of having to learn different programming languages for different platforms. It uses a JavaScript bridge that allows React components to represent native UI components, making it easier for web developers to transition to mobile app development without learning new languages.

With React Native, developers can write code that looks like HTML and CSS but actually builds truly native widgets, not just a web view embedded in a native app. These widgets can interact with native APIs such as the camera, keyboard, and vibrator, providing a seamless native app experience.

Expo’s Role

Expo takes the simplification of mobile app development a step further. Running a command to generate a project template takes care of all the annoying configurations, allowing developers to start writing code right away. With Expo, developers can use npm to instantly run the app on iOS, Android, and the web by simply running an npm command.

Moreover, Expo offers a hot reload feature which reflects changes made to the UI in real-time. This makes the development process more efficient and allows for quick iteration on the app’s design and functionality. Additionally, developers can test the app in a sandbox using tools like Expo Go.

File System-Based Routing

An interesting aspect of Expo is its use of file system-based routing, similar to frameworks like Next.js and Remix. This allows developers to create screens that are automatically deep-linkable on mobile and navigate between them using the Link component. In addition, Expo provides attributes like push and replace to control the navigation behavior on mobile platforms.

Expo also offers layouts that allow for sharing UI across multiple pages and representing more advanced routing patterns such as tabs and modals.

Access to Native APIs and Integrations

Beyond routing, Expo provides a plethora of libraries for working with native APIs. For example, developers can easily use the camera package by installing it with Expo and integrating the camera view component into the app’s UI. Similar integrations are available for maps, sensors, and various other use cases. Additionally, Expo offers integrations with backend cloud infrastructure providers like Firebase and Superbase.

One of the notable features of Expo is its “continuous native generation”, where native code is generated predictably from a set of inputs. This eliminates the need for developers to manually touch Java and Objective C code in Android and iOS directories, reducing the chances of breaking the app.

Automated Testing and Deployment

Expo integrates with Detox for automated testing on native devices and emulators, allowing developers to ensure the quality and reliability of their apps.

For deployment, Expo offers the ability to statically render pages for the web and automate builds in the cloud for mobile apps. This enables developers to submit their apps to the Google Play Store and Apple App Store without needing a Mac, making the process of reaching end-users easier and more accessible.

Conclusion

In conclusion, Expo simplifies the process of building universal native apps by providing a comprehensive set of tools and integrations for developers. With its focus on cross-platform development and seamless integration with native APIs, Expo empowers developers to create high-quality apps for iOS, Android, and the web using a single React codebase. As the landscape of app development continues to evolve, Expo remains a powerful and valuable tool for developers looking to streamline their development workflow and reach a broader audience.


RELATED ARTICLESMORE FROM AUTHOR

44 COMMENTS

  10. All I really want is a cross-compiler from Svelte web code -> Native UI + business logic. Not a series of custom widgets that look like web markup, actual HTML+Svelte syntax compiled to native. None of this React Native, Svelte Native, Expo garbage.

  15. the fact that you are locked in with expo and have to pay for building the app stops me from trying it. additionally how do you get out of expo if you want to, it seems nearly impossible from what I have read. you should own your code and not be bound to a platform.

  20. As someone who has worked with many cross platform technologies I would warn anyone to think seriously before using this. If you have to use a cross platform technology then Flutter is your go to. The “benefit” of being able to use a tech that with a language you already know is way overrated. Also the “benefit” of using “real” native components is not only overrated but will cause you massive headaches trying to get your product looking the same, and in some cases just looking terrible, resulting in a lot of dirty workarounds as you start to write platform specific code, defeating the purpose of a cross platform technology.

  30. As an iOS dev I say: Nice! Another wave of “please rewrite our shitty stuttering [insert name of cross-platform framework of the year] into a decent native app.

    No hate, just stating the facts. I can smell it was made by some useless losers at Meta.