Install web dependencies for Expo
To develop websites with Expo, install the following dependencies: react-dom, react-native-web, and @expo/metro-runtime. The installation command is: npx expo install react-dom react-native-web @expo/metro-runtime
eas
42 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Start Expo web development server
To start the dev server and develop in the browser, run: npx expo start --web. This command enables development with Fast Refresh, debugging, environment variables, and bundling features.
Export Expo app for production website
To export the app as a production website, run: npx expo export --platform web. This command exports the app for web deployment.
Platform shaking in Expo production builds
Expo CLI automatically optimizes code for individual platforms when you build for production using techniques like platform shaking. This removes platform-specific code that is not needed for the target platform.
Expo SDK library support for web and server rendering
All libraries in the Expo SDK are built to support both browser and server rendering environments when applicable. Libraries are also optimized for the individual platforms they target.
React Native for web component rendering
The Text component from React Native for web allows rendering text on any platform. React Native for web (RNW) is a set of component libraries such as View and Text that wrap react-dom primitives such as div, p, and img. RNW is optional when developing for web but is recommended when building across platforms to maximize code reuse.
Web development support in Expo
Expo has first-class support for building full-stack websites with React. Expo websites can be statically rendered for SEO and performance, or client-rendered for a more app-like experience in the browser.
Web-only components in Expo
Web-only React DOM components such as div, p, and others can be used in Expo, however these components won't render on native platforms. Building web-only components is fully supported by Expo.
Expo Orbit purpose and supported platforms
Expo Orbit is a desktop application for macOS, Windows, and Linux that accelerates development workflows by enabling one-click build and update launches and simulator management. It allows faster installation and launching of builds or updates from EAS, local files, or running Snack projects on simulators and physical devices.
Install Expo Orbit on Linux
On Linux, Expo Orbit is downloaded directly from GitHub releases at https://github.com/expo/orbit/releases. Both .deb packages for Debian and Ubuntu, and .rpm packages for Fedora and RHEL are available.
Install Expo Orbit on Windows
On Windows, Expo Orbit is downloaded directly from GitHub releases at https://github.com/expo/orbit/releases.
Install Expo Orbit on macOS
On macOS, Expo Orbit can be downloaded and installed using Homebrew with the command: brew install expo-orbit. Alternatively, it can be downloaded directly from GitHub releases at https://github.com/expo/orbit/releases. To enable automatic startup when logging in, click the Orbit icon in the menu bar, go to Settings, and select the Launch on Login option.
Workflow before Orbit existed
Before Orbit, installing builds or updates from EAS on Android and iOS physical devices, emulator, or simulator required manual steps. For EAS builds, users had to run the eas build:run command and select a build for their chosen device, or download the archive and drag-drop it to the simulator for iOS. For Snack projects, additional steps included installing Expo Go on the virtual device, logging in, and selecting the Snack from the list.
Expo Orbit key features
Expo Orbit provides the following capabilities: list and launch simulators including Android emulators without audio; install and launch builds from EAS on simulators and real devices in one click; install and open updates from EAS on Android Emulators or iOS Simulators; launch Snack projects in simulators in one click; install and launch apps from local files using Finder or drag-and-drop with support for Android .apk files, iOS Simulator compatible .app files, and ad hoc signed apps; and view pinned projects from the EAS dashboard and quickly launch latest builds.
Install eas-cli globally
Install eas-cli using your package manager with the global flag: npm install --global eas-cli, yarn global add eas-cli, pnpm add --global eas-cli, or bun add --global eas-cli.
EAS services overview
Expo Application Services (EAS) are deeply integrated cloud services for Expo and React Native apps, provided by the team behind Expo. EAS comprises eight main services: EAS Workflows for CI/CD automation, EAS Build for compiling and signing Android/iOS apps with custom native code in the cloud, EAS Submit for uploading apps to Google Play Store or Apple App Store from the cloud with one CLI command, EAS Hosting for deploying Expo Router and React Native web apps and API routes, EAS Update for addressing small bugs and pushing quick fixes directly to end users, EAS Metadata (in preview) for uploading app store information required to publish an app, EAS Insights (in preview) for viewing analytics about a project's performance, usage, and reach, and EAS Observe (in open beta) for monitoring app performance in production.
EAS Observe purpose
EAS Observe (in open beta) monitors your app's performance in production.
EAS Metadata purpose
EAS Metadata (in preview) uploads all app store information required to get your app published.
EAS Submit cloud service
EAS Submit uploads your app to the Google Play Store or Apple App Store from the cloud with one CLI command.
EAS Build cloud service
EAS Build compiles and signs Android and iOS apps with custom native code in the cloud.
Continuous Native Generation (CNG) definition
Continuous Native Generation (CNG) is a process for building an Expo app where native projects are generated on-demand from app.json and package.json, similar to how node_modules are generated from package.json. The native project directories (android and ios) are automatically added to .gitignore when you create a new project, and you can delete them at any time then re-generate them with npx expo prebuild. You might never run prebuild on your own machine if you use a cloud-based development workflow.
Definition: Expo app
An Expo app is a React Native app that uses Expo tools. It can use a single package from the Expo SDK, Expo Router, Expo CLI, Continuous Native Generation, or any combination of Expo tools.
Difference between Expo and EAS
Expo is an open-source project providing tools like Expo CLI, Expo Router, and Expo SDK packages, all free with MIT license. Expo Application Services (EAS) is a suite of hosted services you can use with Expo and React Native projects to build, submit, and update your app, set up automation, and collaborate with your team. EAS provides physical resources like application servers and CDNs for over-the-air updates and servers for running builds.
EAS is optional with Expo open-source tools
You do not have to use EAS if you use Expo open-source tools. Your Expo project is a React Native app that is a native app, which you can build using Fastlane or any native build and update tools you prefer. Most EAS services allow you to run them on your own infrastructure.
EAS works with any React Native project
You can use EAS even if you are not using any Expo open-source tools. EAS is a great fit for any React Native project.
Expo Go is not suitable for production apps
Expo Go is a limited playground and is not useful for building production-grade projects. If you plan on deploying your app to the store, development builds will provide a more flexible, reliable, and complete development environment than Expo Go.
Development builds definition and capabilities
A development build is a debug build of your app that contains the expo-dev-client library. It helps you iterate quickly and provides a more flexible, reliable, and complete development environment than Expo Go. You can install any native library and configure changes to the native project using app config or config plugins. You can create a development build locally or use EAS Build to create a build in the cloud.
Benefits of CNG
Using CNG can make upgrading to new versions of React Native much easier. It can simplify project maintenance and facilitate setting up complex features such as App Clips, share extensions, and error reporting. This is made possible with config plugins.
React Native core components import source
React Native core components such as ActivityIndicator, TextInput, Text, ScrollView, and View are imported from the 'react-native' package in your code.
Expo SDK libraries extend React Native functionality
The Expo SDK provides access to device and system functionality including audio, barcode scanning, camera, calendar, contacts, video, updates, maps, and OAuth authentication tools. Libraries are found in the API reference or through documentation search.
npx expo install command for library version compatibility
The 'npx expo install' command picks a library version compatible with your project and uses your JavaScript package manager (npm, yarn, pnpm, or bun) to install it. This is recommended instead of npm install or yarn add directly.
React Native Directory for third-party library discovery
React Native Directory is a searchable database of libraries built specifically for React Native. It is the best place to look first when trying to find a third-party library. Libraries compatible with Expo Go have a checkmark tag on the directory.
Development builds required for native code dependencies
If a third-party library includes android or ios directories, requires native project configuration changes, or needs a config plugin, you must create a development build to use the library in your project. Development builds include all native code needed for production-quality apps.
Expo Go limitations with third-party libraries
Expo Go is a playground for students and learners and does not include all native code required to support every library, making it limited and not useful for production-grade projects. Only libraries with Expo Go compatibility tags can be used in Expo Go.
Config plugins for native library configuration
If a module needs additional native configuration but does not have a config plugin, you can refer to the list of out-of-tree config plugins. If your project does not support Expo Prebuild, you cannot use config plugins and must manually configure each library.
Exclude third-party library from version checks
Use the 'expo.install.exclude' property in the package.json file to exclude a specific version of a third-party library from version checks performed by npx expo install, npx expo-doctor, or npx expo start.
Methods to determine if library needs native configuration
To determine if a library requires native project configuration, check if it includes android or ios directories, its README mentions linking, it requires changes to android/app/src/main/AndroidManifest.xml or ios/Podfile or ios/Info.plist, or if it has a config plugin.
Bare React Native projects without Expo package
If you initialized your app using 'npx @react-native-community/cli@latest init' and do not have the expo package installed, refer to the installing Expo modules guide for information on how to proceed.
EAS CLI installation globally
To install EAS CLI globally on your machine, run one of: npm install --global eas-cli, yarn global add eas-cli, pnpm add --global eas-cli, or bun add --global eas-cli.
EAS CLI installation via package manager without global install
You can run EAS CLI commands without a global installation by using package manager tools: npx eas-cli@latest, yarn dlx eas-cli@latest, pnpm dlx eas-cli@latest, or bunx eas-cli@latest.
EAS CLI reference version
The current EAS CLI version referenced is 21.7.1.
EAS CLI purpose and capabilities
EAS CLI is a command-line tool that allows you to build, update, submit, deploy, or use workflows in your Expo and React Native project from a terminal window.