Unlock the Power of Cross-Platform Development with Expo
Are you tired of developing separate apps for iOS, Android, and the web? Do you want to create a seamless user experience across all platforms? Look no further than Expo, a powerful tool that allows you to build cross-platform apps with ease.
Expo vs. React Native: What’s the Difference?
Before we dive into building a cross-platform app with Expo, let’s cover the basics. Expo lives as a superset of React Native, which means it can do everything React Native can do and more. While React Native gives you all the tools and options, Expo makes some decisions for you, taking away the tedious work and decisions. This standardized platform enables you to leverage amazing tools and services, such as Expo Snack, which allows you to build native apps in the browser.
Getting Started with Expo
Installing Expo is a breeze. You’ll need Node.js (go with the LTS version), Git, and Watchman (which watches files to automatically refresh the app). Once you have these installed, you can install the Expo CLI globally via NPM. Verify your installation by running expo whoami. You’ll need to create an account or log in to an existing one to leverage Expo’s infrastructure.
Building a Cross-Platform App
Creating a new Expo app is as simple as running a command line. You’ll be prompted to choose a template, and we’ll go with the “tabs (TypeScript)” template to get the most bang for our buck. This will give us navigation all set up.
Running Your App
Run yarn start to print out a QR code you can scan from the camera on your iOS or Android device to open the Expo Go app. Alternatively, run yarn web to open up the browser. If you have the iOS simulator or Android Emulator installed, you can run those as well.
Navigating the Expo Project
The Expo template scaffolds a good amount for you. You’ll find various files and folders, including App.tsx (the entry point of your file), screens/ (holds the screens you register within your navigator), navigation/ (manages everything navigation-related), hooks/ (compiles custom hooks from the app), constants/ (holds static values that don’t change), and components/ (stores reusable components that make up the functionality of your app).
Writing Code and Creating a Todo List
Let’s jump into some code and create a simple todo list. We’ll work in screens/TabOneScreen.tsx. First, we’ll create a list of tasks and iterate over them via map to render them to the screen. We’ll use ScrollView to make the view scrollable and StyleSheet to define some styles for our screen.
Next, we’ll capture user input using TextInput and React state. We’ll create a custom hook called useTasks to track our tasks array using React state. We’ll also create an addTask function that appends the task to our list of tasks.
Finally, we’ll allow users to toggle if a task has been completed or not. We’ll create a toggleTaskStatus function that finds the task at the given index and toggles its complete status.
Using Code from NPM
One of the greatest parts of React Native is that we can tap into the extensive NPM ecosystem to use third-party code within our app. Let’s migrate our TextInput to use styled-components. We’ll install the package and replace our TextInput with a styled-components version.
The Finished Product
And that’s it! We’ve built a cross-platform app that runs on iOS, Android, and the web using Expo. With Expo, you can multiply your development impact while creating truly native experiences. LogRocket, a React Native monitoring solution, can help you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps. Try it for free today!