`. Native components are more performant than the DOM and provide a much nicer user experience. - Unlike React.js which has access to browser APIs, React Native uses custom native APIs. For example, instead of `navigator.geolocation`, you use `expo-location` to access the user's location. Custom native APIs are similar to browser APIs except you have full control over them. This means you can access new features before they are available in the browser. In the same way React.js frameworks help users create larger websites with ease, Expo helps users create larger apps with ease. Expo provides a suite of well-tested React Native modules that run on Android, iOS, and the web. Expo also provides a [suite of tools](/eas) for building, deploying, and updating your app. ## What are the store policies regarding interpreted code? React Native uses a JavaScript interpreter (JSC, V8, or Hermes) to run your application code. Refer to the [Google Play Policy Center](https://play.google/developer-content-policy/) and [Apple Developer Program License Agreement](https://developer.apple.com/support/terms/apple-developer-program-license-agreement) directly for the most up-to-date policy information. _The following are excerpts of related policies, as of April 25, 2024._ ### Google Play Store ```text ...an app may not download executable code (such as dex, JAR, .so files) from a source other than Google Play. This restriction does not apply to code that runs in a virtual machine or an interpreter where either provides indirect access to Android APIs (such as JavaScript in a webview or browser). Apps or third-party code, like SDKs, with interpreted languages (JavaScript, Python, Lua, etc.) loaded at run time (for example, not packaged with the app) must not allow potential violations of Google Play policies. ``` Source: [Google Play Policy Center](https://support.google.com/googleplay/android-developer/answer/9888379?hl=en). ### Apple App Store ```text ...Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. ``` Source: [3.3.1 APIs and Functionality - B. Executable Code](https://developer.apple.com/support/terms/apple-developer-program-license-agreement#b331). ## Should I use Expo CLI or React Native Community CLI? Expo CLI offers the same core functionality as React Native Community CLI (also known as "React Native CLI") with additional features such as automatic [TypeScript setup](/guides/typescript), [web support](/workflow/web), [auto installing compatible libraries](/more/expo-cli/#install), [improved native build commands](/more/expo-cli#compiling), [tunneling](/more/expo-cli#tunneling), [Prebuild](/workflow/prebuild), and [more](/more/expo-cli). It can be used simultaneously with React Native Community. Regardless of which CLI you use, you can use any part of the [Expo SDK](/versions/latest/) and [Expo Application Services](/eas) with your project. For more information, see: - Learn how you can migrate to use Expo CLI in an [existing React Native project](/bare/using-expo-cli/). - Learn about the benefits of [using a framework to build React Native apps](https://reactnative.dev/blog/2024/06/25/use-a-framework-to-build-react-native-apps). - Learn about the benefits of migrating to Expo CLI such as improved app performance, expedites release, and fostering stronger collaboration across you team in [this blog post](https://expo.dev/blog/from-rnc-cli-to-expo). ## Is Expo Go open source? Yes, the source for Expo Go can be found in the [expo/expo GitHub repository](https://github.com/expo/expo) in the **apps/expo-go** directory. The Expo Go app is also built with Expo and React Native. ## Is Expo eject deprecated? Yes, Expo eject is a deprecated term and is no longer necessary. It was replaced by the [`npx expo prebuild`](/workflow/prebuild) command which continuously generates native projects for you based on the libraries in your project and the app config (**app.json**). Learn more in the [Expo Prebuild documentation](/workflow/prebuild). Unlike the `expo eject` library, authors can configure their libraries to work with Expo Prebuild by creating a [config plugin](/config-plugins/introduction/). This means you can use any library with Expo Prebuild. You can also use any custom native code with Expo Prebuild by creating a [development build](/develop/development-builds/introduction/). ## Limitations **Previously**, Expo had large native binary sizes and didn't support custom native code without "ejecting". These issues went away in December 2020 when we released [EAS Build](/build/introduction) which supports any React Native app. The concept of "ejecting" was replaced by the popular [Expo Prebuild](/workflow/prebuild) feature which has been around since SDK 41 (April 2021). The [`expo eject` command was fully deprecated](#is-expo-eject-deprecated) in Expo SDK 46 (August 2022). We believe Expo tools are a great option for anyone looking to create amazing cross-platform apps quickly. Nonetheless, everyone's project is unique, and there may be reasons Expo is not the right choice for what you're building. Reasons, why you may **not** want to use certain Expo tools with your project, are listed below: ### EAS For more information on what current limitations exist with EAS, see the following: #### EAS and bare React Native projects EAS Build is compatible with bare (existing) React Native projects (where native directories are checked in version control). When these directories are present, it does not run prebuild, as that could overwrite any manual customizations you have made to the native project files. You'll have to configure the native directories on your own with native tools such as Android Studio or Xcode. ### Expo Go [Expo Go](/get-started/set-up-your-environment/?redirected=#how-would-you-like-to-develop) provides a quick way to get started with your app development. It comes with a pre-configured set of libraries known as the Expo SDK. This makes experimentation much faster and brings the mobile development experience much closer to the web development experience. Like any other tool, it too has its limitations: - Using a third-party library that requires native code - Using a third-party push notification service **We strongly recommend any projects that require additional libraries with native code to migrate to [development builds](/develop/development-builds/introduction/). It's like creating a version of Expo Go that is specifically customized to your app's needs.** ## Overview of tutorials and UI guides The **Learn** section is a collection of tutorials and other guides that help you learn about Expo and EAS. It covers the following: # Expo tutorial ## Tutorial: Using React Native and Expo An introduction to a React Native tutorial on how to build a universal app that runs on Android, iOS and the web using Expo. We're about to embark on a journey of building universal apps. In this tutorial, we'll create an Expo app that runs on Android, iOS, and web; all with a single codebase. Let's get started! ## About React Native and Expo tutorial The objective of this tutorial is to get started with Expo and become familiar with the Expo SDK. It'll cover the following topics: - Create an app using the default template with TypeScript enabled - Implement a two-screen bottom tabs layout with Expo Router - Break down the app layout and implement it with flexbox - Use each platform's system UI to select an image from the media library - Create a sticker modal using the `` and `` components from React Native - Add touch gestures to interact with a sticker - Use third-party libraries to capture a screenshot and save it to the disk - Handle platform differences between Android, iOS, and web - Finally, go through the process of configuring a status bar, a splash screen, and an icon to complete the app These topics provide a foundation to learn the fundamentals of building an Expo app. The tutorial is self-paced and can take up to two hours to complete. To keep it beginner friendly, we divided the tutorial into nine chapters so that you can follow along or put it down and come back to it later. Each chapter contains the necessary code snippets to complete the steps, so you can follow along by creating an app from scratch or copy and paste it. Before we get started, take a look at what we'll build. It's an app named **StickerSmash** that runs on Android, iOS, and the web: > **info** The complete source code for this tutorial is available on [GitHub](https://github.com/expo/examples/tree/master/stickersmash). ## How to use this tutorial We believe in [learning by doing](https://en.wikipedia.org/wiki/Learning-by-doing), so this tutorial emphasizes doing over explaining. You can follow along the journey of building an app by creating the app from scratch. Throughout the tutorial, any important code or code that has changed between examples will be highlighted in green. You can hover over the highlights (on desktop) or tap them (on mobile) to learn more about the change. For example, the code highlighted in the snippet below explains what it does: ```tsx Hello World|collapseHeight=300 import { StyleSheet, Text, View } from 'react-native'; export default function Index() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); ``` ## Next step We're ready to start building our app. ## Create your first app In this chapter, learn how to create a new Expo project. In this chapter, let's learn how to create a new Expo project and how to get it running. Video Tutorial: [Watch: Creating your first universal Expo app](https://www.youtube.com/watch?v=m1-bc53EGh8) --- ## Prerequisites We'll need the following to get started: - [Expo Go](https://expo.dev/go) installed on a physical device - [Node.js (LTS version)](https://nodejs.org/en) installed - [VS Code](https://code.visualstudio.com/) or any other preferred code editor or IDE installed - A macOS, Linux, or Windows (PowerShell and [WSL2](https://expo.fyi/wsl)) with a terminal window open The tutorial assumes that you are familiar with TypeScript and React. If you are not familiar with them, check out the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html) and [React's official tutorial](https://react.dev/learn). Step 1: ## Initialize a new Expo app We'll use [`create-expo-app`](/more/create-expo/) to initialize a new Expo app. It is a command line tool to create a new React Native project. Run the following command in your terminal: ```sh $ npx create-expo-app@latest StickerSmash $ cd StickerSmash ``` This command will create a new project directory named StickerSmash, using the [default](/more/create-expo/#--template) template. This template has essential boilerplate code and libraries needed to build our app, including Expo Router. We'll continue to add more libraries throughout this tutorial as needed. Note: Benefits of using the default template --- - Creates a new React Native project with `expo` package installed - Includes recommended tools such as Expo CLI - Includes a tab navigator from Expo Router to provide a basic navigation system - Automatically configured to run a project on multiple platforms: Android, iOS, and web - TypeScript configured by default --- Step 2: ## Download assets After downloading the archive: 1. Unzip the archive and replace the default assets in the **your-project-name/assets/images** directory. 2. Open the project directory in a code editor or IDE. Step 3: ## Run reset-project script In this tutorial, we'll build our app from scratch and understand the fundamentals of adding a file-based navigation. Let's run the `reset-project` script to remove the boilerplate code: ```sh $ npm run reset-project ``` After running the above command, there are two files (**index.tsx** and **\_layout.tsx**) left inside the **app** directory. The previous files from **app** and other directories (**components**, **constants**, and **hooks** — containing boilerplate code) are moved inside the **app-example** directory by the script. We'll create our own directories and component files as we go along. Note: What does the script do? --- `reset-project` script resets the **app** directory structure in a project and copies the previous boilerplate files from the project's root directory to another sub-directory called **app-example**. We can delete it since it is not part of our main app's structure. --- Step 4: ## Run the app on mobile and web In the project directory, run the following command to start the [development server](/more/glossary-of-terms/#development-server) from the terminal: ```sh $ npx expo start ``` After running the above command: 1. The development server will start, and you'll see a QR code inside the terminal window. 2. Scan that QR code to open the app on the device. On Android, use the Expo Go > **Scan QR code** option. On iOS, use the default camera app. 3. To run the web app, press w in the terminal. It will open the web app in the default web browser. Once it is running on all platforms, the app should look like this: Step 5: ## Edit the index screen The **app/index.tsx** file defines the text displayed on the app's screen. It is the entry point of our app and executes when the development server starts. It uses core React Native components such as `` and `` to display background and text. Styles applied to these components use JavaScript objects rather than CSS, which is used on web. However, a lot of the properties will look familiar if you've previously used CSS on web. Most React Native components accept a `style` prop that accepts a JavaScript object as its value. For more details, see [Styling in React Native](https://reactnative.dev/docs/style). Let's modify **app/index.tsx** screen: 1. Import `StyleSheet` from `react-native` and create a `styles` object to define our custom styles. 2. Add a `styles.container.backgroundColor` property to `` with the value of `#25292e`. This changes the background color. 3. Replace the default value of `` with "Home screen". 4. Add a `styles.text.color` property to `` with the value of `#fff` (white) to change the text color. ```tsx app/index.tsx|collapseHeight=340 export default function Index() { return ( Home screen ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', justifyContent: 'center', }, text: { color: '#fff', }, }); ``` > React Native uses the same color format as the web. It supports hex triplets (this is what `#fff` is), `rgba`, `hsl`, and named colors, such as `red`, `green`, `blue`, `peru`, and `papayawhip`. For more information, see [Colors in React Native](https://reactnative.dev/docs/colors). This change will reflect on all platforms automatically: ## Summary ## Add navigation In this chapter, learn how to add navigation to the Expo app. In this chapter, we'll learn Expo Router's fundamentals to create stack navigation and a bottom tab bar with two tabs. Video Tutorial: [Watch: Adding navigation in your universal Expo app](https://www.youtube.com/watch?v=8336fcFV_T4) ## Expo Router basics Expo Router is a file-based routing framework for React Native and web apps. It manages navigation between screens and uses the same components across multiple platforms. To get started, we need to know about the following conventions: - **app directory**: A special directory containing only routes and their layouts. Any files added to this directory become a screen inside our native app and a page on the web. - **Root layout**: The **app/\_layout.tsx** file. It defines shared UI elements such as headers and tab bars so they are consistent between different routes. - **File name conventions**: _Index_ file names, such as **index.tsx**, match their parent directory and do not add a path segment. For example, the **index.tsx** file in the **app** directory matches `/` route. - A **route** file exports a React component as its default value. It can use either `.js`, `.jsx`, `.ts`, or `.tsx` extension. - Android, iOS, and web share a unified navigation structure. > The above list is enough for us to get started. For a complete list of features, see [Introduction to Expo Router](/router/introduction/). Step 1: ## Add a new screen to the stack Let's create a new file named **about.tsx** inside the **app** directory. It displays the screen name when the user navigates to the `/about` route. ```tsx app/about.tsx|collapseHeight=300 import { Text, View, StyleSheet } from 'react-native'; export default function AboutScreen() { return ( About screen ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', justifyContent: 'center', alignItems: 'center', }, text: { color: '#fff', }, }); ``` Inside **\_layout.tsx**: 1. Add a `` component and an `options` prop to update the title of the `/about` route. 2. Update the `/index` route's title to `Home` by adding `options` prop. ```tsx app/_layout.tsx import { Stack } from 'expo-router'; export default function RootLayout() { return ( ); } ``` Note: What is a ? --- A stack navigator is the foundation for navigating between different screens in an app. On Android, a stacked route animates on top of the current screen. On iOS, a stacked route animates from the right. Expo Router provides a `Stack` component to create a navigation stack to add new routes. --- Step 2: ## Navigate between screens We'll use Expo Router's `Link` component to navigate from the `/index` route to the `/about` route. It is a React component that renders a `` with a given `href` prop. 1. Import the `Link` component from `expo-router` inside **index.tsx**. 2. Add a `Link` component after `` component and pass `href` prop with the `/about` route. 3. Add a style of `fontSize`, `textDecorationLine`, and `color` to `Link` component. It takes the same props as the `` component. ```tsx app/index.tsx|collapseHeight=300 import { Text, View, StyleSheet } from 'react-native'; export default function Index() { return ( Home screen Go to About screen ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', justifyContent: 'center', }, text: { color: '#fff', }, button: { fontSize: 20, textDecorationLine: 'underline', color: '#fff', }, }); ``` Let's took a look at the changes in our app. Click on `Link` to navigate to the `/about` route: Step 3: ## Add a not-found route When a route doesn't exist, we can use a `+not-found` route to display a fallback screen. This is useful when we want to display a custom screen when navigating to an invalid route on mobile instead of crashing the app or display a _404_ error on web. Expo Router uses a special **+not-found.tsx** file to handle this case. 1. Create a new file named **+not-found.tsx** inside the app directory to add the `NotFoundScreen` component. 2. Add `options` prop from the `Stack.Screen` to display a custom screen title for this route. 3. Add a `Link` component to navigate to the `/` route, which is our fallback route. ```tsx app/+not-found.tsx import { View, StyleSheet } from 'react-native'; import { Link, Stack } from 'expo-router'; export default function NotFoundScreen() { return ( <> Go back to Home screen! ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', justifyContent: 'center', alignItems: 'center', }, button: { fontSize: 20, textDecorationLine: 'underline', color: '#fff', }, }); ``` To test this, navigate to `http:localhost:8081/123` URL in the web browser since it is easy to change the URL path there. The app should display the `NotFoundScreen` component: Step 4: ## Add a bottom tab navigator At this point, the file structure of our **app** directory looks like the following: We'll add a bottom tab navigator to our app and reuse the existing Home and About screens to create a tab layout (a common navigation pattern in many social media apps like X or BlueSky). We'll also use the stack navigator in the Root layout so the `+not-found` route displays over any other nested navigators. 1. Inside the **app** directory, add a **(tabs)** subdirectory. This special directory is used to group routes together and display them in a bottom tab bar. 2. Create a **(tabs)/\_layout.tsx** file inside the directory. It will be used to define the tab layout, which is separate from Root layout. 3. Move the existing **index.tsx** and **about.tsx** files inside the **(tabs)** directory. The structure of **app** directory will look like this: Update the Root layout file to add a `(tabs)` route: ```tsx app/_layout.tsx import { Stack } from 'expo-router'; export default function RootLayout() { return ( ); } ``` Inside **(tabs)/\_layout.tsx**, add a `Tabs` component to define the bottom tab layout: ```tsx app/(tabs)/_layout.tsx import { Tabs } from 'expo-router'; export default function TabLayout() { return ( ); } ``` Let's take a look at our app now to see the new bottom tabs: Step 5: ## Update bottom tab navigator appearance Right now, the bottom tab navigator looks the same on all platforms but doesn't match the style of our app. For example, the tab bar or header doesn't display a custom icon, and the bottom tab background color doesn't match the app's background color. Modify the **(tabs)/\_layout.tsx** file to add tab bar icons: 1. Import `Ionicons` icons set from [`@expo/vector-icons`](/guides/icons/#expovector-icons) — a library that includes popular icon sets. 2. Add the `tabBarIcon` to both the `index` and `about` routes. This function takes `focused` and `color` as params and renders the icon component. From the icon set, we can provide custom icon names. 3. Add `screenOptions.tabBarActiveTintColor` to the `Tabs` component and set its value to `#ffd33d`. This will change the color of the tab bar icon and label when active. ```tsx app/(tabs)/_layout.tsx import { Tabs } from 'expo-router'; import Ionicons from '@expo/vector-icons/Ionicons'; export default function TabLayout() { return ( ( ), }} /> ( ), }} /> ); } ``` Let's also change the background color of the tab bar and header using `screenOptions` prop: ```tsx app/(tabs)/_layout.tsx ``` In the above code: - The header's background is set to `#25292e` using the `headerStyle` property. We have also disabled the header's shadow using `headerShadowVisible`. - `headerTintColor` applies `#fff` to the header label - `tabBarStyle.backgroundColor` applies `#25292e` to the tab bar Our app now has a custom bottom tabs navigator: ## Summary ## Build a screen In this tutorial, learn how to use components such as React Native's Pressable and Expo Image to build a screen. In this chapter, we'll create the first screen of the StickerSmash app. The screen above displays an image and two buttons. The app user can select an image using one of the two buttons. The first button allows the user to select an image from their device. The second button allows the user to continue with a default image provided by the app. Once the user selects an image, they can add a sticker to it. So, let's start creating this screen. Video Tutorial: [Watch: Building a screen in your universal Expo app](https://www.youtube.com/watch?v=3rcOP8xDwTQ) --- Step 1: ## Break down the screen Before we build this screen by writing code, let's break it down into some essential elements. There are two essential elements: - There is a large image displayed at the center of the screen - There are two buttons in the bottom half of the screen The first button contains multiple components. The parent element provides a yellow border, and contains an icon and text components inside a row. Now that we've broken down the UI into smaller chunks, we're ready to start coding. Step 2: ## Display the image We'll use `expo-image` library to display the image in the app. It provides a cross-platform `` component to load and render an image. Stop the development server by pressing Ctrl + c in the terminal. Then, install the `expo-image` library: ```sh $ npx expo install expo-image ``` The [`npx expo install`](/more/expo-cli/#installation) command will install the library and add it to the project's dependencies in **package.json**. The Image component takes the source of an image as its value. The source can be either a [static asset](https://reactnative.dev/docs/images#static-image-resources) or a URL. For example, the source required from **assets/images** directory is static. It can also come from [Network](https://reactnative.dev/docs/images#network-images) as a `uri` property. To use the Image component in **app/(tabs)/index.tsx** file: 1. Import `Image` from the `expo-image` library. 2. Create a `PlaceholderImage` variable to use **assets/images/background-image.png** file as the `source` prop on the `Image` component. ```tsx app/(tabs)/index.tsx|collapseHeight=380 import { View, StyleSheet } from 'react-native'; const PlaceholderImage = require('@/assets/images/background-image.png'); export default function Index() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', }, imageContainer: { flex: 1, }, image: { width: 320, height: 440, borderRadius: 18, }, }); ``` Step 3: ## Divide components into files Let's divide the code into multiple files as we add more components to this screen. Throughout this tutorial, we'll use the components directory to create custom components. 1. Create a top-level **components** directory, and inside it, create the **ImageViewer.tsx** file. 2. Move the code to display the image in this file along with the `image` styles. ```tsx components/ImageViewer.tsx|collapseHeight=280 import { StyleSheet } from 'react-native'; import { Image, type ImageSource } from 'expo-image'; type Props = { imgSource: ImageSource; }; export default function ImageViewer({ imgSource }: Props) { return ; } const styles = StyleSheet.create({ image: { width: 320, height: 440, borderRadius: 18, }, }); ``` > **info** Since **ImageViewer** is a custom component, we are placing it in a separate directory instead of the **app** directory. Every file inside **app** directory is either a layout file or a route file. For more information, see [Non-route files](/router/create-pages/#non-route-files). Import `ImageViewer` and use it in the **app/(tabs)/index.tsx**: ```tsx app/(tabs)/index.tsx|collapseHeight=320 import { StyleSheet, View } from 'react-native'; const PlaceholderImage = require('@/assets/images/background-image.png'); export default function Index() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#25292e', alignItems: 'center', }, imageContainer: { flex: 1, }, }); ``` Note: What is the in import statement? --- The `@` symbol is a custom [path alias](/guides/typescript/#path-aliases-optional) for importing custom components and other modules instead of relative paths. Expo CLI automatically configures it in **tsconfig.json**. --- Step 4: ## Create buttons using Pressable React Native includes a few different components for handling touch events, but [``](https://reactnative.dev/docs/pressable) is recommended for its flexibility. It can detect single taps, long presses, trigger separate events when the button is pushed in and released, and more. In the design, there are two buttons we need to create. Each has a different style and label. Let's start by creating a reusable component for these buttons. Create a **Button.tsx** file inside the **components** directory with the following code: ```tsx components/Button.tsx|collapseHeight=280 import { StyleSheet, View, Pressable, Text } from 'react-native'; type Props = { label: string; }; export default function Button({ label }: Props) { return ( alert('You pressed a button.')}> {label} ); } const styles = StyleSheet.create({ buttonContainer: { width: 320, height: 68, marginHorizontal: 20, alignItems: 'center', justifyContent: 'center', padding: 3, }, button: { borderRadius: 10, width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', flexDirection: 'row', }, buttonLabel: { color: '#fff', fontSize: 16, }, }); ``` The app displays an alert when the user taps any of the buttons on the screen. It happens because `` calls `alert()` on its `onPress` prop. Let's import this component into **app/(tabs)/index.tsx** file and add styles for the `` that encapsulates these buttons: ```tsx app/(tabs)/index.tsx import { View, StyleSheet } from 'react-native'; import ImageViewer from '@/components/ImageViewer'; const PlaceholderImage = require("@/assets/images/background-image.png"); export default function Index() { return (

`, `

`, and ``. RNW is optional when developing for web since you can use React DOM directly, but we often recommended it when building across platforms as it maximizes code reuse. > React Native for web is used to power the entire [X](https://x.com/) website. For Web-only: Alternatively, you can write web-only React DOM components such as `

`, `

`, and so on, however, these components won't render on native platforms. ```jsx app/index.js export default function Page() { return

Home page

; } ``` Building web-only components is fully supported by Expo, however, you may want to organize your code to better support building for both web and native platforms simultaneously. Learn more in [platform-specific modules](/router/advanced/platform-specific-modules). All of the 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. Development features like Fast Refresh, debugging, environment variables, and [bundling](/guides/customizing-metro) are also fully universal, enabling a unified developer experience. Expo CLI **automatically optimizes code** for individual platforms when you build for production, using techniques like [platform shaking](/guides/tree-shaking#platform-shaking). ## Getting started ### Install web dependencies ```sh $ npx expo install react-dom react-native-web @expo/metro-runtime ``` Note: Not using the package in your app yet? --- If you haven't added Expo to your React Native app yet, you can either [install Expo modules](/bare/installing-expo-modules/) (recommended) or just install the `expo` package and configure the app entry file. This will allow you to target web, but it will not include support for the Expo SDK. 1. Install [Expo CLI](/more/expo-cli/) in your project: ```sh $ npm install expo ``` 2. Modify the entry file to use [`registerRootComponent`](/versions/latest/sdk/register-root-component#registerrootcomponentcomponent) instead of `AppRegistry.registerComponent`: ```diff + import {registerRootComponent} from 'expo'; import App from './App'; - import {AppRegistry} from 'react-native'; - import {name as appName} from './app.json'; - AppRegistry.registerComponent(appName, () => App); + registerRootComponent(App); ``` --- ### Start the dev server You can now start the dev server and develop in the browser with: ```sh $ npx expo start --web ``` The app can be exported as a production website with: ```sh $ npx expo export --platform web ``` ## Next ## Publish websites Learn how to deploy Expo websites for production. An Expo web app can be served locally for testing the production behavior, and deployed to a hosting service. We recommend deploying to [EAS Hosting](/eas/hosting) for the best feature support. You can also self-host or use a third-party service. For SDK 49 and below, you may need the [guide for publishing `webpack` builds](/archive/publishing-websites-webpack/). ## Output targets The [`web.output`](/versions/latest/config/app/#output) target can be configured in the [app config](/workflow/configuration/) to set the export method for the web app: ```json app.json { "expo": { "web": { "output": "server", "bundler": "metro" } } } ``` Expo Router supports three output targets for web apps. | Output | Expo Router | API Routes | Description | | ------------------ | ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `single` (default) | | | Outputs a Single Page Application (SPA) with a single **index.html** in the output directory and has no statically indexable HTML. | | `server` | | | Creates **client** and **server** directories. Client files are output as separate HTML files. API routes as separate JavaScript files for hosting with a custom Node.js server. | | `static` | | | Outputs separate HTML files for every route in the **app** directory. | ## Create a build Creating a build of the project is the first step to publishing a web app. Whether you want to serve it locally or deploy to a hosting service, you'll need to export all JavaScript and assets of a project. This is known as a static bundle. It can be exported by running the following command: Run the universal export command to compile the project for web: ```sh $ npx expo export -p web ``` The resulting project files are located in the **dist** directory. Any files inside the **public** directory are also copied to the **dist** directory. ## Serve locally Use `npx expo serve` to quickly test locally how your website will be hosted in production. Run the following command to serve the static bundle: ```sh $ npx expo serve ``` Open [`http://localhost:8081`](http://localhost:8081) to see your project in action. This is **HTTP only**, so permissions, camera, location, and many other secure features may not work as expected. ## Hosting with EAS When you're ready to go to production, you can instantly deploy your website with EAS CLI. ## Hosting on third-party services ### Netlify [Netlify](https://www.netlify.com/) is a mostly-unopinionated platform for deploying web apps. This has the highest compatibility with Expo web apps as it makes few assumptions about the framework. #### Manual deployment with the Netlify CDN Step 1: Install the Netlify CLI by running the following command: ```sh $ npm install -g netlify-cli ``` Step 2: Configure redirects for single-page applications. > If your app uses [static rendering](/router/reference/static-rendering), then you can skip this step. `expo.web.output: 'single'` generates a single-page application. It means there's only one **dist/index.html** file to which all requests must be redirected. This can be done in Netlify by creating a **./public/\_redirects** file and redirecting all requests to **/index.html**. ```sh public/_redirects /* /index.html 200 ``` If you modify this file, you must rebuild your project with `npx expo export -p web` to have it safely copied into the **dist** directory. Step 3: Deploy the web build directory by running the following command: ```sh $ netlify deploy --dir dist ``` You'll see a URL that you can use to view your project online. #### Continuous delivery Netlify can also build and deploy when you push to git or open a new pull request: - [Start a new Netlify project](https://app.netlify.com/signup). - Pick your Git hosting service and select your repository. - Click **Build your site**. ### Vercel [Vercel](https://vercel.com/) has a single-command deployment flow. Step 1: Install the [Vercel CLI](https://vercel.com/docs/cli). ```sh $ npm install -g vercel@latest ``` Step 2: Configure redirects for single-page applications. Create a **vercel.json** file at the root of your app and add the following configuration: ```json vercel.json { "buildCommand": "expo export -p web", "outputDirectory": "dist", "devCommand": "expo", "cleanUrls": true, "framework": null, "rewrites": [ { "source": "/:path*", "destination": "/" } ] } ``` If your app uses [static rendering](/router/reference/static-rendering), then you may want to add additional [dynamic route configuration](/router/reference/static-rendering#dynamic-routes). Step 3: Deploy the website. {' '} ```sh $ vercel ``` You'll now see a URL that you can use to view your project online. Paste that URL into your browser when the build is complete, and you'll see your deployed app. ### AWS Amplify Console The [AWS Amplify Console](https://console.amplify.aws) provides a Git-based workflow for continuously deploying and hosting full-stack serverless web apps. Amplify deploys your PWA from a repository instead of from your computer. In this guide, we'll use a GitHub repository. Before starting, [create a new repo on GitHub](https://github.com/new). Step 1: Add the [**amplify-explicit.yml**](https://github.com/expo/amplify-demo/blob/master/amplify-explicit.yml) file to the root of your repository. Ensure you have removed the generated **dist** directory from the **.gitignore** file and committed those changes. Step 2: Push your local Expo project to a GitHub repository. If you haven't pushed to GitHub yet, follow [GitHub's guide to add an existing project to GitHub](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github). Step 3: Login to the [Amplify Console](https://console.aws.amazon.com/amplify/home) and select an existing app or create a new app. Grant Amplify permission to read from your GitHub account or the organization that owns your repo. Step 4: Add your repo, select the branch, and select **Connecting a monorepo?** to enter the path to your app's **dist** directory and choose **Next**. The Amplify Console will detect the **amplify.yml** file in your project. Select **Allow AWS Amplify to automatically deploy all files hosted in your project root directory** and choose **Next**. Step 5: Review your settings and choose **Save and deploy**. Your app will now be deployed to a `https://branchname.xxxxxx.amplifyapp.com` URL. You can now visit your web app, deploy another branch, or add a unified backend environment across your Expo mobile and web apps. Follow the steps in the **Learn how to get the most out of Amplify Hosting** drop-down to **Add a custom domain with a free SSL certificate** and more information. ### Firebase hosting [Firebase Hosting](https://console.firebase.google.com/) is production-grade web content hosting for web projects. Step 1: Create a firebase project with the [Firebase Console](https://console.firebase.google.com) and install the Firebase CLI by following these [instructions](https://firebase.google.com/docs/hosting). Step 2: Using the CLI, login to your Firebase account by running the command: ```sh $ firebase login ``` Step 3: Then, initialize your firebase project to host by running the command: ```sh $ firebase init ``` The settings will depend on how you built your Expo website: 1. When asked about the public path, make sure to specify the **dist** directory. 2. When prompted **Configure as a single-page app (rewrite all urls to /index.html)**, only select **Yes** if you used `web.output: "single"` (default). Otherwise, select **No**. Step 4: In the existing `scripts` property of **package.json**, add `predeploy` and `deploy` properties. Each has the following values: ```json package.json "scripts": { "predeploy": "expo export -p web", "deploy-hosting": "npm run predeploy && firebase deploy --only hosting", } ``` Step 5: To deploy, run the following command: ```sh $ npm run deploy-hosting ``` Open the URL from the console output to check your deployment, for example: `https://project-name.firebaseapp.com`. In case you want to change the header for hosting add the following config for `hosting` section in **firebase.json**: ```json firebase.json "hosting": [ { "headers": [ { "source": "/**", "headers": [ { "key": "Cache-Control", "value": "no-cache, no-store, must-revalidate" } ] }, { "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)", "headers": [ { "key": "Cache-Control", "value": "max-age=604800" } ] } ], } ] ``` ### GitHub Pages [GitHub Pages](https://pages.github.com/) allows you to publish a website directly from a GitHub repository. > **warning** GitHub Pages deployment requires Expo SDK 50 or higher, and uses experimental `baseUrl` functionality that may not work as intended. Step 1: Start by initializing a new git repository in your project and configuring it to push to a GitHub repository. If you are already syncing your changes with a GitHub repository, skip this step. Create a repository on the GitHub website. Then, run the following commands in your project's root directory: ```sh $ git init $ git remote add origin https://github.com/username/expo-gh-pages.git ``` The above commands initialize a new Git repository and configure it to push your source code to the specified GitHub repository. Step 2: Install the `gh-pages` package as a development dependency in your project: For npm: ```sh $ npm install --save-dev gh-pages ``` For Yarn: ```sh $ yarn add -D gh-pages ``` Step 3: To deploy the project, configure it to a subdomain with the [`baseUrl`](/versions/latest/config/app/#baseurl) property in [app config](/workflow/configuration/). Set its value to the string `/repo-name`. For example, if the GitHub repository is `expo-gh-pages`, the following will be the value of the [experimental `baseUrl` property](/more/expo-cli/#hosting-with-sub-paths): ```json app.json { "expo": { "experiments": { "baseUrl": "/expo-gh-pages" } } } ``` Step 4: Modify the `scripts` in the **package.json** file by adding `predeploy` and `deploy` scripts. Each has its own value: ```json package.json "scripts": { "deploy": "gh-pages --nojekyll -d dist", "predeploy": "expo export -p web" } ``` Since Expo uses underscores in generated files, you need to disable Jekyll with the `--nojekyll` flag. Step 5: To generate a production build of the web app and deploy it to GitHub Pages, run the following command: For npm: ```sh $ npm run deploy ``` For Yarn: ```sh $ yarn deploy ``` This publishes a build of the web app to the `gh-pages` branch of your GitHub repository. This branch only contains build artifacts from the **dist** directory, plus the **.nojekyll** file generated by `gh-pages`. It does not include development source code. Step 6: Now that the web app is published to the `gh-pages` branch, configure GitHub Pages to serve the app from that branch. - Navigate to the **Settings** tab of the GitHub repository. - Scroll down to **Pages** section. - Ensure the **Source** is set to **Deploy from a branch**. - Under **Branch** section, select **gh-pages** and the **root** directory. - Click **Save**. Step 7: Once the web app is published and the GitHub Pages configuration is set, a GitHub action will deploy your website. You can monitor its progress by navigating to your repository's **Actions** tab. Upon completion, your web app will be available at the URL `http://username-on-github.github.io/repo-name`. For subsequent deployments and updates, run the `deploy` command and the GitHub action will start automatically to update your web app. ## Using React DOM in Expo native apps Learn about rendering React DOM components in Expo native apps using the 'use dom' directive. > **info** Available in **SDK 52 and above**. Expo offers a novel approach to work with modern web code directly in a native app via the `'use dom'` directive. This enables incremental migration for an entire website to a universal app by moving on a per-component basis. While the Expo native runtime generally does not support elements like `

` or ``, there may be instances where you need to quickly incorporate web components. In such cases, DOM components provide a useful solution. ## Prerequisites Note: Your project must use Expo CLI and extend the Expo Metro Config --- If you already run your project with `npx expo [command]` (for example, if you created it with `npx create-expo-app`), then you're all set, and you can skip this step. If you don't have the `expo` package in your project yet, then install it by running the command below and [opt in to using Expo CLI and Metro Config](/bare/installing-expo-modules/#configure-expo-cli-for-bundling-on-android-and-ios): ```sh $ npx install-expo-modules@latest ``` If the command fails, refer to the [Installing Expo modules](/bare/installing-expo-modules/#manual-installation) guide. --- Note: Expo Metro Runtime, React DOM, and React Native Web --- If you are using Expo Router and Expo Web, you can skip this step. Otherwise, install the following packages: ```sh $ npx expo install @expo/metro-runtime react-dom react-native-web ``` --- ## Usage Install `react-native-webview` in your project: ```sh $ npx expo install react-native-webview ``` To render a React component to the DOM, add the `'use dom'` directive to the top of the web component file: ```tsx my-component.tsx (web) 'use dom'; export default function DOMComponent({ name }: { name: string }) { return (

Hello, {name}

); } ``` Inside the native component file, import the web component to use it: ```tsx App.tsx (native) import DOMComponent from './my-component.tsx'; export default function App() { return ( // This is a DOM component. It re-exports a wrapped `react-native-webview` behind the scenes. ); } ``` ## Features - Shared bundler config across web, native, and DOM components. - React, TypeScript, CSS, and all other Metro features are enabled in DOM components. - Logging in the terminal and Safari/Chrome debugging. - Fast Refresh and HMR. - Embedded exports for offline support. - Assets are unified across web and native. - DOM component bundles can be introspected in [Expo Atlas](/guides/analyzing-bundles/#analyzing-bundle-size-with-atlas) for debugging. - Access to all web functionality without needing a native rebuild. - Runtime error overlay in development. - Supports Expo Go. ## WebView props To pass props to the underlying native **WebView**, use the `dom` prop on the component. This prop is built into every DOM component and accepts an object with any [`WebView` props](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md) that you would like to change. ```tsx App.tsx (native) import DOMComponent from './my-component'; export default function App() { return ( ); } ``` On your DOM component, add the `dom` prop so it is recognized in TypeScript: ```tsx my-component.tsx (web) 'use dom'; export default function DOMComponent({}: { dom: import('expo/dom').DOMProps }) { return (

Hello, world!

); } ``` ## Marshalled props You can send data to the DOM component through serializable props (`number`, `string`, `boolean`, `null`, `undefined`, `Array`, `Object`). For example, inside a native component file, you can pass a prop to the DOM component: ```tsx App.tsx (native) import DOMComponent from './my-component'; export default function App() { return ; } ``` Inside the web component file, you can receive the prop as shown in the example below: ```tsx my-component.tsx (web) 'use dom'; export default function DOMComponent({ hello }: { hello: string }) { return

Hello, {hello}

; } ``` Props are sent over an asynchronous bridge so they are not updated synchronously. They are passed as props to the React root component, which means they re-render the entire React tree. ## Native actions You can send type-safe native functions to DOM components by passing asynchronous functions as top-level props to the DOM component: ```tsx App.tsx (native) import DomComponent from './my-component'; export default function App() { return ( { console.log('Hello', data); }} /> ); } ``` ```tsx my-component.tsx (web) 'use dom'; export default function MyComponent({ hello }: { hello: (data: string) => Promise }) { return

hello('world')}>Click me

; } ``` > You cannot pass functions as nested props to DOM components. They must be top-level props. Native actions are always asynchronous and accept only serializable arguments (meaning no functions) because the data is sent over a bridge to the DOM component's JavaScript engine. Native actions can return serializable data to the DOM component, which is useful for getting data back from the native side. ```tsx getDeviceName(): Promise { return DeviceInfo.getDeviceName(); } ``` Think of these functions like React Server Functions, but instead of residing on the server, they live locally in the native app and communicate with the DOM component. This approach provides a powerful way to add truly native functionality to your DOM components. ## Passing refs > **warning** **Warning:** This is experimental and may change in the future. You can use the `useDOMImperativeHandle` hook inside a DOM component to accept ref calls from the native side. This hook is similar to React's [`useImperativeHandle`](https://react.dev/reference/react/useImperativeHandle) hook, but it does not need a ref object to be passed to it. ```tsx App.tsx (native) import { useRef } from 'react'; import { Button, View } from 'react-native'; import MyComponent, { type MyRef } from './my-component'; export default function App() { const ref = useRef(null); return (