new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Expo & React Native · all subjects

guides

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

Manual iOS associated domains entitlements configuration

If not using EAS Build or Continuous Native Generation, manually add the Associated Domains capability by adding the following to ios/[app]/[app].entitlements file: <key>com.apple.developer.associated-domains</key><array><string>applinks:expo.dev</string></array>

iOS AASA re-fetch behavior and app store updates

iOS downloads the AASA when the app is first installed or when updates are installed from the App Store. The operating system does not refresh frequently after that. If you want to change paths in AASA for a production app, you must issue a full update via the App Store so users' apps re-fetch the AASA and recognize new paths.

Apple Smart Banner meta tag for app installation

To enable Apple Smart Banner, add the following meta tag to the <head> of your website: <meta name="apple-itunes-app" content="app-id=<ITUNES_ID>" /> where <ITUNES_ID> is your app's iTunes ID. The banner only shows on mobile devices to users who don't have the app installed.

Add Apple Smart Banner to Expo Router static website

For statically rendered websites with Expo Router, add the apple-itunes-app meta tag to the <head> component in src/app/+html.js file.

Debug iOS Universal Links using Expo CLI tunnel

Use Expo CLI's tunnel functionality to test iOS Universal Links without deploying a website. Set EXPO_TUNNEL_SUBDOMAIN=my-custom-domain environment variable, add associatedDomains to app config with Ngrok URL (my-custom-domain.ngrok.io), start dev server with npx expo start --tunnel, and compile with npx expo run:ios.

setup-safari CLI command for iOS universal links

The experimental CLI command 'npx setup-safari' can be run to automatically register a bundle identifier to your Apple account, assign entitlements to the ID, and create an iTunes app entry in the store. This is the easiest way to get started with universal links on iOS.

AASA file size limit

The uncompressed apple-app-site-association file cannot be larger than 128kb.

Linking allows app interaction with incoming and outgoing URLs

Linking allows your app to interact with incoming and outgoing URLs. Through this process, the user not only gets directed to open your app, but they are taken to a specific screen (route) within the app.

Three linking strategies in Expo apps

There are three different linking strategies you can handle in your Expo app: linking to your app using your web domain links (universal linking using the https or http scheme), linking to your app from other apps or websites using a custom scheme (deep links), and linking to other apps from your app (outgoing links).

Linking support in Expo Go is limited

Support for incoming links in Expo Go is limited. Development builds are recommended to test your app's linking strategies.

Android App Links use HTTP/HTTPS and are Android-exclusive

Android App Links are different from standard deep links as they use regular HTTP and HTTPS schemes and are exclusive to Android devices. This link type allows your app to always open when a user clicks the link instead of choosing between the browser or another handler from a dialog displayed on the device. If the user doesn't have your app installed, the link takes them to your app's associated website.

iOS Universal Links use HTTP/HTTPS and are iOS-exclusive

iOS Universal Links are different from standard deep links as they use regular HTTP and HTTPS schemes and are exclusive to iOS devices. This link type allows your app to open when a user clicks an HTTP(S) link pointing to your web domain. If the user doesn't have your app installed, the link takes them to your app's associated website.

Deep link structure has three parts: scheme, host, and path

A deep link is constructed by three parts: the scheme (the URL scheme that identifies the app that should open the URL, example: myapp://; it can also be https or http for non-standard deep links), the host (the domain name of the app that should open the URL, example: web-app.com), and the path (the path to the screen that should be opened, example: /product; if the path isn't specified, the user is taken to the home screen of the app).

Recommend Expo Router for deep linking implementation

Expo Router is recommended for implementing any of the linking strategies since deep linking is automatically enabled for all of your app's screens. Benefits include: the Link component from Expo Router can be used to handle URL schemes to other apps; Android App Links and iOS Universal Links require configuring runtime routing in JavaScript for the link in your app, but using Expo Router, you don't have to configure runtime routing separately since deep links for all routes are automatically enabled; for third-party deep links, you can override the default linking behavior to handle incoming links and send navigation events.

URL schemes used to link to other apps

Linking to other apps from your app is achieved using a URL based on the target app's URL scheme. Your app can use a common URL scheme for default apps, including https and http (commonly used by web browsers like Chrome, Safari, and so on), and use JavaScript to invoke the URL that launches the corresponding native app.

Setting up react-native-tvos for tvOS app support

To add tvOS support to an app, follow the instructions in the react-native-tvos repository. For Expo apps specifically, also follow the 'Build Expo apps for TV' guide in the Expo documentation.

create-expo-app with pnpm configuration

pnpm requires installing Node.js. Projects created with create-expo-app and pnpm use `nodeLinker` set to `hoisted` in pnpm-workspace.yaml by default. In SDK 54 and later, Expo supports isolated installations, and you can delete the `nodeLinker` setting to use isolated dependencies. For EAS, pnpm is supported by default if the project directory contains pnpm-lock.yaml.

create-expo-app with Bun

For details on creating a new Expo project with Bun, migration from another package manager, and usage with EAS, see the Bun guide.

create-expo-app command to create new project

To create a new Expo and React Native project, run one of the following commands depending on your package manager: `npx create-expo-app@latest --template default@sdk-57` for npm, `yarn create expo-app --template default@sdk-57` for Yarn, `pnpm create expo-app --template default@sdk-57` for pnpm, or `bun create expo --template default@sdk-57` for Bun. During SDK 57 transition, using the command without the `--template` flag creates an SDK 54 project. After running the command, you will be prompted to enter the app name, which is also used in the app config's `name` property.

create-expo-app --yes option

The `--yes` option uses default options to create a new project without prompting for customization.

create-expo-app --no-install option

The `--no-install` option skips installing npm dependencies or CocoaPods.

create-expo-app --no-agents-md option

The `--no-agents-md` option skips generating AGENTS.md, CLAUDE.md, and .claude/settings.json files. By default, create-expo-app generates these files so AI coding agents such as Claude Code have Expo-specific context and the expo skills plugin configured automatically. The generated AGENTS.md points to the versioned Expo docs matching your project's SDK version.

create-expo-app available templates

The `--template` option allows selection from the following templates: (1) `default` - Default template designed to build multi-screen apps, includes Expo CLI, Expo Router library and TypeScript configuration. (2) `blank` - Installs minimum required npm dependencies without configuring navigation. (3) `blank-typescript` - Blank template with TypeScript enabled. (4) `tabs` - Installs and configures file-based routing with Expo Router and TypeScript enabled. (5) `bare-minimum` - Blank template with native directories (android and ios) generated, runs `npx expo prebuild` during setup.

create-expo-app --example option

The `--example` option initializes a project using an example from expo/examples repository. Running `npx create-expo-app --example` shows an interactive list of available examples. Running `npx create-expo-app --example with-router` sets up a project with Expo Router library. Running `npx create-expo-app --example with-react-navigation` sets up a project similar to the default template but configured with plain React Navigation library. The Expo Skills plugin for AI agents teaches canonical patterns from the examples repository.

create-expo-app --version and --help options

The `--version` option prints the version number and exits. The `--help` option prints the list of available options and exits.

create-expo-app with npm

npm is installed as part of Node.js installation. For EAS, npm is supported by default if the project directory contains package-lock.json.

create-expo-app with Yarn 1 (Classic)

Yarn 1 (Classic) is usually installed as a global dependency of npm. For EAS, Yarn 1 is supported by default if the project directory contains yarn.lock.

create-expo-app with Yarn 2+ configuration

Yarn 2+ uses Plug'n'Play (PnP) node linking model by default, which does not work with React Native. Projects created with create-expo-app and Yarn 2+ use `nodeLinker` set to `node-modules` in .yarnrc.yml to install dependencies. For EAS, Yarn Modern requires enabling Corepack by setting `corepack` to `true` in the build profile in eas.json. Pin the Yarn version in package.json using the `packageManager` field. For example: `packageManager: yarn@4.14.1`. Running `yarn set version <version>` locally updates this field. Corepack then automatically downloads and uses the pinned Yarn version when EAS installs dependencies.

Preview features not recommended for production

You probably should not depend on preview features in production unless you are prepared to deal with instability that may come with a rapidly evolving product offering.

How to provide feedback on preview features

Provide detailed feedback on preview features through either a partner Slack channel or by using the Share your feedback option, or by emailing preview@expo.dev. Feedback during the preview phase helps improve products before broader release.

Preview features not indexed or linked from main docs

Pages behind /preview in the Expo documentation are not indexed on search engines and are not linked from the main documentation. They contain experimental new features that Expo is working on.

Do not create public content about preview features

Do not produce blog posts, YouTube videos, or other content covering preview features, as everything documented in the preview section is likely to change and content will quickly become outdated.

Preview features may not remain free after release

Features that are free to preview may end up being paid services when they are officially released. Do not plan your business around these features being free.

Apps built with Expo can be GDPR compliant if developers follow requirements

Applications built with Expo can be GDPR compliant, but this depends on whether developers who build apps with Expo follow similar data privacy practices themselves. Expo ensures proper handling and processing of developer data and end-user data, but cannot guarantee developer compliance.

Expo privacy data collection policy

Expo collects data but does not collect individually identifiable health data. Developers can review all data that Expo collects on the privacy explained page at expo.dev/privacy-explained.

Apps built with Expo can be HIPAA compliant with proper implementation

Applications built with Expo can be HIPAA compliant if you follow the requirements. Expo itself does not collect individually identifiable health data. However, application developers are ultimately responsible for ensuring their own applications are HIPAA compliant, as compliance depends on the data the developer collects from users and how it is handled. There should be no compliance issues with using Expo as the framework.

Google Play Beta testing track limits

Google Play Beta provides three test track options: internal track (up to 100 testers, invited only), closed track (larger groups, testers must be invited), and open track (anyone can join). Apps are uploaded as AAB (Android App Bundle) to the Google Play Console. Testers install through the Play Store and feedback and crash reports are collected in the Console.

Three approaches for distributing apps for review

Apps can be distributed for review using three approaches: app store testing tracks, internal distribution with EAS Build, and development builds with EAS Update. Expo Go is not suitable for reviewing releases as it is a playground for students and learners, not for building production-grade projects.

App store testing tracks only accept release builds

When distributing apps through app store testing tracks, only release builds can be used. Development builds cannot be distributed this way. Internal distribution with EAS Build is an alternative that works with both release and development builds.

TestFlight internal testing limits and features

TestFlight internal testing allows up to 100 members of the Apple Developer account team to download the app through the TestFlight app. New testers can be added without rebuilding the app, and apps update automatically. Requires a paid Apple Developer account.

TestFlight external testing limits and requirements

TestFlight external testing allows sharing apps with up to 10,000 users via email or public link. External test builds require App Store review before distribution, which is distinct from the review required before production release. Apps must be uploaded to App Store Connect and pass automated review first.

Internal distribution with EAS Build availability

Internal distribution builds are available for download and installation immediately after creation, with no forms to fill out or approval/processing to wait for. The app is provided as an installable APK for Android or an ad hoc provisioned app for iOS, accessible via a shareable URL.

Internal distribution supports both release and development builds

Internal distribution with EAS Build can be used to share both release and development builds with a team.

Development builds with EAS Update for review stage

Development builds can load previews of an app during the review stage by publishing an update with EAS Update. After sharing a development build through internal distribution and installing it, any compatible EAS Update can be launched from the installed build. This approach allows responding to feedback by running `eas update`, which can take seconds to share a new version without rebuilding or uploading to a store test track.

Debugging gestures with AI agent feedback

When working with an AI agent, the agent can read its own code but cannot feel gestures. Only the developer can confirm that gesture interactions feel right. If a sticker lags, jumps, or snaps back, describe exactly that behavior to the agent.

Emoji picker modal workflow

When a photo has been chosen (either picked from the library or by tapping 'Use this photo'), replace the two buttons with a row of options: a 'Reset' option on the left that brings back the original buttons, and a circular '+' button in the middle. Tapping '+' should slide up a modal from the bottom titled 'Choose a sticker' that shows emoji images from the assets/images folder in a horizontally scrolling list. When tapping an emoji, close the modal and place that emoji on top of the photo as a sticker.

Interactive sticker gestures with react-native-gesture-handler and react-native-reanimated

Make stickers interactive using react-native-gesture-handler and react-native-reanimated libraries. Users should be able to drag stickers around with their finger to place them anywhere on the photo. Double-tapping a sticker should double its size; double-tapping again should shrink it back. Movement and resizing should animate smoothly.

Image picker with expo-image-picker

Add the expo-image-picker library to enable users to select photos from their phone's library. When a user taps 'Choose a photo', the photo library opens. On first use, the phone requests permission to access photos. If the user cancels without selecting an image, the current photo remains displayed. The selected photo replaces the placeholder.

Tutorial asset pack for StickerSmash

The StickerSmash tutorial provides an asset pack downloadable from https://docs.expo.dev/static/images/tutorial/sticker-smash-assets.zip. This pack contains placeholder photos and emoji stickers for use in the app. Assets should be extracted into the assets/images folder, replacing any existing files with the same names.

Use tunnel mode when phone and computer not on same Wi-Fi

If your phone and computer are not on the same Wi-Fi network and the app doesn't load, stop the development server with Ctrl + C and restart it in tunnel mode using `npx expo start --tunnel`. Tunnel mode works across networks.

Reload app on phone when stuck

If the app gets stuck, shake your phone and tap Reload in the menu that appears. If that doesn't help, stop the development server with Ctrl + C and run `npx expo start` again.

Troubleshooting workflow for incorrect app behavior

When results don't match expectations: describe exactly what you see and what you expected without diagnosing the cause; paste error messages verbatim from phone error screens or terminal output; ask the agent to review changes and find problems; if needed, reload the app or restart the development server.

Create new Expo app with SDK 54 template

To create a new Expo app, run `npx create-expo-app@latest` and choose the SDK 54 template. After creation, run the project's reset-project script to start from a minimal app, then delete the app-example folder that the script leaves behind.

Alternative way to connect phone to development server

You can find your project under the Projects tab in Expo Go when you are signed in to the same Expo account on your phone and in the terminal.

App icon does not display on home screen in Expo Go

When running a project inside Expo Go during development, the app icon on the home screen will not change because Expo Go is its own app with its own icon. The custom app icon takes effect only when creating a standalone build of the app.

Prompt loop for app development with AI agents

The recommended workflow for building apps with AI agents is: prompt the agent, build the feature, verify the result, and re-prompt based on what you observe. This iterative loop continues throughout development and can be applied to new feature ideas.

Example prompts for extending an AI-built app

Example prompts for iterating on an app built with an AI agent include: 'Let me place more than one sticker on the photo' for multiple selections, 'Add a share button that opens the system share sheet so I can send my creation to friends' for sharing functionality, and 'Fill in the About screen: explain what the app does and credit me as the builder' for documentation screens.

Use expo-status-bar to make status bar text light

The expo-status-bar library can be used to make the status bar (clock, battery, and signal icons at the top of the screen) display with light text, making it readable against dark app backgrounds.

AI agent results are not deterministic

AI agents don't produce identical results every time, so your app won't match example screenshots pixel for pixel. That is expected. The prompts describe the outcome you want, and the screenshots show approximately what you should see. You can edit the prompts to match your own taste.

Tutorial chapters for building StickerSmash app

The tutorial consists of six chapters: (1) Set up your tools, (2) Create your first app, (3) Build the home screen, (4) Add stickers, (5) Save your creation, and (6) Finishing touches.

Give your agent this brain

guides (12/14) — Expo & React Native