guides

835 notes in this subject, read out of this brain and free to use. This is page 6 of 14.

React Compiler configuration example

Example babel.config.js with React Compiler settings: module.exports = function (api) { api.cache(true); return {presets: [['babel-preset-expo', {'react-compiler': {compilationMode: 'all', panicThreshold: 'all_errors'}, web: {'react-compiler': {}}}]]}; };

Check React Compiler compatibility

Run npx react-compiler-healthcheck@latest to verify project compatibility with the React Compiler. This tool verifies if your app is following the rules of React.

React Compiler implementation scope

Expo's React Compiler only runs on application code (not node modules) and only when bundling for the client (disabled in server rendering).

Remove manual memoization with React Compiler

With React Compiler enabled, you can remove instances of useCallback, useMemo, and React.memo in favor of automatic memoization. Class components will not be optimized; migrate to function components instead.

Use 'use no memo' directive to opt out

Add the 'use no memo' directive at the top of a component or file to opt out of React Compiler optimizations for that component or file.

Incremental adoption with babel.config.js

To adopt React Compiler incrementally on specific files, create or customize babel.config.js and use the sources option to match filenames. After changing babel.config.js, restart Metro with npx expo start --clear.

Configure ESLint for React Compiler SDK 54 and earlier

Update eslint.config.js to include React Compiler plugin: const { defineConfig } = require('eslint/config'); const expoConfig = require('eslint-config-expo/flat'); const reactCompiler = require('eslint-plugin-react-compiler'); module.exports = defineConfig([expoConfig, reactCompiler.configs.recommended, {ignores: ['dist/*']}]);

Install React Compiler ESLint plugin SDK 54 and earlier

For SDK 54 and earlier, install eslint-plugin-react-compiler as a dev dependency using: npx expo install eslint-plugin-react-compiler -- -D

React Compiler lint rules in SDK 55 and later

React Compiler lint rules are included by default with eslint-config-expo in SDK 55 and later. If eslint-plugin-react-compiler was previously installed, it can be uninstalled and removed from ESLint configuration.

Enable React Compiler in app.json

Add the following to app.json to enable React Compiler: {"expo": {"experiments": {"reactCompiler": true}}}

Install React Compiler packages SDK 52 and earlier

For SDK 52 and earlier, install both packages using: npx expo install babel-plugin-react-compiler@beta react-compiler-runtime@beta

Install React Compiler packages SDK 54 and later

In SDK 54 and later, Babel is automatically configured, so babel-plugin-react-compiler does not need to be manually installed.

React Compiler overview and benefits

The React Compiler automatically memoizes components and hooks to enable fine-grained reactivity, leading to significant performance improvements in Expo apps.

GitHub Pages configuration in repository settings

To serve a web app from GitHub Pages, navigate to Settings > Pages, ensure Source is set to 'Deploy from a branch', select gh-pages branch and root directory, then click Save. The web app will be available at http://username-on-github.github.io/repo-name.

GitHub Pages deployment with gh-pages package

Install gh-pages as a development dependency. Add predeploy and deploy scripts to package.json: 'predeploy': 'expo export -p web' and 'deploy': 'gh-pages --nojekyll -d dist'. Use the --nojekyll flag because Expo uses underscores in generated files.

GitHub Pages baseUrl configuration

To deploy to GitHub Pages with a subdomain, configure the baseUrl property in app.json under experiments: {"expo": {"experiments": {"baseUrl": "/repo-name"}}}. Set the value to the string /repo-name where repo-name matches your GitHub repository name.

Firebase hosting cache control headers

In firebase.json, configure cache headers for hosting: set 'Cache-Control: no-cache, no-store, must-revalidate' for all files under source '/**', and 'Cache-Control: max-age=604800' for static assets matching jpg, jpeg, gif, png, svg, webp, js, css, eot, otf, ttf, ttc, woff, woff2, and font.css.

Firebase deployment with predeploy script

Add predeploy and deploy-hosting scripts to package.json: 'predeploy': 'expo export -p web' and 'deploy-hosting': 'npm run predeploy && firebase deploy --only hosting'. Run with 'npm run deploy-hosting' (or yarn/pnpm/bun equivalents).

Firebase hosting initialization configuration

When running 'firebase init', specify the dist directory as the public path. When prompted to configure as a single-page app, select Yes only if using web.output: 'single' (default), otherwise select No.

AWS Amplify deployment with amplify-explicit.yml

To deploy with AWS Amplify Console, add an amplify-explicit.yml file to the root of the repository. Ensure the generated dist directory is removed from .gitignore and those changes are committed.

Vercel deployment command

Deploy to Vercel using the command 'vercel'. A URL will be provided that you can use to view the deployed app.

Vercel deployment configuration

Create a vercel.json file at the root of the app with buildCommand: 'expo export -p web', outputDirectory: 'dist', devCommand: 'expo', cleanUrls: true, framework: null, and rewrites that redirect '/:path*' to '/'. For static rendering apps, add additional dynamic route configuration.

Netlify deployment command

Deploy a web build directory to Netlify using the command 'netlify deploy --dir dist'. The deployment URL will be provided in the console output.

Netlify single-page app redirect configuration

For Expo apps with web.output: 'single', create a ./public/_redirects file with the content '/* /index.html 200' to redirect all requests to index.html. If you modify this file, you must rebuild with 'npx expo export -p web' to copy it safely into the dist directory.

HTTP headers configuration for web output

For static and server output modes, you can configure global HTTP headers applied to all route responses via the expo-router plugin.

Reserved paths in public directory

Some paths such as /assets are reserved by Metro. Avoid placing files in public/assets/ or other reserved paths. See the Reserved paths reference for the complete list.

Serve local web build with expo serve

Use 'npx expo serve' to quickly test locally how your website will be hosted in production. Run the command with npm, yarn, pnpm, or bun variants and open http://localhost:8081 to see the project in action. This is HTTP only, so permissions, camera, location, and many other secure features may not work as expected.

Export web app with expo export command

To create a build of the project for web, run 'npx expo export -p web' (npm), 'yarn expo export -p web' (yarn), 'pnpm expo export -p web' (pnpm), or 'bun expo export -p web' (bun). The resulting project files are located in the dist directory. Any files inside the public directory are also copied to the dist directory.

Configure web output target in app config

The web.output target can be configured in app.json to set the export method for the web app. Example configuration: {"expo": {"web": {"output": "server", "bundler": "metro"}}}

Web output targets for Expo Router

Expo Router supports three output targets for web apps: 'single' (default, outputs a Single Page Application with a single index.html and no statically indexable HTML), 'server' (creates client and server directories, client files as separate HTML files, API routes as separate JavaScript files for hosting with a custom Node.js server), and 'static' (outputs separate HTML files for every route in the app directory).

SDK 49 and earlier use webpack build guide

For SDK 49 and earlier versions, refer to the guide for publishing webpack builds instead of the current publishing-websites guide.

Recommended web hosting platform is EAS Hosting

Expo recommends deploying web apps to EAS Hosting for the best feature support, including custom domains and SSL. Other options include self-hosting or using third-party services like Netlify, Vercel, AWS Amplify, Firebase, or GitHub Pages.

Web build uses dist directory

When exporting a web app with 'npx expo export -p web', the output is placed in the dist directory. Any files in the public directory are copied to dist as well.

iOS App Store iPad bare minimum assets

App Store - iPad bare minimum requirements (if app runs on iPad): Screenshots: 2-10 required, dimensions choice of 2064 × 2752 or 2048 × 2732, JPG or PNG (no alpha)

iOS App Store iPhone bare minimum assets

App Store - iPhone bare minimum requirements: Screenshots (iPhone with the dynamic island): 2-10 required, dimensions choice of 1320 × 2868 or 1290 × 2796, JPG or PNG (no alpha)

Google Play Store bare minimum assets

Play Store - Android bare minimum requirements: App Icon: 1 required, 512 × 512 dimensions, 32-bit PNG (with alpha), maximum file size 1024 KB Feature Graphic: 1 required, 1024 × 500 dimensions, JPEG or 24-bit PNG (no alpha) Screenshots: 4-10 required, minimum dimensions 1024 × 500, maximum width 3840px, 9:16 aspect ratio, JPEG or 24-bit PNG (no alpha)

iOS App Store optional preview video

You can include up to three app preview videos for each screen size to demonstrate how your app works. See Apple's App Preview Specifications for video size and format requirements.

iOS App Store screenshot orientation

Screenshots can be portrait or landscape.

iOS App Store screenshot localization

You can upload up to ten screenshots per localization. If your app is available in multiple languages and your screenshots include text, you should upload screenshots with the appropriate language for each localization.

iOS App Store iPad screenshot requirement

If your app runs on iPad, you must provide one set of iPad screenshots (13 inch).

iOS App Store minimum screenshot size

At a minimum, you must upload screenshots for iPhone with the dynamic island (6.9 inch). You can optionally upload additional screenshots for other screen sizes. If specific screenshots are not provided, scaled down screenshots from the closest uploaded size will be used.

iOS App Store screenshots and previews requirements

For the iOS App Store you can upload screenshots (images) and previews (videos). Apple requires specific widths and heights for each. Exact sizing is critical - even a single pixel off will prevent image submission. Refer to Apple's Screenshot specifications for exact sizing.

Google Play Store optional preview video

You can add one preview video to your Google Play Store Store Listing. The video must be uploaded to YouTube and added by entering a YouTube URL in the preview video field.

Google Play Store minimum screenshots

You need to upload at least four screenshots to publish your app on Google Play Store.

Google Play Store feature graphic requirement

A feature graphic is a banner displayed at the top of your store listing page and must be provided to publish your Store Listing on Google Play Store.

Google Play Store app icon requirement

Unlike the Apple App Store where the app icon is taken automatically from the app bundle, on the Google Play Store you must upload a separate App Icon for your store listing.

Three approaches to creating store screenshots

Option 1: Actual screenshots - take screenshots on real devices. Pros: straightforward and most accurate. Cons: need to load app on different devices. Option 2: Screenshots within a design - embed app screenshots in store assets with messaging using a design program. Pros: convey additional messaging. Cons: requires design program. Option 3: Fancy design - incorporate app design elements and creative messaging. Pros: creative and fun. Cons: needs experienced designer.

App store screenshots definition and creative flexibility

App store screenshots are images for your store listing page that show prospective users what the app experience will be like. They must include accurate visuals of your app but do not have to be screenshots taken on specific devices. Within store format and size restrictions, you can be creative, such as designing assets in Figma and incorporating actual app screenshots with supplementary messaging.

Reset permissions in Expo Go for testing

When testing in Expo Go, you can delete and reinstall the app by running npx expo start and pressing I or A in the Expo CLI Terminal UI to test different permission flows.

Web permissions require secure context

On the web, permissions like Camera and Location can only be requested from a secure context, such as https:// or http://localhost. This limitation is enforced to increase privacy.

Android and iOS prohibit repeated permission requests

An operating-system level restriction on both Android and iOS prohibits an app from asking for the same permission more than once. To test different permission flows in development, you may need to uninstall and reinstall the native app.

Permissions require native build-time configuration in standalone and development builds

Permissions in standalone apps and development builds require native build-time configuration before they can be requested using runtime JavaScript code. This configuration is not required when testing projects in the Expo Go app.

Info.plist changes cannot be updated over-the-air

Changes to the Info.plist file cannot be updated over-the-air and will only be deployed when you submit a new native binary, such as with eas build.

iOS permission message example configuration

Example of setting an iOS permission message in app.json: ```json { "ios": { "infoPlist": { "NSCameraUsageDescription": "This app uses the camera to scan barcodes on event tickets." } } } ```

iOS permissions configuration with ios.infoPlist

iOS app permission messages are configured using the ios.infoPlist key in the app config. Most packages automatically provide default permission messages with config plugins, but these default messages should be tailored to your specific use case for App Store acceptance.

Dangerous or signature Android permissions may be rejected by Google

Apps using dangerous or signature Android permissions without valid reasons may be rejected by Google Play. When submitting an app, ensure you follow the Android permissions best practices from Android's official documentation.

Android blocked permissions example

Example of removing Android permissions in app.json: ```json { "android": { "blockedPermissions": ["android.permission.RECORD_AUDIO"] } } ```

Android permissions example configuration

Example of adding an Android permission in app.json: ```json { "android": { "permissions": ["android.permission.SCHEDULE_EXACT_ALARM"] } } ```

Android permissions configuration with android.permissions and android.blockedPermissions

Android permissions are configured using the android.permissions and android.blockedPermissions keys in the app config. Most permissions are added automatically by libraries using config plugins or package-level AndroidManifest.xml. Use android.permissions to add additional permissions not included by default. Use android.blockedPermissions to remove permissions added by package-level AndroidManifest.xml files by specifying the full permission name.

Disable specific precompiled modules via Autolinking

Configure Expo Autolinking with buildFromSource in package.json to opt out of specific precompiled modules. Use ".*" to opt out of every precompiled module, or list specific package names. The same setting is available for both android and ios. Example: {"expo": {"autolinking": {"android": {"buildFromSource": [".*"]}, "ios": {"buildFromSource": [".*"]}}}}. This is typically only needed when modifying module source code.

Give your agent this brain