= {
};
export const sdkVersionHardcodedTypeLinks: Record> = {
- 'v53.0.0': {
- CameraPosition: '/versions/v53.0.0/sdk/maps/#cameraposition-2',
- EventEmitter: '/versions/v53.0.0/sdk/expo/#eventemitter',
- NativeModule: '/versions/v53.0.0/sdk/expo/#nativemodule',
- SharedObject: '/versions/v53.0.0/sdk/expo/#sharedobject',
- SharedRef: '/versions/v53.0.0/sdk/expo/#sharedref',
- },
'v54.0.0': {
BufferOptions: '/versions/v54.0.0/sdk/video/#bufferoptions-1',
CameraPosition: '/versions/v54.0.0/sdk/maps/#cameraposition-2',
@@ -354,6 +347,36 @@ export const sdkVersionHardcodedTypeLinks: Record
+ className={mergeClasses('mb-3 flex flex-row items-start in-[table]:mb-2.5', className)}>
{experimentalData.length > 0 && (
+
Don't have a project yet? It's quick and easy to create a "Hello world" app you can use with this guide:
-
Don't have a project yet? It's quick and easy to create a "Hello world" app you can use with this guide. Run the following command to create a new project:
-
- Create a project with `npx create-expo-app@latest --template default@sdk-55`, or ensure your
+ Create a project with `npx create-expo-app@latest --template default@sdk-56`, or ensure your
existing project has the latest `expo` package installed.
diff --git a/docs/pages/eas/hosting/get-started.mdx b/docs/pages/eas/hosting/get-started.mdx
index ef2293e02a6e19..7d1376f25380de 100644
--- a/docs/pages/eas/hosting/get-started.mdx
+++ b/docs/pages/eas/hosting/get-started.mdx
@@ -33,7 +33,7 @@ This guide will walk you through the process of creating your first web deployme
Don't have a project yet? It's quick and easy to create a "Hello world" app you can use with this guide. Run the following command to create a new project:
-
diff --git a/docs/pages/eas/index.mdx b/docs/pages/eas/index.mdx
index 6763b9576048fe..24c402dd99155c 100644
--- a/docs/pages/eas/index.mdx
+++ b/docs/pages/eas/index.mdx
@@ -70,7 +70,7 @@ Read the full pitch at [expo.dev/eas](https://expo.dev/eas), or follow the links
/>
**warning** Enable this only when testing your Expo Observe integration. Development/debug performance differs significantly from production, so collecting development/debug metrics may distort the results shown in your dashboard.
+> **warning** Enable this only when testing your EAS Observe integration. Development/debug performance differs significantly from production, so collecting development/debug metrics may distort the results shown in your dashboard.
## Custom endpoint
diff --git a/docs/pages/eas/observe/dashboard.mdx b/docs/pages/eas/observe/dashboard.mdx
index eb135c79b9dd3e..a8423d40714719 100644
--- a/docs/pages/eas/observe/dashboard.mdx
+++ b/docs/pages/eas/observe/dashboard.mdx
@@ -1,15 +1,15 @@
---
-title: Expo Observe dashboard
+title: EAS Observe dashboard
sidebar_title: Dashboard
-description: View performance metrics, filter by platform or version, and investigate individual sessions in the Expo Observe dashboard.
+description: View performance metrics, filter by platform or version, and investigate individual sessions in the EAS Observe dashboard.
---
import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
-The Observe dashboard provides a visual overview of your app's performance metrics. Open your project and in EAS dashboard, select [**Observe**](https://expo.dev/accounts/[account]/projects/[project]/observe) from the navigation menu.
+The EAS Observe dashboard provides a visual overview of your app's performance metrics. Open your project and in EAS dashboard, select [**Observe**](https://expo.dev/accounts/[account]/projects/[project]/observe) from the navigation menu.
-
- Expo Observe is in Private Preview and access is granted on request. [Request access
+
+ EAS Observe is in Private Preview and access is granted on request. [Request access
here](https://expo.dev/changelog/introducing-expo-observe).
- Expo Observe is available to anyone with an Expo account. You can sign up at
+ EAS Observe is available to anyone with an Expo account. You can sign up at
[expo.dev/signup](https://expo.dev/signup).
- Expo Observe requires SDK 55 or later. Run `npx expo-doctor` to check your SDK version and `npx
+ EAS Observe requires SDK 55 or later. Run `npx expo-doctor` to check your SDK version and `npx
expo install --fix` to update dependencies.
diff --git a/docs/pages/eas/observe/index.mdx b/docs/pages/eas/observe/index.mdx
index 6147beef9b06df..11b73e8c9f82cc 100644
--- a/docs/pages/eas/observe/index.mdx
+++ b/docs/pages/eas/observe/index.mdx
@@ -1,5 +1,5 @@
---
-title: Expo Observe
+title: EAS Observe
---
import Redirect from '~/components/plugins/Redirect';
diff --git a/docs/pages/eas/observe/integrations/expo-router.mdx b/docs/pages/eas/observe/integrations/expo-router.mdx
new file mode 100644
index 00000000000000..103c9b24bb3623
--- /dev/null
+++ b/docs/pages/eas/observe/integrations/expo-router.mdx
@@ -0,0 +1,121 @@
+---
+title: Expo Router integration
+sidebar_title: Expo Router
+description: Track per-route render and interactive timings by enabling the Expo Router integration for EAS Observe.
+---
+
+import { Prerequisites, Requirement } from '~/ui/components/Prerequisites';
+import { Step } from '~/ui/components/Step';
+
+EAS Observe ships an opt-in integration for [Expo Router](/router/introduction/) that collects per-route metrics tagged with the route pattern (for example, `/(tabs)/sessions/[sessionId]`). This lets you compare navigation performance by route in the dashboard instead of looking only at app-wide aggregates.
+
+## Prerequisites
+
+
+
+ The Expo Router integration is available on SDK 56 and later. On earlier SDKs, `expo-observe`
+ still tracks app-wide metrics, but per-route navigation events are not emitted.
+
+
+ Follow [Get started](/eas/observe/get-started/) to install `expo-observe` and create your first
+ build.
+
+
+ The integration depends on `expo-router` at runtime. If the package is not installed, the
+ integration becomes a silent no-op.
+
+
+
+
+
+## Enable the integration
+
+> **warning** The integration must be enabled before mount and cannot be toggled at runtime. Calling `configure()` after the app has mounted, or toggling the flag mid-session, throws an error.
+
+Call `ExpoObserve.configure()` with the `expo-router` integration flag at module scope, before any screen mounts:
+
+```tsx src/app/_layout.tsx
+import ExpoObserve from 'expo-observe';
+
+ExpoObserve.configure({
+ integrations: { 'expo-router': true },
+});
+```
+
+
+
+
+
+## Call `useObserve()` in your screens
+
+Use the `useObserve()` hook to get a `markInteractive` that is automatically scoped to the current route. The emitted event is tagged with the screen's route pattern.
+
+```tsx src/app/(tabs)/index.tsx
+import { useObserve } from 'expo-observe';
+import { useEffect } from 'react';
+
+export default function Home() {
+ const { markInteractive } = useObserve();
+
+ useEffect(() => {
+ markInteractive();
+ }, [markInteractive]);
+
+ return (/* your screen content */);
+}
+```
+
+> **info** If the integration is disabled or `expo-router` is not installed, `useObserve()` falls back to the global `AppMetrics.markInteractive`. You can leave the hook in place regardless of integration state.
+
+
+
+## Metrics
+
+### Per-route first render (`cold_ttr`)
+
+**What it measures:** Time from when a navigation action is dispatched (for example, a link click) to when the destination screen first becomes focused. For the very first focus after app launch, the measurement is taken from when the JS bundle is loaded, and the event includes `isAppLaunch: true`.
+
+Emitted at most once per screen instance within a session.
+
+**Event params:**
+
+| Param | Type | Description |
+| ------------- | --------- | ------------------------------------------------------------------------------ |
+| `routeName` | `string` | Route pattern, for example `/(tabs)/sessions/[sessionId]`. |
+| `url` | `string` | Resolved pathname for the navigation. |
+| `routeParams` | `object` | Resolved route params (for example, `{ sessionId: 'abc' }`). |
+| `isAppLaunch` | `boolean` | `true` when measured against process start, `false` for subsequent navigation. |
+
+### Per-route warm render (`warm_ttr`)
+
+**What it measures:** Same as `cold_ttr`, but for screens that were already rendered before focus, typically because they were preloaded via [``](/router/basics/navigation/#prefetching) or the user navigated back to them.
+
+**Event params:**
+
+| Param | Type | Description |
+| ------------- | -------- | ------------------------------------------------------------ |
+| `routeName` | `string` | Route pattern, for example `/(tabs)/sessions/[sessionId]`. |
+| `url` | `string` | Resolved pathname for the navigation. |
+| `routeParams` | `object` | Resolved route params (for example, `{ sessionId: 'abc' }`). |
+
+### Per-route time to interactive (`tti`)
+
+**What it measures:** Time from when a navigation action is dispatched to when `markInteractive()` is called on the destination screen. Only the first call per navigation is recorded, so it is safe to call `markInteractive()` multiple times.
+
+**Event params:**
+
+| Param | Type | Description |
+| ------------- | -------- | -------------------------------------------------------------------- |
+| `routeName` | `string` | Route pattern, for example `/(tabs)/sessions/[sessionId]`. |
+| `url` | `string` | Resolved pathname. |
+| `routeParams` | `object` | Resolved route params. |
+| `...` | `any` | Any custom params passed via `markInteractive({ params: { ... } })`. |
+
+## Notes and troubleshooting
+
+- `routeName` is a pattern (`/(tabs)/sessions/[sessionId]`), not a resolved URL (`/sessions/abc`). This keeps metrics stable across distinct param values so the dashboard buckets them together. Resolved values are still available on the event via `url` and `routeParams`.
+- Calls to `router.prefetch()` do not count as a user navigation and never seed a `cold_ttr` or `warm_ttr` measurement. The next user-driven navigation to that route emits `warm_ttr` because the screen has already rendered.
+- The integration only activates if `expo-router` is installed at runtime. If it is not installed, `useObserve()` and `ObserveRoot` continue to work but no per-route navigation metrics are emitted.
+- The integration must be enabled before mount via `ExpoObserve.configure({ integrations: { 'expo-router': true } })`. Toggling it after the app has mounted throws.
+- If `markInteractive()` logs `Calling markInteractive on unmounted screen` or `No metadata available for the current screen`, the call ran outside a screen component or after unmount. Move the call into a `useEffect` inside the screen component.
+- For general issues with EAS Observe, see [Troubleshooting](/eas/observe/reference/troubleshooting/).
diff --git a/docs/pages/eas/observe/introduction.mdx b/docs/pages/eas/observe/introduction.mdx
index eedc10812b2211..31d5928035d9f8 100644
--- a/docs/pages/eas/observe/introduction.mdx
+++ b/docs/pages/eas/observe/introduction.mdx
@@ -1,7 +1,7 @@
---
-title: Introduction to Expo Observe
+title: Introduction to EAS Observe
sidebar_title: Introduction
-description: Expo Observe is a performance monitoring service that tracks how your app performs in production across real devices and conditions.
+description: EAS Observe is a performance monitoring service that tracks how your app performs in production across real devices and conditions.
searchRank: 10
---
@@ -13,11 +13,11 @@ import { NoIcon, YesIcon } from '~/ui/components/DocIcons';
import { FAQ } from '~/ui/components/FAQ';
import { Terminal } from '~/ui/components/Snippet';
-> **important** **Expo Observe** is in [Private Preview](/more/release-statuses/#preview) and subject to breaking changes. Access is granted on request ([request here](https://expo.dev/changelog/introducing-expo-observe)). While in preview, it is free to use.
+> **important** **EAS Observe** is in [Private Preview](/more/release-statuses/#preview) and subject to breaking changes. Access is granted on request ([request here](https://expo.dev/changelog/introducing-expo-observe)). While in preview, it is free to use.
-**Expo Observe** is a performance monitoring service from Expo for tracking how your app performs in production. It gives you visibility into real-world startup times, rendering performance, and user experience across different devices, networks, and conditions.
+**EAS Observe** is a performance monitoring service from Expo for tracking how your app performs in production. It gives you visibility into real-world startup times, rendering performance, and user experience across different devices, networks, and conditions.
-Debugging performance in React Native has traditionally been limited to development tools. Expo Observe focuses on production, where performance characteristics differ significantly from what you see during development.
+Debugging performance in React Native has traditionally been limited to development tools. EAS Observe focuses on production, where performance characteristics differ significantly from what you see during development.
## Quick start
@@ -25,16 +25,16 @@ Debugging performance in React Native has traditionally been limited to developm
Wrap your root layout with the `AppMetricsRoot` component (SDK 55) or the `ObserveRoot` component (SDK 56 and later) and call `markInteractive()` when your app is ready for user input. See [Get started](/eas/observe/get-started/) for the full setup guide.
-## Why Expo Observe
+## Why EAS Observe
-Traditional development-time profiling tools show how your app performs on your machine. Expo Observe shows how it performs for real users:
+Traditional development-time profiling tools show how your app performs on your machine. EAS Observe shows how it performs for real users:
- **Production performance data**: Track startup times, render performance, and bundle load times from real user sessions across a range of devices
- **Release comparison**: See how metrics change between app versions and OTA updates to catch regressions early
- **Session investigation**: Drill into individual user sessions to understand why certain devices or conditions lead to slower performance
- **CLI and dashboard access**: Query metrics from the terminal with `eas observe:` commands or view them in the EAS dashboard
-## When to use Expo Observe
+## When to use EAS Observe
| Scenario | Recommendation |
| --------------------------------------------------- | -------------- |
@@ -48,27 +48,27 @@ Traditional development-time profiling tools show how your app performs on your
**Development-time profiling and debugging**: Use [React Native DevTools](/debugging/tools/#debugging-with-react-native-devtools) for debugging and [Expo Atlas](/guides/analyzing-bundles/) for bundle inspection.
-**Crash reporting and error tracking**: This is a planned addition for Observe in the future. In the interim we suggest a crash reporting service such as [Sentry](/guides/using-sentry/) or [BugSnag](/guides/using-bugsnag/).
+**Crash reporting and error tracking**: This is a planned addition for EAS Observe in the future. In the interim we suggest a crash reporting service such as [Sentry](/guides/using-sentry/) or [BugSnag](/guides/using-bugsnag/).
-**Custom analytics and event tracking**: This is a planned addition for Observe in the future. In the interim, choose an analytics provider from the [React Native analytics guide](/guides/using-analytics/), for example PostHog, Amplitude, or Firebase Analytics.
+**Custom analytics and event tracking**: This is a planned addition for EAS Observe in the future. In the interim, choose an analytics provider from the [React Native analytics guide](/guides/using-analytics/), for example PostHog, Amplitude, or Firebase Analytics.
## Frequently asked questions (FAQ)
-
+
-Expo Observe focuses on startup metrics: cold launch time, warm launch time, time to first render, time to interactive, and bundle load time. See the [Metrics reference](/eas/observe/reference/metrics/) for detailed descriptions of each metric.
+EAS Observe focuses on startup metrics: cold launch time, warm launch time, time to first render, time to interactive, and bundle load time. See the [Metrics reference](/eas/observe/reference/metrics/) for detailed descriptions of each metric.
-Expo Observe supports Android and iOS. Metrics are collected from production builds and can be filtered by platform in both the dashboard and CLI.
+EAS Observe supports Android and iOS. Metrics are collected from production builds and can be filtered by platform in both the dashboard and CLI.
-
+
No. Users are identified by an anonymous ID that is unique per app installation. This ID is not personally identifiable and is reset if the user uninstalls and reinstalls the app. See [Metrics reference: User](/eas/observe/reference/metrics/#user) for more details.
@@ -97,14 +97,14 @@ Metric data is retained for a minimum of 60 days.
## Get started
You'll need to create a project with the following command:
-
diff --git a/docs/pages/eas/workflows/pre-packaged-jobs.mdx b/docs/pages/eas/workflows/pre-packaged-jobs.mdx
index 0f46b3af22dce8..799d9eb67b4d8f 100644
--- a/docs/pages/eas/workflows/pre-packaged-jobs.mdx
+++ b/docs/pages/eas/workflows/pre-packaged-jobs.mdx
@@ -521,6 +521,9 @@ jobs:
params:
build_id: string # required
profile: string # optional - default: production
+ hooks:
+ before_submit: step[] # optional - steps to run before the submission starts.
+ after_submit: step[] # optional - steps to run after the submission completes.
```
#### Parameters
@@ -542,6 +545,15 @@ You can reference the following outputs in subsequent jobs:
| ios_bundle_identifier | string | The iOS bundle identifier of the submitted build. |
| android_package_id | string | The Android package ID of the submitted build. |
+#### Hooks
+
+The following hooks are supported for the Submit job:
+
+- `before_submit`: steps to run before the submission starts.
+- `after_submit`: steps to run after the submission completes.
+
+See [`jobs..hooks`](/eas/workflows/syntax/#jobsjob_idhooks) for the general hooks syntax.
+
### Examples
Here are some practical examples of using the submit job:
@@ -839,7 +851,7 @@ jobs:
## Maestro
-Run Maestro tests on a Android emulator or iOS Simulator build.
+Run Maestro tests on an Android Emulator or iOS Simulator build.
> **important** Maestro tests are in [alpha](/more/release-statuses/#alpha).
@@ -862,8 +874,11 @@ jobs:
exclude_tags: string | string[] # optional
maestro_version: string # optional - defaults to latest
android_system_image_package: string # optional
- device_identifier: string | { android: string, ios: string } # optional
+ device_identifier: string | { android?: string, ios?: string } # optional
output_format: string # optional - defaults to junit
+ hooks:
+ before_maestro_tests: step[] # optional - steps to run before the tests start.
+ after_maestro_tests: step[] # optional - steps to run after the tests complete.
```
#### Parameters
@@ -886,6 +901,15 @@ You can pass the following parameters into the `params` list:
| device_identifier | string or `{ android?: string, ios?: string }` object | Optional. Device identifier to use for the tests. You can also use a single-value expression like `pixel_6`, `iPhone 16 Plus` or `${{ needs.build.outputs.platform == "android" ? "pixel_6" : "iPhone 16 Plus" }}` and an object like `device_identifier: { android: "pixel_6", ios: "iPhone 16 Plus" }`. Note that iOS devices availability differs across runner images. A list of available devices can be found in the jobs logs. |
| skip_build_check | boolean | Optional. Skip validation of the build (whether an iOS build is a simulator build). Defaults to false. |
+#### Hooks
+
+The following hooks are supported for the Maestro job:
+
+- `before_maestro_tests`: steps to run before the tests start.
+- `after_maestro_tests`: steps to run after the tests complete.
+
+See [`jobs..hooks`](/eas/workflows/syntax/#jobsjob_idhooks) for the general hooks syntax.
+
### Examples
Here are some practical examples of using the Maestro job:
@@ -911,7 +935,7 @@ jobs:
-This workflow runs Maestro tests on an Android emulator build with 3 shards and 2 retries for failed tests.
+This workflow runs Maestro tests on an Android Emulator build with 3 shards and 2 retries for failed tests.
```yaml .eas/workflows/maestro-sharded.yml
name: Sharded Maestro Test
@@ -950,9 +974,32 @@ jobs:
+
+
+This workflow uses a hook to generate the `maestro_tests` directory right before Maestro starts running tests.
+
+```yaml .eas/workflows/maestro-hooks.yml
+name: Maestro Hooks
+
+jobs:
+ test:
+ name: Run Maestro Tests
+ type: maestro
+ environment: preview
+ params:
+ build_id: ${{ needs.build_ios_simulator.outputs.build_id }}
+ flow_path: ./maestro_tests
+ hooks:
+ before_maestro_tests:
+ - name: Generate Maestro flows
+ run: npx tsx scripts/generate-maestro-tests.ts
+```
+
+
+
-This workflow runs Maestro tests on an Android emulator build with a specific device and records the screen.
+This workflow runs Maestro tests on an Android Emulator build with a specific device and records the screen.
```yaml .eas/workflows/maestro-sharded.yml
name: Pixel E2E Test
@@ -992,6 +1039,32 @@ The assets will be available within the "Maestro Test Results" artifact in the A
+
+
+This workflow saves screenshots and recordings to `MAESTRO_TESTS_DIR`, then runs a script after the tests finish to upload those files or send a summary to Slack.
+
+```yaml .eas/workflows/maestro-report-artifacts.yml
+name: Maestro Artifact Reporting
+
+jobs:
+ test:
+ name: Run Maestro Tests
+ type: maestro
+ environment: preview
+ env:
+ SLACK_WEBHOOK_URL: ${{ env.SLACK_WEBHOOK_URL }}
+ params:
+ build_id: ${{ needs.build_ios_simulator.outputs.build_id }}
+ flow_path: ./maestro/flows
+ record_screen: true
+ hooks:
+ after_maestro_tests:
+ - name: Report Maestro artifacts
+ run: npx tsx scripts/report-maestro-artifacts.ts "$MAESTRO_TESTS_DIR"
+```
+
+
+
## Maestro Cloud
Run Maestro tests on Maestro Cloud.
@@ -1021,6 +1094,9 @@ jobs:
name: string # optional - name for the Maestro Cloud upload. Corresponds to `--name` param to `maestro cloud`.
branch: string # optional - override for the branch the Maestro Cloud upload originated from. By default, if the workflow run has been triggered from GitHub, the branch of the workflow run will be used. Corresponds to `--branch` param to `maestro cloud`.
async: boolean # optional - run the Maestro Cloud tests asynchronously. If true, the status of the job will only denote whether the upload was successful, _not_ whether the tests succeeded. Corresponds to `--async` param to `maestro cloud`.
+ hooks:
+ before_maestro_cloud: step[] # optional - steps to run before the Maestro Cloud upload.
+ after_maestro_cloud: step[] # optional - steps to run after the Maestro Cloud upload.
```
#### Parameters
@@ -1046,6 +1122,15 @@ You can pass the following parameters into the `params` list:
> **important** You need to either set `maestro_api_key` parameter or `MAESTRO_CLOUD_API_KEY` environment variable in the job environment. Go to "Settings" on [Maestro Cloud](https://app.maestro.dev/) to generate an API key and then to [Environment variables](https://expo.dev/accounts/[account]/projects/[project]/environment-variables) to add it to your project.
+#### Hooks
+
+The following hooks are supported for the Maestro Cloud job:
+
+- `before_maestro_cloud`: steps to run before the Maestro Cloud upload.
+- `after_maestro_cloud`: steps to run after the Maestro Cloud upload.
+
+See [`jobs..hooks`](/eas/workflows/syntax/#jobsjob_idhooks) for the general hooks syntax.
+
#### Outputs
You can reference the following outputs in subsequent jobs:
@@ -1061,9 +1146,11 @@ You can reference the following outputs in subsequent jobs:
> **Note:** When using `async: true` mode, only the `maestro_cloud_url` output is guaranteed to be valid. Other outputs (flow counts and flow names) may be invalid or empty because the job does not wait for the upload to complete and the flows have not been executed yet.
+You can also define additional outputs for this job using [`jobs..outputs`](/eas/workflows/syntax/#jobsjob_idoutputs).
+
### Examples
-Here are some practical examples of using the Maestro job:
+Here are some practical examples of using the Maestro Cloud job:
diff --git a/docs/pages/eas/workflows/syntax.mdx b/docs/pages/eas/workflows/syntax.mdx
index 793a77c797917c..fe2e0d5b78cbfe 100644
--- a/docs/pages/eas/workflows/syntax.mdx
+++ b/docs/pages/eas/workflows/syntax.mdx
@@ -441,6 +441,25 @@ jobs:
# @end #
```
+### `jobs..hooks`
+
+Some pre-packaged jobs support hooks to run additional steps before or after the main job action (for example, `maestro-cloud`, `maestro`, and `submit`). Hook names are job-specific. See the job's documentation for the available hook keys.
+
+```yaml
+jobs:
+ maestro_test:
+ type: maestro-cloud
+ params:
+ build_id: ${{ needs.build.outputs.build_id }}
+ maestro_project_id: proj_xyz
+ flows: ./maestro/flows
+ hooks:
+ before_maestro_cloud:
+ - run: echo "Before upload"
+ after_maestro_cloud:
+ - run: echo "After upload"
+```
+
### `jobs..defaults.run.working_directory`
Sets the directory to run commands in for all steps in the job.
@@ -1153,6 +1172,9 @@ jobs:
build_id: string # required
profile: string # optional, default: production
groups: string[] # optional
+ hooks:
+ before_submit: step[] # optional
+ after_submit: step[] # optional
```
This job outputs the following properties:
@@ -1246,9 +1268,12 @@ jobs:
include_tags: string | string[] # optional. Tags to include in the tests. Will be passed to Maestro as `--include-tags`.
exclude_tags: string | string[] # optional. Tags to exclude from the tests. Will be passed to Maestro as `--exclude-tags`.
maestro_version: string # optional. Version of Maestro to use for the tests. If not provided, the latest version will be used.
- android_system_image_package: string # optional. Android emulator system image package to use.
+ android_system_image_package: string # optional. Android Emulator system image package to use.
device_identifier: string | { android?: string, ios?: string } # optional. Device identifier to use for the tests.
output_format?: string # optional, defaults to junit. Maestro test report format. Will be passed to Maestro as `--format`. Can be `junit` or other supported formats.
+ hooks:
+ before_maestro_tests: step[] # optional
+ after_maestro_tests: step[] # optional
```
#### `maestro-cloud`
@@ -1280,6 +1305,9 @@ jobs:
name: string # optional. Name for the Maestro Cloud upload. Corresponds to `--name` param to `maestro cloud`.
branch: string # optional. Override for the branch the Maestro Cloud upload originated from. By default, if the workflow run has been triggered from GitHub, the branch of the workflow run will be used. Corresponds to `--branch` param to `maestro cloud`.
async: boolean # optional. Run the Maestro Cloud tests asynchronously. If true, the status of the job will only denote whether the upload was successful, *not* whether the tests succeeded. Corresponds to `--async` param to `maestro cloud`.
+ hooks:
+ before_maestro_cloud: step[] # optional. Steps to run before the Maestro Cloud upload.
+ after_maestro_cloud: step[] # optional. Steps to run after the Maestro Cloud upload.
```
#### `slack`
diff --git a/docs/pages/get-started/create-a-project.mdx b/docs/pages/get-started/create-a-project.mdx
index 54bd32e772ff71..1a24c654a32f73 100644
--- a/docs/pages/get-started/create-a-project.mdx
+++ b/docs/pages/get-started/create-a-project.mdx
@@ -19,9 +19,9 @@ We recommend starting with the default project created by `create-expo-app`. The
To create a new project, run the following command:
-
-Assert the current screen's pathname that matches a value. Compares using the value of [`useGlobalSearchParams`](/versions/latest/sdk/router/#useglobalsearchparams) hook.
-
Assert the current global URL parameters against an object. The matcher uses the value of the [`useGlobalSearchParams`](/versions/latest/sdk/router/#useglobalsearchparams) hook on the current `screen`.
```tsx app.test.tsx
diff --git a/docs/pages/router/web/data-loaders.mdx b/docs/pages/router/web/data-loaders.mdx
index abe16b6bc719cc..b6631fa5434800 100644
--- a/docs/pages/router/web/data-loaders.mdx
+++ b/docs/pages/router/web/data-loaders.mdx
@@ -335,7 +335,7 @@ With server rendering, loaders execute on every request. This means:
### `createStaticLoader`
-Use [`createStaticLoader`](/versions/unversioned/sdk/server/#createstaticloaderfn) for routes that only need route parameters. The callback only receives the route params, and is safe to use with both static and server rendering:
+Use [`createStaticLoader`](/versions/latest/sdk/server/#createstaticloaderfn) for routes that only need route parameters. The callback only receives the route params, and is safe to use with both static and server rendering:
```tsx src/app/posts/[postId].tsx
import { Text, View } from 'react-native';
@@ -360,7 +360,7 @@ export default function Post() {
### `createServerLoader`
-Use [`createServerLoader`](/versions/unversioned/sdk/server/#createserverloaderfn) for routes that need access to the incoming HTTP request. The callback receives an [`ImmutableRequest`](/versions/latest/sdk/server/#immutablerequest) and the route params as arguments:
+Use [`createServerLoader`](/versions/latest/sdk/server/#createserverloaderfn) for routes that need access to the incoming HTTP request. The callback receives an [`ImmutableRequest`](/versions/latest/sdk/server/#immutablerequest) and the route params as arguments:
```tsx src/app/profile.tsx
import { Text, View } from 'react-native';
diff --git a/docs/pages/router/web/server-rendering.mdx b/docs/pages/router/web/server-rendering.mdx
index 981d9aa86bf513..ae830add40ef63 100644
--- a/docs/pages/router/web/server-rendering.mdx
+++ b/docs/pages/router/web/server-rendering.mdx
@@ -106,14 +106,14 @@ In the above example, when the app user visits `/blog/my-post`, the page is rend
You can customize the root HTML document by creating a **src/app/+html.tsx** file. This component wraps all routes and runs only on the server.
-The [`useServerDocumentContext`](/versions/unversioned/sdk/router/#useserverdocumentcontext) hook from `expo-router/html` provides metadata and asset nodes that the server renderer injects into the document. You must spread these values into your HTML to ensure metadata, fonts, and CSS are included in the response:
+The [`useServerDocumentContext`](/versions/latest/sdk/router/#useserverdocumentcontext) hook from `expo-router/html` provides metadata and asset nodes that the server renderer injects into the document. You must spread these values into your HTML to ensure metadata, fonts, and CSS are included in the response:
- `htmlAttributes`: attributes to add to the `` element
- `bodyAttributes`: attributes to add to the `` element
- `headNodes`: React nodes for the `` element (metadata, CSS, and other assets)
- `bodyNodes`: React nodes for the `` element (fonts and other deferred assets)
-> **info** When creating a custom **+html.tsx** template, you must use all properties returned to you by [`useServerDocumentContext`](/versions/unversioned/sdk/router/#useserverdocumentcontext). Otherwise, your server-side rendered HTML may appear broken or your app may not function correctly.
+> **info** When creating a custom **+html.tsx** template, you must use all properties returned to you by [`useServerDocumentContext`](/versions/latest/sdk/router/#useserverdocumentcontext). Otherwise, your server-side rendered HTML may appear broken or your app may not function correctly.
```tsx src/app/+html.tsx
import { ScrollViewStyleReset, useServerDocumentContext } from 'expo-router/html';
@@ -155,7 +155,7 @@ export default function Root({ children }: { children: ReactNode }) {
The **+html.tsx** file is only used by the server renderer and never by client code. This means:
- It will be run by `expo-server` during server rendering
-- It is not rehydrated on the client, and should only use [`useServerDocumentContext`](/versions/unversioned/sdk/router/#useserverdocumentcontext) React hook
+- It is not rehydrated on the client, and should only use [`useServerDocumentContext`](/versions/latest/sdk/router/#useserverdocumentcontext) React hook
- You may not import global CSS in `+html.tsx` (use the [Root Layout](/router/basics/navigation-layouts/#root-layout) for styles)
- You may not call browser APIs like `window` or `document` in your `+html.tsx`
@@ -163,9 +163,9 @@ All `+html.tsx` components are expected to render the `children` prop they recei
## Metadata
-Routes may export a [`generateMetadata`](/versions/unversioned/sdk/server/#generatemetadatafunctionrequest-params) function to define per-page metadata such as title, description, and [Open Graph](https://ogp.me/) tags. This function runs on the server before rendering begins, and its result is injected into the `` of the HTML document via the `headNodes` provided by [`useServerDocumentContext`](/versions/unversioned/sdk/router/#useserverdocumentcontext) in your [Root HTML](#root-html) component.
+Routes may export a [`generateMetadata`](/versions/latest/sdk/server/#generatemetadatafunctionrequest-params) function to define per-page metadata such as title, description, and [Open Graph](https://ogp.me/) tags. This function runs on the server before rendering begins, and its result is injected into the `` of the HTML document via the `headNodes` provided by [`useServerDocumentContext`](/versions/latest/sdk/router/#useserverdocumentcontext) in your [Root HTML](#root-html) component.
-Export a [`generateMetadata`](/versions/unversioned/sdk/server/#generatemetadatafunctionrequest-params) function from your route file and return a [`Metadata`](/versions/unversioned/sdk/server/#metadata) object. The function receives the incoming request and route parameters, which you can use to generate metadata dynamically:
+Export a [`generateMetadata`](/versions/latest/sdk/server/#generatemetadatafunctionrequest-params) function from your route file and return a [`Metadata`](/versions/latest/sdk/server/#metadata) object. The function receives the incoming request and route parameters, which you can use to generate metadata dynamically:
```tsx src/app/blog/[id].tsx
import { Text } from 'react-native';
@@ -193,7 +193,7 @@ export default function BlogPost() {
}
```
-The `generateMetadata` function executes on the server and is stripped from the client bundle, similar to [data loaders](/router/web/data-loaders). For a full list of supported metadata fields, see the [`Metadata`](/versions/unversioned/sdk/server/#metadata) type in the `expo-server` API reference.
+The `generateMetadata` function executes on the server and is stripped from the client bundle, similar to [data loaders](/router/web/data-loaders). For a full list of supported metadata fields, see the [`Metadata`](/versions/latest/sdk/server/#metadata) type in the `expo-server` API reference.
### Using `` with server rendering
diff --git a/docs/pages/troubleshooting/overview.mdx b/docs/pages/troubleshooting/overview.mdx
index 8a4eb0cc680196..cc618e027a9651 100644
--- a/docs/pages/troubleshooting/overview.mdx
+++ b/docs/pages/troubleshooting/overview.mdx
@@ -158,8 +158,8 @@ This page lists a collection of various troubleshooting guides for Expo and EAS.
/>
- Hello World
-
-
- );
-}
-```
-
-You can also import stylesheets that are vendored in libraries, just like you would any node module:
-
-```js index.js
-// Applies the styles app-wide.
-import 'emoji-mart/css/emoji-mart.css';
-```
-
-- On native, all global stylesheets are automatically ignored.
-- Hot reloading is supported for global stylesheets, simply save the file and the changes will be applied.
-
-### CSS Modules
-
-> **warning** CSS Modules for native are under development and currently only work on web.
-
-CSS Modules are a way to scope CSS to a specific component. This is useful for avoiding naming collisions and for ensuring that styles are only applied to the intended component.
-
-In Expo, CSS Modules are defined by creating a file with the `.module.css` extension. The file can be imported from any component. The exported value is an object with the class names as keys and the web-only scoped names as the values. The import `unstable_styles` can be used to access `react-native-web`-safe styles.
-
-CSS Modules support platform extensions to allow you to define different styles for different platforms. For example, you can define a `module.ios.css` and `module.android.css` file to define styles for Android and iOS respectively. You'll need to import without the extension, for example:
-
-
- Hello World
-
- Hello World
- {/* Web-only usage: */}
-
-
-//# debugId=
-```
-
-The associated `*.js.map` or `*.hbc.map` source map will be a JSON file containing an equivalent `debugId` property. The `debugId` will be injected before hermes bytecode generation to ensure matching in all cases.
-
-The `debugId` is a deterministic hash of the bundle's contents without the external bundle splitting references. This is the same value used to create a chunks filename but formatted as a UUID. For example, `431b98e2-c997-4975-a3d9-2987710abd44`.
-
-`@expo/metro-config` injects `debugId` during `npx expo export` and `npx expo export:embed`. Any additional optimization steps in `npx expo export:embed` like Hermes bytecode generation will need to have the `debugId` injected manually.
-
-## Metro require runtime
-
-You can optionally enable a custom Metro `require` implementation with the environment variable `EXPO_USE_METRO_REQUIRE=1`. This runtime has the following features:
-
-- String module IDs that are human-readable and make missing module errors easier to follow.
-- Deterministic IDs that are the same between runs and across modules (required for React Server Components in development).
-- Removed support for legacy RAM bundles.
-
-## Magic import comments
-
-> Available from SDK 52 on all platforms.
-
-Server environments such as Workers, and Node.js support import arbitrary files at runtime, so you may want to keep `import` syntax in-tact instead of using Metro's require system. You can opt-out dynamic imports with the `/* @metro-ignore */` comment in `import()` statements.
-
-```js
-// Manually ensure `./my-module.js` is included in the correct spot relative to the module.
-const myModule = await import(/* @metro-ignore */ './my-module.js');
-```
-
-Expo CLI will skip the `./my-module.js` dependency and assume that the developer has manually added it to the output bundle. Internally, this is used for exporting custom server code that dynamically switches between files based on the request. Avoid using this syntax for native bundles since `import()` is generally not available in React Native with Hermes enabled.
-
-Many React libraries shipped the Webpack `/* webpackIgnore: true */` comment to achieve similar behavior. To bridge the gap, we've also added support for Webpack's comment but recommend using the Metro equivalent in your app.
-
-## ES Module resolution
-
-> This sections applies from SDK 53 on all platforms.
-
-Metro resolves ES Module `import` and CommonJS `require` with separate resolution strategies.
-
-Previously, Metro applied the classic Node.js module resolution strategy (which matches Node.js versions before v12), with some additions to support ES Modules. In this resolution strategy, Metro resolves modules from `node_modules`, JS files, optionally while omitting extensions, such as `.js`, and uses `package.json` fields such as `main`, `module`, and `react-native`.
-
-Now, with the modern ES Modules resolution strategy, Metro instead resolves modules from `node_modules`, then matches different `package.json` fields, such as `exports`, [a nested map of sub-paths a package exposes](https://nodejs.org/api/packages.html#conditional-exports), and `main`.
-
-Depending on how a package is imported, one of these two resolution strategies will be used. Typically, a file that is imported with `import` from a Node module (rather than `require`), will use the ES Modules resolution strategy, and fall back on regular classic Node.js resolution. A file that wasn't resolved with ES Modules resolution or has been imported with CommonJS `require` will use the classic resolution strategy.
-
-### `package.json:exports`
-
-When performing ES Modules resolution, Metro will look at the `package.json:exports` conditions map. This is a mapping of import subpaths and conditions to files in the Node module package.
-
-For example, a package that always exposes an **index.js** file, and matches Metro's classic CommonJS module resolution, may specify a map with the `default` condition.
-
-```json
-{
- "exports": {
- "default": "./index.js"
- }
-}
-```
-
-However, a package providing both a CommonJS and ES Modules entrypoint may provide a mapping with the `import` and `require` conditions.
-
-```json
-{
- "exports": {
- "import": "./index.mjs",
- "require": "./index.cjs"
- }
-}
-```
-
-By default, Metro will match different conditions depending on the platform and whether the resolution has started from a CommonJS `require` call, or an ES Modules `import` statement and will change the condition accordingly.
-
-For native platforms, the condition `react-native` is added, for web exports, the `browser` condition is added, and for server exports (such as API routes or React Server functions), the `node`, `react-server`, and `workerd` conditions are added. These conditions aren't matched in the order they're defined in. Instead, they're matched against the order of properties in the `package.json:exports` map.
-
-TypeScript performs ES Module resolution separately from Metro and will also respect `package.json:exports` maps, when its `compilerOptions.moduleResolution` configuration option has either been set to `"bundler"` (which matches Metro's behavior more closely) or to `"node16"` / `"nodenext"`. TypeScript will however also match the `types` condition. As such, types may not resolve properly when a package doesn't put the `types` condition first in its exports map.
-
-Since an exports map may contain subpaths, a package import may not have to match a file in the package's modules folder any longer, but may be a "redirected" import. Importing `'package/submodule'` may match a different file than **node_modules/package/submodule.js** if it's specified in `package.json:exports`.
-
-```json
-{
- "exports": {
- ".": "./index.js",
- "./submodule": "./submodule/submodule.js"
- }
-}
-```
-
-If you're encountering packages that are incompatible or unprepared for the new ES Modules resolution strategy, you may be able to resolve problems by patching its `package.json` file and add or correct its `package.json:exports` conditions map. However, it's also possible to prevent Metro from using `package.json:exports` maps in its resolution by disabling the `unstable_enablePackageExports` option.
-
-```js metro.config.js
-const { getDefaultConfig } = require('expo/metro-config');
-
-/** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(__dirname);
-
-config.resolver.unstable_enablePackageExports = false;
-
-module.exports = config;
-```
-
-## Asset imports
-
-When assets are imported, a virtual module is created to represent the data required for importing the asset.
-
-On native platforms, an asset will be a numeric ID: `1`, `2`, `3`, and so on, which can be looked up using `require("@react-native/assets-registry/registry").getAssetByID()`. On web and server platforms, the asset will change depending on the file type. If the file is an image, then the asset will be `{ uri: string, width?: number, height?: number }`, otherwise the asset will be a `string` representing the remote URL for the asset.
-
-The assets can be used as follows:
-
-```jsx
-import { Image } from 'react-native';
-
-import asset from './img.png';
-
-function Demo() {
- return .xcodeproj/project.pbxproj`
-
-In your **ios/<Project>.xcodeproj/project.pbxproj** file, replace the following scripts:
-
-#### "Start Packager" script
-
-Remove the **"Start Packager"** script. The dev server must be started with `npx expo` before/after running the app.
-
-
-
-## `install.exclude`
-
-The following commands perform a version check for the libraries installed in a project and give a warning when a library's version is different from the version recommended by Expo:
-
-- `npx expo start` and `npx expo-doctor`
-- `npx expo install` (when installing a new version of that library or using `--check` or `--fix` options)
-
-By specifying the library under the `install.exclude` array in the **package.json** file, you can exclude it from the version checks:
-
-```json package.json
-{
- "expo": {
- "install": {
- "exclude": ["expo-updates", "expo-splash-screen"]
- }
- }
-}
-```
-
-
-
-
-
-## `autolinking`
-
-Allows configuring module resolution behavior by using `autolinking` property in **package.json**.
-
-For complete reference, see [Autolinking configuration](/modules/autolinking/#configuration).
-
-
-
-
-
-## `doctor`
-
-Allows configuring the behavior of the [`npx expo-doctor`](/develop/tools/#expo-doctor) command.
-
-
-
-### `reactNativeDirectoryCheck`
-
-By default, Expo Doctor validates your project's packages against the [React Native directory](https://reactnative.directory/). This check throws a warning with a list of packages that are not included in the React Native Directory.
-
-You can customize this check by adding the following configuration in your project's **package.json** file:
-
-```json package.json
-{
- "expo": {
- "doctor": {
- "reactNativeDirectoryCheck": {
- /* @info Use this option to disable/enable the check. */
- "enabled": true,
- /* @end */
- /* @info Use this option to exclude specific packages. */
- "exclude": ["/foo/", "bar"],
- /* @end */
- /* @info Use this option to disable/enable listing unknown packages. */
- "listUnknownPackages": true
- /* @end */
- }
- }
- }
-}
-```
-
-By default, the check is enabled and unknown packages are listed.
-
-
-
-
-
-### `appConfigFieldsNotSyncedCheck`
-
-Expo Doctor checks if your project includes native project directories such as **android** or **ios**. If these directories exist but are not listed in your **.gitignore** or [**.easignore**](/build-reference/easignore) files, Expo Doctor verifies the presence of an app config file. If this file exists, it means your project is configured to use [Prebuild](/more/glossary-of-terms/#prebuild).
-
-When the **android** or **ios** directories are present, EAS Build does not sync app config properties to the native projects. Expo Doctor throws a warning if these conditions are true.
-
-You can disable or enable this check by adding the following configuration to your project's **package.json** file:
-
-```json package.json
-{
- "expo": {
- "doctor": {
- "appConfigFieldsNotSyncedCheck": {
- "enabled": false
- }
- }
- }
-}
-```
-
-
-
-
diff --git a/docs/pages/versions/v53.0.0/index.mdx b/docs/pages/versions/v53.0.0/index.mdx
deleted file mode 100644
index 0777391afeb226..00000000000000
--- a/docs/pages/versions/v53.0.0/index.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: Expo SDK reference
-description: Access device and system functionality in your Expo and React Native apps using Expo SDK packages.
-hideTOC: true
----
-
-import { BookOpen02Icon } from '@expo/styleguide-icons/outline/BookOpen02Icon';
-
-import { BoxLink } from '~/ui/components/BoxLink';
-import { Collapsible } from '~/ui/components/Collapsible';
-import RedirectNotification from '~/ui/components/RedirectNotification';
-import {
- AndroidIOSCompatibilityTable,
- ReactNativeCompatibilityTable,
-} from '~/ui/components/SDKTables';
-import { Terminal } from '~/ui/components/Snippet';
-import { CODE } from '~/ui/components/Text';
-
-
- The page you are looking for does not exist in this SDK version. It may have been deprecated or
- added to a newer SDK version.
-
-
-The Expo SDK is a collection of packages that provide access to device and system functionality such as camera, contacts, location, sensors, haptics, and more. Each package targets a specific feature and can be used independently. All packages work in any React Native app with the `expo` package installed.
-
-You can install any Expo SDK package using the [`npx expo install`](/more/expo-cli/#install) command. For example, three different packages are installed using the following command:
-
-
- Learn more about configuring projects created with{' '}
-
-
-- Expo SDK versions are released three times each year, and each Expo SDK release targets a single React Native version. This is typically the latest stable version at the time of the release.
-- The release cadence of React Native has varied over its history and it is currently on pace for six releases in 2025. While on this cadence, you can expect that there will be an Expo SDK version for every second React Native release.
-- Pre-release versions of the upcoming Expo SDK will include support for the latest version of React Native quickly, usually the same day it is released. A member of the Expo SDK team works on the React Native releases team for each release, and is responsible for continuously updating the React Native version in the Expo repository, verifying compatibility, and reporting regressions back to the team at Meta.
-
-
-
-
-
-At Expo, we have found that releasing three major version provides a good balance of stability and innovation for developers depending on our open source tools. Expo and Meta work closely together on releases, and we will keep improving our processes to get the latest Expo and React Native features to you as quickly as possible.
-
-
-
-
-We work closely with the team at Meta to ensure that any urgent fixes are included in the React Native version used by the latest Expo SDK. If your issue won't be cherrypicked into an existing release because it is more niche, or it involves a breaking change, then you have two options:
-
-1. Use [`patch-package`](https://github.com/ds300/patch-package) to pull in the fix.
-2. Use a [pre-release version of the Expo SDK](#using-pre-release-versions). An ([example](https://expo.dev/changelog/react-native-78)).
-
-
-
-
-
-Packages in the Expo SDK are intended to support the target React Native version for that SDK. Typically, they will not support older versions of React Native, but they may. When a new version of React Native is released, the latest versions of the Expo SDK packages are typically updated to support it. However, this may take weeks or more, depending on the extent of the changes in the release.
-
-
-
-## Support for Android and iOS versions
-
-Each version of Expo SDK supports a minimum OS version of Android and iOS. For Android, the `compileSdkVersion` is defined which tells the [Gradle](https://developer.android.com/studio/build) which Android SDK version to use to compile the app. This also means that you can use the Android API features included in that SDK version and from the previous versions. For iOS, the [Xcode](https://developer.apple.com/news/upcoming-requirements/) tells the minimum Xcode SDK version to use to compile the app.
-
-
-
-```jsx
-import { useState, useEffect } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { Accelerometer } from 'expo-sensors';
-
-export default function App() {
- const [{ x, y, z }, setData] = useState({
- x: 0,
- y: 0,
- z: 0,
- });
- const [subscription, setSubscription] = useState(null);
-
- const _slow = () => Accelerometer.setUpdateInterval(1000);
- const _fast = () => Accelerometer.setUpdateInterval(16);
-
- const _subscribe = () => {
- setSubscription(Accelerometer.addListener(setData));
- };
-
- const _unsubscribe = () => {
- subscription && subscription.remove();
- setSubscription(null);
- };
-
- useEffect(() => {
- _subscribe();
- return () => _unsubscribe();
- }, []);
-
- return (
-
- Accelerometer: (in gs where 1g = 9.81 m/s^2)
- x: {x}
- y: {y}
- z: {z}
-
-
- {subscription ? 'On' : 'Off'}
-
-
- Slow
-
-
- Fast
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- paddingHorizontal: 20,
- },
- text: {
- textAlign: 'center',
- },
- buttonContainer: {
- flexDirection: 'row',
- alignItems: 'stretch',
- marginTop: 15,
- },
- button: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#eee',
- padding: 10,
- },
- middleButton: {
- borderLeftWidth: 1,
- borderRightWidth: 1,
- borderColor: '#ccc',
- },
-});
-```
-
-
-
-## API
-
-```js
-import { Accelerometer } from 'expo-sensors';
-```
-
-
-
-Running [EAS Build](/build/introduction) locally will use [iOS capabilities signing](/build-reference/ios-capabilities) to enable the required capabilities before building.
-
-```json app.json
-{
- "expo": {
- "plugins": ["expo-apple-authentication"]
- }
-}
-```
-
-
-
-
-
-Apps that don't use [EAS Build](/build/introduction) must [manually configure](/build-reference/ios-capabilities#manual-setup) the **Apple Sign In** capability for their bundle identifier.
-
-If you enable the **Apple Sign In** capability through the [Apple Developer Console](/build-reference/ios-capabilities#apple-developer-console), then be sure to add the following entitlements in your **ios/[app]/[app].entitlements** file:
-
-```xml
-com.apple.developer.applesignin
-
- Default
-
-```
-
-Also, set `CFBundleAllowMixedLocalizations` to `true` in your **ios/[app]/Info.plist** to ensure the sign-in button uses the device locale.
-
-
-
-## Usage
-
-
-
-```jsx
-import * as AppleAuthentication from 'expo-apple-authentication';
-import { View, StyleSheet } from 'react-native';
-
-export default function App() {
- return (
-
- {
- try {
- const credential = await AppleAuthentication.signInAsync({
- requestedScopes: [
- AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
- AppleAuthentication.AppleAuthenticationScope.EMAIL,
- ],
- });
- // signed in
- } catch (e) {
- if (e.code === 'ERR_REQUEST_CANCELED') {
- // handle that the user canceled the sign-in flow
- } else {
- // handle other errors
- }
- }
- }}
- />
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- },
- button: {
- width: 200,
- height: 44,
- },
-});
-```
-
-
-
-## Development and testing
-
-You can test this library in Expo Go on iOS without following any of the instructions above.
-However, you'll need to add the config plugin to use this library if you are using EAS Build.
-When you sign into Expo Go, the identifiers and values you receive will likely be different than what you'll receive in standalone apps.
-
-You can do limited testing of this library on the iOS Simulator. However, not all methods will behave the same as on a device,
-so we highly recommend testing on a real device when possible while developing.
-
-## Verifying the Response from Apple
-
-Apple's response includes a signed JWT with information about the user. To ensure that the response came from Apple,
-you can cryptographically verify the signature with Apple's public key, which is published at https://appleid.apple.com/auth/keys.
-This process is not specific to Expo.
-
-## API
-
-```js
-import * as AppleAuthentication from 'expo-apple-authentication';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-asset",
- {
- "assets": ["path/to/file.png", "path/to/directory"]
- }
- ]
- ]
- }
-}
-```
-
-
-
- **Note**: To import an existing database file (`.db`), see instructions in [SQLite API reference](./sqlite/#import-an-existing-database). For other file types (such as `.lottie` or `.riv`), see [how to add a file extension to `assetExts` in metro config](/guides/customizing-metro/#adding-more-file-extensions-to-assetexts).',
- ].join('\n'),
- default: '[]',
- },
- ]}
-/>
-
-### Usage
-
-Learn more about how to use the `expo-asset` config plugin to embed an asset file in your project in [Load an asset at build time](/develop/user-interface/assets/#load-an-asset-at-build-time).
-
-## API
-
-```js
-import { Asset } from 'expo-asset';
-```
-
-
-
-```jsx
-import { useEffect, useState } from 'react';
-import { View, StyleSheet, Button } from 'react-native';
-import { Audio } from 'expo-av';
-
-export default function App() {
- const [sound, setSound] = useState();
-
- async function playSound() {
- console.log('Loading Sound');
- /* @info */ const { sound } = await Audio.Sound.createAsync(
- /* @end */ require('./assets/Hello.mp3')
- );
- setSound(sound);
-
- console.log('Playing Sound');
- await /* @info */ sound.playAsync(); /* @end */
- }
-
- useEffect(() => {
- return sound
- ? () => {
- console.log('Unloading Sound');
- /* @info Always unload the Sound after using it to prevent memory leaks.*/ sound.unloadAsync(); /* @end */
- }
- : undefined;
- }, [sound]);
-
- return (
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- backgroundColor: '#ecf0f1',
- padding: 10,
- },
-});
-```
-
-
-
-### Recording sounds
-
-
-
-```jsx
-import { useState } from 'react';
-import { View, StyleSheet, Button } from 'react-native';
-import { Audio } from 'expo-av';
-
-export default function App() {
- const [recording, setRecording] = useState();
- const [permissionResponse, requestPermission] = Audio.usePermissions();
-
- async function startRecording() {
- try {
- /* @info */ if (permissionResponse.status !== 'granted') {
- console.log('Requesting permission..');
- await requestPermission();
- }
- await Audio.setAudioModeAsync({
- allowsRecordingIOS: true,
- playsInSilentModeIOS: true,
- }); /* @end */
-
- console.log('Starting recording..');
- /* @info */ const { recording } = await Audio.Recording.createAsync(
- /* @end */ Audio.RecordingOptionsPresets.HIGH_QUALITY
- );
- setRecording(recording);
- console.log('Recording started');
- } catch (err) {
- console.error('Failed to start recording', err);
- }
- }
-
- async function stopRecording() {
- console.log('Stopping recording..');
- setRecording(undefined);
- /* @info */ await recording.stopAndUnloadAsync(); /* @end */
- /* @info iOS may reroute audio playback to the phone earpiece when recording is allowed, so disable once finished. */ await Audio.setAudioModeAsync(
- {
- allowsRecordingIOS: false,
- }
- ); /* @end */
- /* @info */ const uri = recording.getURI(); /* @end */
- console.log('Recording stopped and stored at', uri);
- }
-
- return (
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- backgroundColor: '#ecf0f1',
- padding: 10,
- },
-});
-```
-
-
-
-### Playing or recording audio in background
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-audio",
- {
- "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-```jsx
-import { View, StyleSheet, Button } from 'react-native';
-import { useAudioPlayer } from 'expo-audio';
-
-const audioSource = require('./assets/Hello.mp3');
-
-export default function App() {
- const player = useAudioPlayer(audioSource);
-
- return (
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- backgroundColor: '#ecf0f1',
- padding: 10,
- },
-});
-```
-
-
-
-> **Info** **Note:** If you're migrating from [`expo-av`](av.mdx), you'll notice that `expo-audio` doesn't automatically reset the playback position when audio finishes. After [`play()`](#play), the player stays paused at the end of the sound. To play it again, call [`seekTo(seconds)`](#seektoseconds) to reset the position — as shown in the example above.
-
-### Recording sounds
-
-
-
-```jsx
-import { useState, useEffect } from 'react';
-import { View, StyleSheet, Button } from 'react-native';
-import {
- useAudioRecorder,
- AudioModule,
- RecordingPresets,
- setAudioModeAsync,
- useAudioRecorderState,
-} from 'expo-audio';
-
-export default function App() {
- const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
- const recorderState = useAudioRecorderState(audioRecorder);
-
- const record = async () => {
- await audioRecorder.prepareToRecordAsync();
- audioRecorder.record();
- };
-
- const stopRecording = async () => {
- // The recording will be available on `audioRecorder.uri`.
- await audioRecorder.stop();
- };
-
- useEffect(() => {
- (async () => {
- const status = await AudioModule.requestRecordingPermissionsAsync();
- if (!status.granted) {
- Alert.alert('Permission to access microphone was denied');
- }
-
- setAudioModeAsync({
- playsInSilentMode: true,
- allowsRecording: true,
- });
- })();
- }, []);
-
- return (
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- backgroundColor: '#ecf0f1',
- padding: 10,
- },
-});
-```
-
-
-
-### Playing or recording audio in background
-
-To use this library, you need to set up deep linking in your app by setting up a `scheme`. Use the [`uri-scheme` CLI][n-uri-scheme] utility to easily add, remove, list, and open your URIs.
-
-For example, to make your native app handle `mycoolredirect://`, run:
-
-
-
-### Usage in standalone apps
-
-```json app.json
-{
- "expo": {
- "scheme": "mycoolredirect"
- }
-}
-```
-
-To be able to deep link back into your app, you will need to set a `scheme` in your project's app config, and then build your standalone app (it can't be updated with an update). If you do not include a scheme, the authentication flow will complete, but it will be unable to pass the information back into your application and the user will have to manually exit the authentication modal (resulting in a canceled event).
-
-## Guides
-
-> The guides have moved: [Authentication Guide](/guides/authentication/).
-
-## How web browser based authentication flows work
-
-The typical flow for browser-based authentication in mobile apps is as follows:
-
-- **Initiation**: the user presses a sign in button
-- **Open web browser**: the app opens up a web browser to the authentication provider sign in page. The url that is opened for the sign in page usually includes information to identify the app, and a URL to redirect to on success. _Note: the web browser should share cookies with your system web browser so that users do not need to sign in again if they are already authenticated on the system browser -- Expo's [WebBrowser](webbrowser.mdx) API takes care of this._
-- **Authentication provider redirects**: upon successful authentication, the authentication provider should redirect back to the application by redirecting to URL provided by the app in the query parameters on the sign in page ([read more about how linking works in mobile apps](/linking/overview/)), _provided that the URL is in the allowlist of allowed redirect URLs_. Allowlisting redirect URLs is important to prevent malicious actors from pretending to be your application. The redirect includes data in the URL (such as user id and token), either in the location hash, query parameters, or both.
-- **App handles redirect**: the redirect is handled by the app and data is parsed from the redirect URL.
-
-## Security considerations
-
-- **Never put any secret keys inside your application code, there is no secure way to do this!** Instead, you should store your secret key(s) on a server and expose an endpoint that makes API calls for your client and passes the data back.
-
-## API
-
-```js
-import * as AuthSession from 'expo-auth-session';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-av",
- {
- "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) (you're using native **android** and **ios** projects manually), then you need to configure following permissions in your native projects:
-
-- For Android, add `android.permission.RECORD_AUDIO` permission to your project's **android/app/src/main/AndroidManifest.xml**:
-
- ```xml
- NSMicrophoneUsageDescription
- Allow $(PRODUCT_NAME) to access your microphone
- ```
-
-
-
-## Usage
-
-On this page, we reference operations on `playbackObject`. Here is an example of obtaining access to the reference for both sound and video:
-
-### Example: `Audio.Sound`
-
-```js
-await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });
-
-const playbackObject = new Audio.Sound();
-// OR
-const { sound: playbackObject } = await Audio.Sound.createAsync(
- { uri: 'http://foo/bar.mp3' },
- { shouldPlay: true }
-);
-```
-
-See the [audio documentation](audio-av.mdx) for further information on `Audio.Sound.createAsync()`.
-
-### Example: `Video`
-
-```js
-/* @hide ... */ /* @end */
-_handleVideoRef = component => {
- const playbackObject = component;
- ...
-}
-/* @hide ... */ /* @end */
-
-render() {
- return (
-
- /* @hide ... */ /* @end */
- )
-}
-```
-
-See the [video documentation](video-av.mdx) for further information.
-
-### Example: `setOnPlaybackStatusUpdate()`
-
-```js
-_onPlaybackStatusUpdate = playbackStatus => {
- if (!playbackStatus.isLoaded) {
- // Update your UI for the unloaded state
- if (playbackStatus.error) {
- console.log(`Encountered a fatal error during playback: ${playbackStatus.error}`);
- // Send Expo team the error on Slack or the forums so we can help you debug!
- }
- } else {
- // Update your UI for the loaded state
-
- if (playbackStatus.isPlaying) {
- // Update your UI for the playing state
- } else {
- // Update your UI for the paused state
- }
-
- if (playbackStatus.isBuffering) {
- // Update your UI for the buffering state
- }
-
- if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {
- // The player has just finished playing and will stop. Maybe you want to play something else?
- }
-
- /* @hide ... */ /* @end */
- }
-};
-
-// Load the playbackObject and obtain the reference.
-playbackObject.setOnPlaybackStatusUpdate(this._onPlaybackStatusUpdate);
-```
-
-### Example: Loop media exactly 20 times
-
-```js
-const N = 20;
-/* @hide ... */ /* @end */
-
-_onPlaybackStatusUpdate = playbackStatus => {
- if (playbackStatus.didJustFinish) {
- if (this.state.numberOfLoops == N - 1) {
- playbackObject.setIsLooping(false);
- }
- this.setState({ numberOfLoops: this.state.numberOfLoops + 1 });
- }
-};
-
-/* @hide ... */ /* @end */
-this.setState({ numberOfLoops: 0 });
-// Load the playbackObject and obtain the reference.
-playbackObject.setOnPlaybackStatusUpdate(this._onPlaybackStatusUpdate);
-playbackObject.setIsLooping(true);
-```
-
-## What is seek tolerance and why would I want to use it
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using a native **ios** project manually, then you'll need to add the following to your **Expo.plist** file:
-
-```xml ios/project-name/Supporting/Expo.plist
-UIBackgroundModes
-
- fetch
-
-```
-
-
-
-## Usage
-
-Below is an example that demonstrates how to use `expo-background-fetch`.
-
-
-
-```tsx
-import { useState, useEffect } from 'react';
-import { StyleSheet, Text, View, Button } from 'react-native';
-import * as BackgroundFetch from 'expo-background-fetch';
-import * as TaskManager from 'expo-task-manager';
-
-const BACKGROUND_FETCH_TASK = 'background-fetch';
-
-// 1. Define the task by providing a name and the function that should be executed
-// Note: This needs to be called in the global scope (e.g outside of your React components)
-TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
- const now = Date.now();
-
- console.log(`Got background fetch call at date: ${new Date(now).toISOString()}`);
-
- // Be sure to return the successful result type!
- return BackgroundFetch.BackgroundFetchResult.NewData;
-});
-
-// 2. Register the task at some point in your app by providing the same name,
-// and some configuration options for how the background fetch should behave
-// Note: This does NOT need to be in the global scope and CAN be used in your React components!
-async function registerBackgroundFetchAsync() {
- return BackgroundFetch.registerTaskAsync(BACKGROUND_FETCH_TASK, {
- minimumInterval: 60 * 15, // 15 minutes
- stopOnTerminate: false, // android only,
- startOnBoot: true, // android only
- });
-}
-
-// 3. (Optional) Unregister tasks by specifying the task name
-// This will cancel any future background fetch calls that match the given name
-// Note: This does NOT need to be in the global scope and CAN be used in your React components!
-async function unregisterBackgroundFetchAsync() {
- return BackgroundFetch.unregisterTaskAsync(BACKGROUND_FETCH_TASK);
-}
-
-export default function BackgroundFetchScreen() {
- const [isRegistered, setIsRegistered] = useState(false);
- const [status, setStatus] = useState(null);
-
- useEffect(() => {
- checkStatusAsync();
- }, []);
-
- const checkStatusAsync = async () => {
- const status = await BackgroundFetch.getStatusAsync();
- const isRegistered = await TaskManager.isTaskRegisteredAsync(BACKGROUND_FETCH_TASK);
- setStatus(status);
- setIsRegistered(isRegistered);
- };
-
- const toggleFetchTask = async () => {
- if (isRegistered) {
- await unregisterBackgroundFetchAsync();
- } else {
- await registerBackgroundFetchAsync();
- }
-
- checkStatusAsync();
- };
-
- return (
-
-
-
- Background fetch status:{' '}
-
- {status && BackgroundFetch.BackgroundFetchStatus[status]}
-
-
-
- Background fetch task name:{' '}
-
- {isRegistered ? BACKGROUND_FETCH_TASK : 'Not registered yet!'}
-
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- screen: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- textContainer: {
- margin: 10,
- },
- boldText: {
- fontWeight: 'bold',
- },
-});
-```
-
-
-
-## Triggering background fetches
-
-Background fetches can be difficult to test because they can happen inconsistently. Fortunately, you can trigger background fetches manually when developing your apps.
-
-For iOS, you can use the `Instruments` app on macOS to manually trigger background fetches:
-
-1. Open the Instruments app. The Instruments app can be searched through Spotlight (⌘ + Space) or opened from `/Applications/Xcode.app/Contents/Applications/Instruments.app`
-2. Select `Time Profiler`
-3. Select your device / simulator and pick the `Expo Go` app
-4. Press the `Record` button in the top left corner
-5. Navigate to the `Document` Menu and select `Simulate Background Fetch - Expo Go`:
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)), then you'll need to add the following to your **Info.plist** file:
-
-```xml ios/project-name/Supporting/Info.plist
-UIBackgroundModes
-
- processing
-
-
-```
-
-
-
-## Usage
-
-Below is an example that demonstrates how to use `expo-background-task`.
-
-```tsx App.tsx
-import * as BackgroundTask from 'expo-background-task';
-import * as TaskManager from 'expo-task-manager';
-import { useEffect, useState } from 'react';
-import { StyleSheet, Text, View, Button } from 'react-native';
-
-const BACKGROUND_TASK_IDENTIFIER = 'background-task';
-
-// Register and create the task so that it is available also when the background task screen
-// (a React component defined later in this example) is not visible.
-// Note: This needs to be called in the global scope, not in a React component.
-TaskManager.defineTask(BACKGROUND_TASK_IDENTIFIER, async () => {
- try {
- const now = Date.now();
- console.log(`Got background task call at date: ${new Date(now).toISOString()}`);
- } catch (error) {
- console.error('Failed to execute the background task:', error);
- return BackgroundTask.BackgroundTaskResult.Failed;
- }
- return BackgroundTask.BackgroundTaskResult.Success;
-});
-
-// 2. Register the task at some point in your app by providing the same name
-// Note: This does NOT need to be in the global scope and CAN be used in your React components!
-async function registerBackgroundTaskAsync() {
- return BackgroundTask.registerTaskAsync(BACKGROUND_TASK_IDENTIFIER);
-}
-
-// 3. (Optional) Unregister tasks by specifying the task name
-// This will cancel any future background task calls that match the given name
-// Note: This does NOT need to be in the global scope and CAN be used in your React components!
-async function unregisterBackgroundTaskAsync() {
- return BackgroundTask.unregisterTaskAsync(BACKGROUND_TASK_IDENTIFIER);
-}
-
-export default function BackgroundTaskScreen() {
- const [isRegistered, setIsRegistered] = useState(false);
- const [status, setStatus] = useState(null);
-
- useEffect(() => {
- updateAsync();
- }, []);
-
- const updateAsync = async () => {
- const status = await BackgroundTask.getStatusAsync();
- setStatus(status);
- const isRegistered = await TaskManager.isTaskRegisteredAsync(BACKGROUND_TASK_IDENTIFIER);
- setIsRegistered(isRegistered);
- };
-
- const toggle = async () => {
- if (!isRegistered) {
- await registerBackgroundTaskAsync();
- } else {
- await unregisterBackgroundTaskAsync();
- }
- await updateAsync();
- };
-
- return (
-
-
-
- Background Task Service Availability:{' '}
-
- {status ? BackgroundTask.BackgroundTaskStatus[status] : null}
-
-
-
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- screen: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- textContainer: {
- margin: 10,
- },
- boldText: {
- fontWeight: 'bold',
- },
-});
-```
-
-## Multiple background tasks
-
-Since the Background Tasks API on iOS and the WorkManager API on Android limit the number of tasks that can be scheduled for a single app, Expo Background Task uses a single worker on both platforms. While you can define multiple JavaScript background tasks, they will all run through this single worker.
-
-The last registered background task determines the minimum interval for execution.
-
-## Testing background tasks
-
-Background tasks can be tested using the [`triggerTaskWorkerForTestingAsync`](#backgroundtasktriggertaskworkerfortestingasync) method. This method will run all registered tasks directly on Android and invoke the `BGTaskScheduler` on iOS. This is useful for testing the behavior of your background tasks without having to wait for the system to trigger them.
-
-This method is only available in development mode. It will not work in production builds.
-
-```tsx
-import * as BackgroundTask from 'expo-background-task';
-import { Button } from 'react-native';
-
-function App() {
- const triggerTask = async () => {
- await BackgroundTask.triggerTaskWorkerForTestingAsync();
- };
-
- return ;
-}
-```
-
-## Inspecting background tasks "']}
-/>
-
-The output from this command will show you the scheduled tasks for your app, including their status, constraints, and other information. Look for the `JOB` line to find the ID of the job and other details in the output:
-
-```text
-JOB #u0a453/275: 216a359 /androidx.work.impl.background.systemjob.SystemJobService
- u0a453 tag=*job*//androidx.work.impl.background.systemjob.SystemJobService#275
- Source: uid=u0a453 user=0 pkg=
- ...
- Required constraints: TIMING_DELAY CONNECTIVITY UID_NOT_RESTRICTED [0x90100000]
- Preferred constraints:
- Dynamic constraints:
- Satisfied constraints: CONNECTIVITY DEVICE_NOT_DOZING BACKGROUND_NOT_RESTRICTED TARE_WEALTH WITHIN_QUOTA UID_NOT_RESTRICTED [0x1b500000]
- Unsatisfied constraints: TIMING_DELAY [0x80000000]
- ...
- Enqueue time: -8m12s280ms
- Run time: earliest=+6m47s715ms, latest=none, original latest=none
- Restricted due to: none.
- Ready: false (job=false user=true !restricted=true !pending=true !active=true !backingup=true comp=true)
-```
-
-The first line contains the Job ID (275). The `Run time: earliest` value indicates the earliest time the task may start, while `enqueue time` shows how long ago the task was scheduled.
-
-To force a task to run, use the `adb shell am broadcast` command. Move your app to the background before running this command, as the task will not run if the app is in the foreground.
-
- ']} />
-
-Where `JOB_ID` would be the identifier of the job you want to run that you found in the previous step.
-
-## Troubleshooting background tasks
-
-```jsx
-import { useState } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View, Platform } from 'react-native';
-import { Barometer } from 'expo-sensors';
-
-export default function App() {
- const [{ pressure, relativeAltitude }, setData] = useState({ pressure: 0, relativeAltitude: 0 });
- const [subscription, setSubscription] = useState(null);
-
- const toggleListener = () => {
- subscription ? unsubscribe() : subscribe();
- };
-
- const subscribe = () => {
- setSubscription(Barometer.addListener(setData));
- };
-
- const unsubscribe = () => {
- subscription && subscription.remove();
- setSubscription(null);
- };
-
- return (
-
- Barometer: Listener {subscription ? 'ACTIVE' : 'INACTIVE'}
- Pressure: {pressure} hPa
-
- Relative Altitude:{' '}
- {Platform.OS === 'ios' ? `${relativeAltitude} m` : `Only available on iOS`}
-
-
- Toggle listener
-
-
- );
-}
-
-const styles = StyleSheet.create({
- button: {
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#eee',
- padding: 10,
- marginTop: 15,
- },
- wrapper: {
- flex: 1,
- alignItems: 'stretch',
- justifyContent: 'center',
- paddingHorizontal: 20,
- },
-});
-```
-
-
-
-## API
-
-```js
-import { Barometer } from 'expo-sensors';
-```
-
-
-
-```jsx
-import { useBatteryLevel } from 'expo-battery';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
- const batteryLevel = useBatteryLevel();
-
- return (
-
- Current Battery Level: {batteryLevel}
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- marginTop: 15,
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Battery from 'expo-battery';
-```
-
-
-
-```
-
-## Installation
-
-
-
-```jsx
-import { Text, StyleSheet, View, SafeAreaView } from 'react-native';
-import { BlurView } from 'expo-blur';
-
-export default function App() {
- const text = 'Hello, my container is blurring contents underneath!';
- return (
-
-
- {[...Array(20).keys()].map(i => (
-
-
- {text}
-
-
- {text}
-
-
- {text}
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- },
- blurContainer: {
- flex: 1,
- padding: 20,
- margin: 16,
- textAlign: 'center',
- justifyContent: 'center',
- overflow: 'hidden',
- borderRadius: 20,
- },
- background: {
- flex: 1,
- flexWrap: 'wrap',
- ...StyleSheet.absoluteFill,
- },
- box: {
- width: '25%',
- height: '20%',
- },
- boxEven: {
- backgroundColor: 'orangered',
- },
- boxOdd: {
- backgroundColor: 'gold',
- },
- text: {
- fontSize: 24,
- fontWeight: '600',
- },
-});
-```
-
-
-
-## API
-
-```js
-import { BlurView } from 'expo-blur';
-```
-
-`. See [Usage](#usage) for an example.
diff --git a/docs/pages/versions/v53.0.0/sdk/brightness.mdx b/docs/pages/versions/v53.0.0/sdk/brightness.mdx
deleted file mode 100644
index 8966dc5137b915..00000000000000
--- a/docs/pages/versions/v53.0.0/sdk/brightness.mdx
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Brightness
-description: A library that provides access to an API for getting and setting the screen brightness.
-sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-53/packages/expo-brightness'
-packageName: 'expo-brightness'
-iconUrl: '/static/images/packages/expo-brightness.png'
-platforms: ['android', 'ios', 'expo-go']
----
-
-import APISection from '~/components/plugins/APISection';
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { AndroidPermissions } from '~/components/plugins/permissions';
-import { ConfigReactNative } from '~/ui/components/ConfigSection';
-import { SnackInline } from '~/ui/components/Snippet';
-
-An API to get and set screen brightness.
-
-On Android, there is a global system-wide brightness setting, and each app has its own brightness setting that can optionally override the global setting. It is possible to set either of these values with this API. On iOS, the system brightness setting cannot be changed programmatically; instead, any changes to the screen brightness will persist until the device is locked or powered off.
-
-## Installation
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using a native **android** project manually, then you need to add the `android.permission.WRITE_SETTINGS` permission to the **AndroidManifest.xml** file:
-
-```xml android/app/src/main/AndroidManifest.xml
-
-
-## Usage
-
-
-
-```jsx
-import { useEffect } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import * as Brightness from 'expo-brightness';
-
-export default function App() {
- useEffect(() => {
- (async () => {
- const { status } = await Brightness.requestPermissionsAsync();
- if (status === 'granted') {
- Brightness.setSystemBrightnessAsync(1);
- }
- })();
- }, []);
-
- return (
-
- Brightness Module Example
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Brightness from 'expo-brightness';
-```
-
-
-
-
-
-
-
-```json app.json|collapseHeight=450
-{
- "expo": {
- "plugins": [
- [
- "expo-build-properties",
- {
- "android": {
- "compileSdkVersion": 35,
- "targetSdkVersion": 35,
- "buildToolsVersion": "35.0.0"
- },
- "ios": {
- "deploymentTarget": "15.1"
- }
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-```js app.config.js|collapseHeight=450
-export default {
- expo: {
- plugins: [
- [
- 'expo-build-properties',
- {
- android: {
- compileSdkVersion: 35,
- targetSdkVersion: 35,
- buildToolsVersion: '35.0.0',
- },
- ios: {
- deploymentTarget: '15.1',
- },
- },
- ],
- ],
- },
-};
-```
-
-
-
-
-
-
-
-### All configurable properties
-
-[`PluginConfigType`](#pluginconfigtype) interface represents currently available configuration properties.
-
-## API
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-calendar",
- {
- "calendarPermission": "The app needs to access your calendar."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) (you're using native **android** and **ios** projects manually), then you need to configure following permissions in your native projects:
-
-- For Android, add `android.permission.READ_CALENDAR` and `android.permission.WRITE_CALENDAR` permissions to your project's **android/app/src/main/AndroidManifest.xml**:
-
- ```xml
- NSCalendarsUsageDescription
- Allow $(PRODUCT_NAME) to access your calendar
- NSRemindersUsageDescription
- Allow $(PRODUCT_NAME) to access your reminders
- ```
-
-
-
-## Usage
-
-
-
-```jsx
-import { useEffect } from 'react';
-import { StyleSheet, View, Text, Button, Platform } from 'react-native';
-import * as Calendar from 'expo-calendar';
-
-export default function App() {
- useEffect(() => {
- (async () => {
- const { status } = await Calendar.requestCalendarPermissionsAsync();
- if (status === 'granted') {
- const calendars = await Calendar.getCalendarsAsync(Calendar.EntityTypes.EVENT);
- console.log('Here are all your calendars:');
- console.log({ calendars });
- }
- })();
- }, []);
-
- return (
-
- Calendar Module Example
-
-
- );
-}
-
-async function getDefaultCalendarSource() {
- const defaultCalendar = await Calendar.getDefaultCalendarAsync();
- return defaultCalendar.source;
-}
-
-async function createCalendar() {
- const defaultCalendarSource =
- Platform.OS === 'ios'
- ? await getDefaultCalendarSource()
- : { isLocalAccount: true, name: 'Expo Calendar' };
- const newCalendarID = await Calendar.createCalendarAsync({
- title: 'Expo Calendar',
- color: 'blue',
- entityType: Calendar.EntityTypes.EVENT,
- sourceId: defaultCalendarSource.id,
- source: defaultCalendarSource,
- name: 'internalCalendarName',
- ownerAccount: 'personal',
- accessLevel: Calendar.CalendarAccessLevel.OWNER,
- });
- console.log(`Your new calendar ID is: ${newCalendarID}`);
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'space-around',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Calendar from 'expo-calendar';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-camera",
- {
- "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
- "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
- "recordAudioAndroid": true
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) (you're using native **android** and **ios** projects manually), then you need to configure following permissions in your native projects:
-
-**Android**
-
-- `expo-camera` automatically adds `android.permission.CAMERA` permission to your project's **android/app/src/main/AndroidManifest.xml**. If you want to record videos with audio, include `RECORD_AUDIO` permission:
-
- ```xml
-
- NSCameraUsageDescription
- Allow $(PRODUCT_NAME) to access your camera
- NSMicrophoneUsageDescription
- Allow $(PRODUCT_NAME) to access your microphone
- ```
-
-
-
-## Usage
-
-> **warning** Only one Camera preview can be active at any given time. If you have multiple screens in your app, you should unmount `Camera` components whenever a screen is unfocused.
-
-
-
-```tsx
-import { CameraView, CameraType, useCameraPermissions } from 'expo-camera';
-import { useState } from 'react';
-import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-
-export default function App() {
- const [facing, setFacing] = useState('back');
- const [permission, requestPermission] = useCameraPermissions();
-
- if (!permission) {
- // Camera permissions are still loading.
- return
- We need your permission to show the camera
-
-
- );
- }
-
- function toggleCameraFacing() {
- setFacing(current => (current === 'back' ? 'front' : 'back'));
- }
-
- return (
-
-
-
- Flip Camera
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- },
- message: {
- textAlign: 'center',
- paddingBottom: 10,
- },
- camera: {
- flex: 1,
- },
- buttonContainer: {
- position: 'absolute',
- bottom: 64,
- flexDirection: 'row',
- backgroundColor: 'transparent',
- width: '100%',
- paddingHorizontal: 64,
- },
- button: {
- flex: 1,
- alignItems: 'center',
- },
- text: {
- fontSize: 24,
- fontWeight: 'bold',
- color: 'white',
- },
-});
-```
-
-
-
-### Advanced usage
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using native a **android** project manually, then you need to add `android.permission.READ_PHONE_STATE` permission to your project's **AndroidManifest.xml**. This permission is used for `TelephonyManager`.
-
-```xml android/app/src/main/AndroidManifest.xml
-
-
-## API
-
-```js
-import * as Cellular from 'expo-cellular';
-```
-
-
-
-```tsx
-import Checkbox from 'expo-checkbox';
-import { useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
- const [isChecked, setChecked] = useState(false);
-
- return (
-
-
- Normal checkbox
-
-
- Custom colored checkbox
-
-
- Disabled checkbox
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- marginHorizontal: 16,
- marginVertical: 32,
- },
- section: {
- flexDirection: 'row',
- alignItems: 'center',
- },
- paragraph: {
- fontSize: 15,
- },
- checkbox: {
- margin: 8,
- },
-});
-```
-
-
-
-## API
-
-```js
-import Checkbox from 'expo-checkbox';
-```
-
-
-
-```jsx
-import { useState } from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
-import * as Clipboard from 'expo-clipboard';
-
-export default function App() {
- const [copiedText, setCopiedText] = useState('');
-
- const copyToClipboard = async () => {
- /* @info Copy the text to the clipboard */
- await Clipboard.setStringAsync('hello world');
- /* @end */
- };
-
- const fetchCopiedText = async () => {
- const text = /* @info Paste the text from the clipboard */ await Clipboard.getStringAsync();
- /* @end */
- setCopiedText(text);
- };
-
- return (
-
-
-
- {copiedText}
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- copiedText: {
- marginTop: 10,
- color: 'red',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Clipboard from 'expo-clipboard';
-```
-
-> **warning** On Web, this module uses the [`AsyncClipboard` API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API),
-> which might behave differently between browsers or not be fully supported.
-> Especially on WebKit, there's an issue which makes this API unusable in asynchronous code.
-> [Click here for more details](https://bugs.webkit.org/show_bug.cgi?id=222262).
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-contacts",
- {
- "contactsPermission": "Allow $(PRODUCT_NAME) to access your contacts."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) (you're using native **android** and **ios** projects manually), then you need to configure following permissions in your native projects:
-
-- For Android, add `android.permission.READ_CONTACTS` and `android.permission.WRITE_CONTACTS` permissions to your project's **android/app/src/main/AndroidManifest.xml**:
-
- ```xml
- NSContactsUsageDescription
- Allow $(PRODUCT_NAME) to access your contacts
- ```
-
-
-
-## Usage
-
-
-
-```jsx
-import { useEffect } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import * as Contacts from 'expo-contacts';
-
-export default function App() {
- useEffect(() => {
- (async () => {
- const { status } = await Contacts.requestPermissionsAsync();
- if (status === 'granted') {
- const { data } = await Contacts.getContactsAsync({
- fields: [Contacts.Fields.Emails],
- });
-
- if (data.length > 0) {
- const contact = data[0];
- console.log(contact);
- }
- }
- })();
- }, []);
-
- return (
-
- Contacts Module Example
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Contacts from 'expo-contacts';
-```
-
-
-
-```jsx
-import { useEffect } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import * as Crypto from 'expo-crypto';
-
-export default function App() {
- useEffect(() => {
- (async () => {
- const digest = await Crypto.digestStringAsync(
- Crypto.CryptoDigestAlgorithm.SHA256,
- 'GitHub stars are neat 🌟'
- );
- console.log('Digest: ', digest);
- /* Some crypto operation... */
- })();
- }, []);
-
- return (
-
- Crypto Module Example
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Crypto from 'expo-crypto';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-dev-client",
- {
- "launchMode": "most-recent"
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-```jsx
-import { Text, View } from 'react-native';
-import * as Device from 'expo-device';
-
-export default function App() {
- return (
-
-
- {Device.manufacturer}: {Device.modelName}
-
-
- );
-}
-```
-
-
-
-## API
-
-```js
-import * as Device from 'expo-device';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-sensors",
- {
- "motionPermission": "Allow $(PRODUCT_NAME) to access your device motion."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using native **ios** project manually, then you need to configure `NSMotionUsageDescription` key in your native project to access `DeviceMotion` stats:
-
-```xml ios/[app]/Info.plist
-NSMotionUsageDescription
-Allow $(PRODUCT_NAME) to access your device motion
-```
-
-
-
-## API
-
-```js
-import { DeviceMotion } from 'expo-sensors';
-```
-
-
-
-If you want to enable [iCloud storage features][icloud-entitlement], set the `expo.ios.usesIcloudStorage` key to `true` in the [app config](/workflow/configuration/) file as specified [configuration properties](../config/app/#usesicloudstorage).
-
-Running [EAS Build](/build/introduction) locally will use [iOS capabilities signing](/build-reference/ios-capabilities) to enable the required capabilities before building.
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-document-picker",
- {
- "iCloudContainerEnvironment": "Production"
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-Apps that don't use [EAS Build](/build/introduction) and want [iCloud storage features][icloud-entitlement] must [manually configure](/build-reference/ios-capabilities#manual-setup) the [**iCloud service with CloudKit support**](https://developer.apple.com/documentation/bundleresources/entitlements/com_apple_developer_icloud-container-environment) for their bundle identifier.
-
-If you enable the **iCloud** capability through the [Apple Developer Console](/build-reference/ios-capabilities#apple-developer-console), then be sure to add the following entitlements in your `ios/[app]/[app].entitlements` file (where `dev.expo.my-app` if your bundle identifier):
-
-```xml
-com.apple.developer.icloud-container-identifiers
-
- iCloud.dev.expo.my-app
-
-com.apple.developer.icloud-services
-
- CloudDocuments
-
-com.apple.developer.ubiquity-container-identifiers
-
- iCloud.dev.expo.my-app
-
-com.apple.developer.ubiquity-kvstore-identifier
-$(TeamIdentifierPrefix)dev.expo.my-app
-```
-
-Apple Developer Console also requires an **iCloud Container** to be created. When registering the new container, you are asked to provide a description and identifier for the container. You may enter any name under the description. Under the identifier, add `iCloud.` (same value used for `com.apple.developer.icloud-container-identifiers` and `com.apple.developer.ubiquity-container-identifiers` entitlements).
-
-
-
-## Using with `expo-file-system`
-
-When using `expo-document-picker` with [`expo-file-system`](./filesystem/), it's not always possible for the file system to read the file immediately after the `expo-document-picker` picks it.
-
-To allow the `expo-file-system` to read the file immediately after it is picked, you'll need to ensure that the [`copyToCacheDirectory`](#documentpickeroptions) option is set to `true`.
-
-## API
-
-```js
-import * as DocumentPicker from 'expo-document-picker';
-```
-
-
-
-
-
-**For projects that do not use [Expo Router](/router/introduction/)**, you can set the `"main"` in **package.json** to any file within your project. If you do this, then you need to use `registerRootComponent`. The `export default` will not make this component the root for the app if you are using a custom entry file.
-
-For example, let's say you want to make **src/main.jsx** the entry file for your app — maybe you don't like having JavaScript files in the project root. First, set this in **package.json**:
-
-```json package.json
-{
- "main": "src/main.jsx"
-}
-```
-
-Then, in **src/main.jsx**, make sure you call `registerRootComponent` and pass in the component you want to render at the root of the app:
-
-```jsx src/main.jsx
-import { registerRootComponent } from 'expo';
-import { View } from 'react-native';
-
-function App() {
- return
-
-
diff --git a/docs/pages/versions/v53.0.0/sdk/filesystem-next.mdx b/docs/pages/versions/v53.0.0/sdk/filesystem-next.mdx
deleted file mode 100644
index 7f0a73a1d7eac6..00000000000000
--- a/docs/pages/versions/v53.0.0/sdk/filesystem-next.mdx
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: FileSystem (next)
-description: A library that provides access to the local file system on the device.
-sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-53/packages/expo-file-system/src/next'
-packageName: 'expo-file-system'
-iconUrl: '/static/images/packages/expo-file-system.png'
-platforms: ['android', 'ios', 'tvos']
----
-
-import APISection from '~/components/plugins/APISection';
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-
-> **info** The `next` version of the FileSystem API is included in the `expo-file-system` library. It can be used alongside the previous API, and offers a simplified, object oriented way of performing filesystem operations.
-
-> **important** To provide quicker updates, `expo-file-system/next` is currently unsupported in Expo Go and Snack. To use it, create a [development build](/develop/development-builds/create-a-build/).
-
-`expo-file-system/next` provides access to the file system stored locally on the device. It can also download files from the network.
-
-## Installation
-
-
-
-
-
- Within Expo Go, each project has a separate file system scope and has no access to the file system
- of other projects.
-
-
-## Installation
-
-
-
-```js
-import * as FileSystem from 'expo-file-system';
-
-const gifDir = FileSystem.cacheDirectory + 'giphy/';
-const gifFileUri = (gifId: string) => gifDir + `gif_${gifId}_200.gif`;
-const gifUrl = (gifId: string) => `https://media1.giphy.com/media/${gifId}/200.gif`;
-
-// Checks if gif directory exists. If not, creates it
-async function ensureDirExists() {
- const dirInfo = await FileSystem.getInfoAsync(gifDir);
- if (!dirInfo.exists) {
- console.log("Gif directory doesn't exist, creating…");
- await FileSystem.makeDirectoryAsync(gifDir, { intermediates: true });
- }
-}
-
-// Downloads all gifs specified as array of IDs
-export async function addMultipleGifs(gifIds: string[]) {
- try {
- await ensureDirExists();
-
- console.log('Downloading', gifIds.length, 'gif files…');
- await Promise.all(gifIds.map(id => FileSystem.downloadAsync(gifUrl(id), gifFileUri(id))));
- } catch (e) {
- console.error("Couldn't download gif files:", e);
- }
-}
-
-// Returns URI to our local gif file
-// If our gif doesn't exist locally, it downloads it
-export async function getSingleGif(gifId: string) {
- await ensureDirExists();
-
- const fileUri = gifFileUri(gifId);
- const fileInfo = await FileSystem.getInfoAsync(fileUri);
-
- if (!fileInfo.exists) {
- console.log("Gif isn't cached locally. Downloading…");
- await FileSystem.downloadAsync(gifUrl(gifId), fileUri);
- }
-
- return fileUri;
-}
-
-// Exports shareable URI - it can be shared outside your app
-export async function getGifContentUri(gifId: string) {
- return FileSystem.getContentUriAsync(await getSingleGif(gifId));
-}
-
-// Deletes whole giphy directory with all its content
-export async function deleteAllGifs() {
- console.log('Deleting all GIF files…');
- await FileSystem.deleteAsync(gifDir);
-}
-```
-
-
-
-### Server: handling multipart requests
-
-The simple server in Node.js, which can save uploaded images to disk:
-
-```js index.js
-const express = require('express');
-const app = express();
-const fs = require('fs');
-const multer = require('multer');
-const upload = multer({ dest: 'uploads/' });
-
-// This method will save the binary content of the request as a file.
-app.patch('/binary-upload', (req, res) => {
- req.pipe(fs.createWriteStream('./uploads/image' + Date.now() + '.png'));
- res.end('OK');
-});
-
-// This method will save a "photo" field from the request as a file.
-app.patch('/multipart-upload', upload.single('photo'), (req, res) => {
- // You can access other HTTP parameters. They are located in the body object.
- console.log(req.body);
- res.end('OK');
-});
-
-app.listen(3000, () => {
- console.log('Working on port 3000');
-});
-```
-
-## API
-
-```js
-import * as FileSystem from 'expo-file-system';
-```
-
-### Directories
-
-The API takes `file://` URIs pointing to local files on the device to identify files. Each app only has read and write access to locations under the following directories:
-
-- [`FileSystem.documentDirectory`](#filesystemdocumentdirectory)
-- [`FileSystem.cacheDirectory`](#filesystemcachedirectory)
-
-So, for example, the URI to a file named `'myFile'` under `'myDirectory'` in the app's user documents directory would be `FileSystem.documentDirectory + 'myDirectory/myFile'`.
-
-Expo APIs that create files generally operate within these directories. This includes `Audio` recordings, `Camera` photos, `ImagePicker` results, `SQLite` databases and `takeSnapShotAsync()` results. This allows their use with the `FileSystem` API.
-
-Some `FileSystem` functions are able to read from (but not write to) other locations.
-
-### SAF URI
-
-A SAF URI is a URI that is compatible with the Storage Access Framework. It should look like this `content://com.android.externalstorage.*`.
-The easiest way to obtain such URI is by [`requestDirectoryPermissionsAsync`](#requestdirectorypermissionsasyncinitialfileurl) method.
-
-
`content://`,
`asset://`,
no scheme | `file://`,
`ph://`,
`assets-library://` | -| `readAsStringAsync` | `file:///`,
`asset://`,
[SAF URI](#saf-uri) | `file://` | -| `writeAsStringAsync` | `file:///`,
[SAF URI](#saf-uri) | `file://` | -| `deleteAsync` | `file:///`,
[SAF URI](#saf-uri) | `file://` | -| `moveAsync` | Source:
`file:///`,
[SAF URI](#saf-uri)
Destination:
`file://` | Source:
`file://`
Destination:
`file://` | -| `copyAsync` | Source:
`file:///`,
`content://`,
`asset://`,
[SAF URI](#saf-uri),
no scheme
Destination:
`file://` | Source:
`file://`,
`ph://`,
`assets-library://`
Destination:
`file://` | -| `makeDirectoryAsync` | `file:///` | `file://` | -| `readDirectoryAsync` | `file:///` | `file://` | -| `downloadAsync` | Source:
`http://`,
`https://`
Destination:
`file:///` | Source:
`http://`,
`https://`
Destination:
`file://` | -| `uploadAsync` | Source:
`file:///`
Destination:
`http://`
`https://` | Source:
`file://`
Destination:
`http://`
`https://` | -| `createDownloadResumable` | Source:
`http://`,
`https://`
Destination:
`file:///` | Source:
`http://`,
`https://`
Destination:
`file://` | - -> On Android **no scheme** defaults to a bundled resource. - -## Permissions - -### Android - -The following permissions are added automatically through this library's **AndroidManifest.xml**. - -
-
-In some cases, you may want to customize the sources before fingerprinting. For example:
-
-- You want to remove sensitive data from the app config.
-- You want to stabilize dynamic values in the app config.
-- You want to transform file hashes to stable values.
-
-To do this, you can use the `fileHookTransform` option in the **fingerprint.config.js** file to transform the sources before hashing. Learn more about the [`fileHookTransform` option](#filehooktransformfunctionsource-chunk-isendoffile-encoding).
-
-```js fingerprint.config.js
-const assert = require('node:assert');
-
-const fileChunkMap = {};
-
-/** @type {import('@expo/fingerprint').Config} */
-const config = {
- fileHookTransform: (source, chunk, isEndOfFile, encoding) => {
- // Remove the "updates" section from the app config
- if (source.type === 'contents' && source.id === 'expoConfig') {
- assert(isEndOfFile, 'contents source is expected to have single chunk.');
- const config = JSON.parse(chunk);
- delete config.updates;
- return JSON.stringify(config);
- }
-
- // Transform content sources to an empty string
- if (source.type === 'contents' && source.id === 'packageJson:scripts') {
- return '';
- }
-
- // Transform a file source by replacing dynamic values
- if (source.type === 'file' && source.filePath === 'eas.json') {
- return chunk.toString().replace(/MyApp-Dev/g, 'MyApp');
- }
-
- // Transform a large file that is processed in multiple chunks
- // To get the full file, buffer all chunks and return them all at once
- if (source.type === 'file' && source.filePath === 'assets/large-image.jpg') {
- let receivedBuffer = fileChunkMap[source.filePath] ?? Buffer.alloc(0);
- if (chunk != null) {
- const buffer = typeof chunk === 'string' ? Buffer.from(chunk, encoding) : chunk;
- receivedBuffer = Buffer.concat([receivedBuffer, buffer]);
- fileChunkMap[source.filePath] = receivedBuffer;
- }
- if (!isEndOfFile) {
- return null;
- }
- fileChunkMap[source.filePath] = null;
- // The full payload is available here and you can transform it as needed.
- receivedBuffer = receivedBuffer.toString().replace(/SensitiveData/g, 'StableData');
- return receivedBuffer;
- }
-
- // For other sources, just return the chunk
- return chunk;
- },
-};
-
-module.exports = config;
-```
-
-
-
-## Limitations
-
-Limited support for
-
-## API
-
-```ts
-import * as Fingerprint from '@expo/fingerprint';
-```
-
-` component. It "recycles components under the hood to maximize performance."
-
-## Installation
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-font",
- {
- /* @info The path to the font file is relative to the project's root. */
- "fonts": ["./path/to/file.ttf"],
- /* @end */
- "android": {
- "fonts": [
- {
- "fontFamily": "Source Serif 4",
- "fontDefinitions": [
- {
- "path": "./path/to/SourceSerif4-ExtraBold.ttf",
- "weight": 800
- }
- ]
- }
- ]
- }
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-- **Android:** Copy font files to **android/app/src/main/assets/fonts**.
-- **iOS**: See [Adding a Custom Font to Your App](https://developer.apple.com/documentation/uikit/adding-a-custom-font-to-your-app) in the Apple Developer documentation.
-
-
-
-## Usage
-
-If you don't want to use the [config plugin](#configuration-in-app-config), you can load a font at runtime with the `useFonts` hook, as shown in the snippet:
-
-
-
-```tsx
-/* @info Import useFonts hook from 'expo-font'. */ import { useFonts } from 'expo-font'; /* @end */
-/* @info Also, import SplashScreen so that when the fonts are not loaded, we can continue to show SplashScreen. */ import * as SplashScreen from 'expo-splash-screen'; /* @end */
-import { useEffect } from 'react';
-import { Text, View, StyleSheet } from 'react-native';
-
-/* @info This prevents SplashScreen from auto hiding while the fonts are loaded. */
-SplashScreen.preventAutoHideAsync();
-/* @end */
-
-export default function App() {
- // Use `useFonts` only if you can't use the config plugin.
- const [loaded, error] = useFonts({
- 'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
- });
-
- useEffect(() => {
- if (loaded || error) {
- /* @info After the custom fonts have loaded, we can hide the splash screen and display the app screen. */
- SplashScreen.hideAsync();
- /* @end */
- }
- }, [loaded, error]);
-
- if (!loaded && !error) {
- return null;
- }
-
- return (
-
- Inter Black
- Platform Default
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Font from 'expo-font';
-```
-
-
-
-```jsx
-import { View } from 'react-native';
-import { GLView } from 'expo-gl';
-
-export default function App() {
- return (
-
-
- );
-}
-
-function onContextCreate(gl) {
- gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
- gl.clearColor(0, 1, 1, 1);
-
- // Create vertex shader (shape & position)
- const vert = gl.createShader(gl.VERTEX_SHADER);
- gl.shaderSource(
- vert,
- `
- void main(void) {
- gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
- gl_PointSize = 150.0;
- }
- `
- );
- gl.compileShader(vert);
-
- // Create fragment shader (color)
- const frag = gl.createShader(gl.FRAGMENT_SHADER);
- gl.shaderSource(
- frag,
- `
- void main(void) {
- gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
- }
- `
- );
- gl.compileShader(frag);
-
- // Link together into a program
- const program = gl.createProgram();
- gl.attachShader(program, vert);
- gl.attachShader(program, frag);
- gl.linkProgram(program);
- gl.useProgram(program);
-
- gl.clear(gl.COLOR_BUFFER_BIT);
- gl.drawArrays(gl.POINTS, 0, 1);
-
- gl.flush();
- gl.endFrameEXP();
-}
-```
-
-
-
-## High-level APIs
-
-Since the WebGL API is quite low-level, it can be helpful to use higher-level graphics APIs rendering through a `GLView` underneath. The following libraries integrate popular graphics APIs:
-
-- [expo-three](https://github.com/expo/expo-three) for [three.js](https://threejs.org)
-- [expo-processing](https://github.com/expo/expo-processing) for [processing.js](http://processingjs.org)
-
-Any WebGL-supporting library that expects a [WebGLRenderingContext](https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14) could be used. Some times such libraries assume a web JavaScript context (such as assuming `document`). Usually this is for resource loading or event handling, with the main rendering logic still only using pure WebGL. So these libraries can usually still be used with a couple workarounds. The Expo-specific integrations above include workarounds for some popular libraries.
-
-## Integration with Reanimated worklets
-
-To use this API inside Reanimated worklet, you need to pass the GL context ID to the worklet and recreate the GL object like in the example below.
-
-
-
-```jsx
-import { View } from 'react-native';
-import { runOnUI } from 'react-native-reanimated';
-import { GLView } from 'expo-gl';
-
-function render(gl) {
- 'worklet';
- // add your WebGL code here
-}
-
-function onContextCreate(gl) {
- runOnUI((contextId: number) => {
- 'worklet';
- const gl = GLView.getWorkletContext(contextId);
- render(gl);
- })(gl.contextId);
-}
-
-export default function App() {
- return (
-
-
- );
-}
-```
-
-
-
-For more in-depth example on how to use `expo-gl` with Reanimated and Gesture Handler you can check [this example](https://github.com/expo/expo/tree/main/apps/native-component-list/src/screens/GL/GLReanimatedExample.tsx).
-
-### Limitations
-
-Worklet runtime is imposing some limitations on the code that runs inside it, so if you have existing WebGL code, it'll likely require some modifications to run inside a worklet thread.
-
-- Third-party libraries like Pixi.js or Three.js won't work inside the worklet, you can only use functions that have `'worklet'` added at the start.
-- If you need to load some assets to pass to the WebGL code, it needs to be done on the main thread and passed via some reference to the worklet. If you are using `expo-assets` you can just pass asset object returned by `Asset.fromModule` or from hook `useAssets` to the `runOnUI` function.
-- To implement a rendering loop you need to use `requestAnimationFrame`, APIs like `setTimeout` are not supported.
-- It's supported only on Android and iOS, it doesn't work on Web.
-
-Check [Reanimated documentation](https://docs.swmansion.com/react-native-reanimated/docs/guides/worklets/) to learn more.
-
-## Remote debugging and GLView
-
-This API does not function as intended with remote debugging enabled. The React Native debugger runs JavaScript on your computer, not the mobile device. GLView requires synchronous native calls that are not supported in Chrome.
-
-## API
-
-```js
-import { GLView } from 'expo-gl';
-```
-
-
-
-```jsx
-import { useState, useEffect } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { Gyroscope } from 'expo-sensors';
-
-export default function App() {
- const [{ x, y, z }, setData] = useState({
- x: 0,
- y: 0,
- z: 0,
- });
- const [subscription, setSubscription] = useState(null);
-
- const _slow = () => Gyroscope.setUpdateInterval(1000);
- const _fast = () => Gyroscope.setUpdateInterval(16);
-
- const _subscribe = () => {
- setSubscription(
- Gyroscope.addListener(gyroscopeData => {
- setData(gyroscopeData);
- })
- );
- };
-
- const _unsubscribe = () => {
- subscription && subscription.remove();
- setSubscription(null);
- };
-
- useEffect(() => {
- _subscribe();
- return () => _unsubscribe();
- }, []);
-
- return (
-
- Gyroscope:
- x: {x}
- y: {y}
- z: {z}
-
-
- {subscription ? 'On' : 'Off'}
-
-
- Slow
-
-
- Fast
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- paddingHorizontal: 10,
- },
- text: {
- textAlign: 'center',
- },
- buttonContainer: {
- flexDirection: 'row',
- alignItems: 'stretch',
- marginTop: 15,
- },
- button: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#eee',
- padding: 10,
- },
- middleButton: {
- borderLeftWidth: 1,
- borderRightWidth: 1,
- borderColor: '#ccc',
- },
-});
-```
-
-
-
-## API
-
-```js
-import { Gyroscope } from 'expo-sensors';
-```
-
-
-
-```jsx
-import { StyleSheet, View, Text, Button } from 'react-native';
-import * as Haptics from 'expo-haptics';
-
-export default function App() {
- return (
-
- Haptics.selectionAsync
-
-
- Haptics.notificationAsync
-
-
- Haptics.impactAsync
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- paddingHorizontal: 16,
- },
- buttonContainer: {
- flexDirection: 'row',
- alignItems: 'stretch',
- marginTop: 10,
- marginBottom: 30,
- justifyContent: 'space-between',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Haptics from 'expo-haptics';
-```
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
- image: {
- flex: 1,
- width: '100%',
- backgroundColor: '#0553',
- },
-});
-```
-
-## API
-
-```js
-import { Image } from 'expo-image';
-```
-
-
-
-```jsx
-import { useState } from 'react';
-import { Button, Image, StyleSheet, View } from 'react-native';
-import { Asset } from 'expo-asset';
-import { FlipType, SaveFormat, useImageManipulator } from 'expo-image-manipulator';
-
-const IMAGE = Asset.fromModule(require('./assets/snack-icon.png'));
-
-export default function App() {
- const [image, setImage] = useState(IMAGE);
- const context = useImageManipulator(IMAGE.uri);
-
- const rotate90andFlip = async () => {
- context.rotate(90).flip(FlipType.Vertical);
- const image = await context.renderAsync();
- const result = await image.saveAsync({
- format: SaveFormat.PNG,
- });
-
- setImage(result);
- };
-
- return (
-
-
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- },
- imageContainer: {
- marginVertical: 20,
- alignItems: 'center',
- justifyContent: 'center',
- },
- image: {
- width: 300,
- height: 300,
- resizeMode: 'contain',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as ImageManipulator from 'expo-image-manipulator';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-image-picker",
- {
- "photosPermission": "The app accesses your photos to let you share them with your friends."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using a native **ios** project manually, then you need to add `NSPhotoLibraryUsageDescription`, `NSCameraUsageDescription`, and `NSMicrophoneUsageDescription` keys to your **ios/[app]/Info.plist**:
-
-```xml Info.plist
-NSPhotoLibraryUsageDescription
-Give $(PRODUCT_NAME) permission to save photos
-NSCameraUsageDescription
-Give $(PRODUCT_NAME) permission to access your camera
-NSMicrophoneUsageDescription
-Give $(PRODUCT_NAME) permission to use your microphone
-```
-
-
-
-## Usage
-
-
-
-```tsx
-import { useState } from 'react';
-import { Button, Image, View, StyleSheet } from 'react-native';
-import * as ImagePicker from 'expo-image-picker';
-
-export default function ImagePickerExample() {
- const [image, setImage] = useState(null);
-
- const pickImage = async () => {
- // No permissions request is necessary for launching the image library
- let result = await ImagePicker.launchImageLibraryAsync({
- mediaTypes: ['images', 'videos'],
- allowsEditing: true,
- aspect: [4, 3],
- quality: 1,
- });
-
- console.log(result);
-
- if (!result.canceled) {
- setImage(result.assets[0].uri);
- }
- };
-
- return (
-
-
- {image &&
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- },
- image: {
- width: 200,
- height: 200,
- },
-});
-```
-
-
-
-When you run this example and pick an image, you will see the image that you picked show up in your app, and a similar log will be shown in the console:
-
-```json collapseHeight=425
-{
- "assets": [
- {
- "assetId": "C166F9F5-B5FE-4501-9531",
- "base64": null,
- "duration": null,
- "exif": null,
- "fileName": "IMG.HEIC",
- "fileSize": 6018901,
- "height": 3025,
- "type": "image",
- "uri": "file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg"
- "width": 3024
- }
- ],
- "canceled": false
-}
-```
-
-### With AWS S3
-
-
-
-```jsx
-import { useKeepAwake } from 'expo-keep-awake';
-import React from 'react';
-import { Text, View } from 'react-native';
-
-export default function KeepAwakeExample() {
- /* @info As long as this component is mounted, the screen will not turn off from being idle. */
- useKeepAwake();
- /* @end */
- return (
-
- This screen will never sleep!
-
- );
-}
-```
-
-
-
-### Example: functions
-
-
-
-```jsx
-import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
-import React from 'react';
-import { Button, View } from 'react-native';
-
-export default class KeepAwakeExample extends React.Component {
- render() {
- return (
-
-
-
-
- );
- }
-
- _activate = () => {
- /* @info Screen will remain on after called until **deactivateKeepAwake()** is called. */ activateKeepAwake(); /* @end */
- alert('Activated!');
- };
-
- _deactivate = () => {
- /* @info Deactivates KeepAwake, or does nothing if it was never activated. */ deactivateKeepAwake(); /* @end */
- alert('Deactivated!');
- };
-}
-```
-
-
-
-## API
-
-```js
-import * as KeepAwake from 'expo-keep-awake';
-```
-
-
-
-```jsx
-import { useState, useEffect } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View, Platform } from 'react-native';
-import { LightSensor } from 'expo-sensors';
-
-export default function App() {
- const [{ illuminance }, setData] = useState({ illuminance: 0 });
- const [subscription, setSubscription] = useState(null);
-
- const toggle = () => {
- if (subscription) {
- unsubscribe();
- } else {
- subscribe();
- }
- };
-
- const subscribe = () => {
- setSubscription(
- LightSensor.addListener(sensorData => {
- setData(sensorData);
- })
- );
- };
-
- const unsubscribe = () => {
- subscription && subscription.remove();
- setSubscription(null);
- };
-
- useEffect(() => {
- subscribe();
- return () => unsubscribe();
- }, []);
-
- return (
-
- Light Sensor:
-
- Illuminance: {Platform.OS === 'android' ? `${illuminance} lx` : `Only available on Android`}
-
-
-
- Toggle
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- sensor: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- paddingHorizontal: 10,
- },
- buttonContainer: {
- flexDirection: 'row',
- alignItems: 'stretch',
- marginTop: 15,
- },
- button: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#eee',
- padding: 10,
- },
-});
-```
-
-
-
-## API
-
-```js
-import { LightSensor } from 'expo-sensors';
-```
-
-
-
-```tsx
-import { StyleSheet, Text, View } from 'react-native';
-import { LinearGradient } from 'expo-linear-gradient';
-
-export default function App() {
- return (
-
-
- Sign in with Facebook
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- backgroundColor: 'orange',
- },
- background: {
- position: 'absolute',
- left: 0,
- right: 0,
- top: 0,
- height: 300,
- },
- button: {
- padding: 15,
- alignItems: 'center',
- borderRadius: 5,
- },
- text: {
- backgroundColor: 'transparent',
- fontSize: 15,
- color: '#fff',
- },
-});
-```
-
-
-
-## API
-
-```js
-import { LinearGradient } from 'expo-linear-gradient';
-```
-
-
-
-```tsx
-import * as ImagePicker from 'expo-image-picker';
-import { LivePhotoAsset, LivePhotoView, LivePhotoViewType } from 'expo-live-photo';
-import { useRef, useState } from 'react';
-import { View, StyleSheet, Text, Button } from 'react-native';
-
-export default function LivePhotoScreen() {
- const viewRef = useRef(null);
- const [livePhoto, setLivePhoto] = useState(null);
-
- const pickImage = async () => {
- const result = await ImagePicker.launchImageLibraryAsync({
- mediaTypes: ['livePhotos'],
- });
-
- if (!result.canceled && result.assets[0].pairedVideoAsset?.uri) {
- setLivePhoto({
- photoUri: result.assets[0].uri,
- pairedVideoUri: result.assets[0].pairedVideoAsset.uri,
- });
- } else {
- console.error('Failed to pick a live photo');
- }
- };
-
- if (!LivePhotoView.isAvailable()) {
- return (
-
- expo-live-photo is not available on this platform 😕
-
- );
- }
-
- return (
-
- {
- console.log('Live photo loaded successfully!');
- }}
- onLoadError={error => {
- console.error('Failed to load the live photo: ', error.message);
- }}
- />
-
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- paddingVertical: 20,
- paddingHorizontal: 40,
- },
- livePhotoView: {
- alignSelf: 'stretch',
- height: 300,
- },
- pickImageExpanded: {
- alignSelf: 'stretch',
- height: 300,
- justifyContent: 'center',
- },
- pickImageCollapsed: {
- marginVertical: 10,
- },
- button: {
- marginVertical: 10,
- },
-});
-```
-
-
-
-## API
-
-```js
-import { LivePhotoView } from 'expo-live-photo';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-local-authentication",
- {
- "faceIDPermission": "Allow $(PRODUCT_NAME) to use Face ID."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using a native **ios** project manually, then you need to add `NSFaceIDUsageDescription` key to your **ios/[app]/Info.plist**:
-
-```xml Info.plist
-NSFaceIDUsageDescription
-Allow $(PRODUCT_NAME) to use FaceID
-```
-
-
-
-## API
-
-```js
-import * as LocalAuthentication from 'expo-local-authentication';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": ["expo-localization"]
- }
-}
-```
-
-
-
-## Usage
-
-Find more information about using `expo-localization` and adding support for right-to-left languages in the [Localization](/guides/localization) guide.
-
-## API
-
-```jsx
-import { getLocales, getCalendars } from 'expo-localization';
-```
-
-### Behavior
-
-You can use synchronous `getLocales()` and `getCalendars()` methods to get the locale settings of the user device. On iOS, the results will remain the same while the app is running.
-
-On Android, the user can change locale preferences in Settings without restarting apps. To keep the localization current, you can rerun the `getLocales()` and `getCalendars()` methods every time the app returns to the foreground. Use `AppState` to detect this.
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-location",
- {
- "locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using native **ios** project manually, then you need to add the `NSLocationAlwaysAndWhenInUseUsageDescription`, `NSLocationAlwaysUsageDescription` and `NSLocationWhenInUseUsageDescription` keys to your project's **ios/[app]/Info.plist**:
-
-```xml
-NSLocationAlwaysAndWhenInUseUsageDescription
-Allow $(PRODUCT_NAME) to use your location
-NSLocationAlwaysUsageDescription
-Allow $(PRODUCT_NAME) to use your location
-NSLocationWhenInUseUsageDescription
-Allow $(PRODUCT_NAME) to use your location
-```
-
-
-
-### Background location
-
-Background location allows your app to receive location updates while it is running in the background and includes both location updates and region monitoring through geofencing. This feature is subject to platform API limitations and system constraints:
-
-- Background location will stop if the user terminates the app.
-- Background location resumes if the user restarts the app.
--
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using a native iOS project, then you'll need to add the following to your **Expo.plist** file:
-
-```xml ios/project-name/Supporting/Expo.plist
-UIBackgroundModes
-
- location
-
-```
-
-
-
-### Background location methods
-
-To use Background Location methods, the following requirements apply:
-
-- Location permissions must be granted.
-- Background location task must be defined in the top-level scope, using [`TaskManager.defineTask`](task-manager.mdx#taskmanagerdefinetasktaskname-taskexecutor).
--
-iOS permissions are divided into the two categories `When In Use` and `Always` and maps to Expo's foreground and background location permissions requested via:
-
-- [`requestForegroundPermissionsAsync`](#locationrequestforegroundpermissionsasync) maps to `When In Use`
-- [`requestBackgroundPermissionsAsync`](#locationrequestbackgroundpermissionsasync) maps to `Always`
-
-> **Note:** When requesting `When In Use` authorization, the user can grant **temporary access** by selecting `Allow Once` in the system permission dialog. This authorization will be valid **only for the current app session** and is automatically revoked when the app is closed.
-
-**Detecting "Allow Once" versus "Allow While Using the App"**
-
-Unfortunately, **iOS does not provide a way to detect whether the user selected `Allow Once` or `Allow While Using the App`**. Both responses result in `When In Use` authorization.
-
-If the user selected `Allow Once` and you subsequently call [`requestBackgroundPermissionsAsync`](#locationrequestbackgroundpermissionsasync) in the same session, the system **will not show another prompt**. Instead, the request will **silently fail**, and the returned background permission status will be **denied**.
-
-**Handling "Allow Once" scenarios**
-
-If you suspect the user selected `Allow Once` and needs to request background permissions, they must **manually enable background location** in the Settings app. You can use `Linking` to open the Settings app within your app:
-
-```js
-import { Linking } from 'react-native';
-
-function openSettings() {
- Linking.openURL('app-settings:');
-}
-```
-
-**Incremental permission requests**
-
-It is possible to request foreground location access first and then ask for background location access later. This can improve the user experience by requesting permissions only when necessary.
-
-**Requesting Background Permissions directly**
-
-If you call [`requestBackgroundPermissionsAsync`](#locationrequestbackgroundpermissionsasync) without first requesting foreground permissions, iOS treats it as a request for both `When In Use` and `Always` authorization. The system will then prompt the user for `When In Use` access, and the `Always` authorization prompt will be displayed when the system determines that `Always` authorization is required.
-
-Remember that the user has the option of granting your app `When In Use` authorization instead. You must always be prepared to run with `When In Use` permission.
-
-
-
-## Deferred locations
-
-When using background locations, you can configure the location manager to defer updates. This helps save battery by reducing update frequency. You can set updates to trigger only after the device has moved a certain distance or after a specified time interval.
-
-Deferred updates are configured through [`LocationTaskOptions`](#locationtaskoptions) using the [`deferredUpdatesDistance`](#locationtaskoptions), [`deferredUpdatesInterval`](#locationtaskoptions) and [`deferredTimeout`](#locationtaskoptions) properties.
-
-> Deferred locations apply only when the app is in the background.
-
-## Usage
-
-If you're using the Android Emulator or iOS Simulator, ensure that [Location is enabled](#enable-emulator-location).
-
-
-
-```tsx
-import { useState, useEffect } from 'react';
-import { Platform, Text, View, StyleSheet } from 'react-native';
-/* @hide */
-import * as Device from 'expo-device';
-/* @end */
-import * as Location from 'expo-location';
-
-export default function App() {
- const [location, setLocation] = useState(null);
- const [errorMsg, setErrorMsg] = useState(null);
-
- useEffect(() => {
- async function getCurrentLocation() {
- /* @hide */
- if (Platform.OS === 'android' && !Device.isDevice) {
- setErrorMsg(
- 'Oops, this will not work on Snack in an Android Emulator. Try it on your device!'
- );
- return;
- }
- /* @end */
- let { status } = await Location.requestForegroundPermissionsAsync();
- if (status !== 'granted') {
- setErrorMsg('Permission to access location was denied');
- return;
- }
-
- let location = await Location.getCurrentPositionAsync({});
- setLocation(location);
- }
-
- getCurrentLocation();
- }, []);
-
- let text = 'Waiting...';
- if (errorMsg) {
- text = errorMsg;
- } else if (location) {
- text = JSON.stringify(location);
- }
-
- return (
-
- {text}
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- padding: 20,
- },
- paragraph: {
- fontSize: 18,
- textAlign: 'center',
- },
-});
-```
-
-
-
-## Enable emulator location
-
-### Android Emulator
-
-Open Android Studio, and launch the Android Emulator. Inside it, go to **Settings** > **Location** and enable **Use location**.
-
-
-
-```tsx
-import { useRef, useEffect } from 'react';
-import { Button, StyleSheet, View } from 'react-native';
-import LottieView from 'lottie-react-native';
-
-export default function App() {
- const animation = useRef(null);
- useEffect(() => {
- // You can control the ref programmatically, rather than using autoPlay
- // animation.current?.play();
- }, []);
-
- return (
-
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- animationContainer: {
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- flex: 1,
- },
- buttonContainer: {
- paddingTop: 20,
- },
-});
-```
-
-
-
-## Learn more
-
-
-
-```jsx
-import { useState, useEffect } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { Magnetometer } from 'expo-sensors';
-
-export default function Compass() {
- const [{ x, y, z }, setData] = useState({
- x: 0,
- y: 0,
- z: 0,
- });
- const [subscription, setSubscription] = useState(null);
-
- const _slow = () => Magnetometer.setUpdateInterval(1000);
- const _fast = () => Magnetometer.setUpdateInterval(16);
-
- const _subscribe = () => {
- setSubscription(
- Magnetometer.addListener(result => {
- setData(result);
- })
- );
- };
-
- const _unsubscribe = () => {
- subscription && subscription.remove();
- setSubscription(null);
- };
-
- useEffect(() => {
- _subscribe();
- return () => _unsubscribe();
- }, []);
-
- return (
-
- Magnetometer:
- x: {x}
- y: {y}
- z: {z}
-
-
- {subscription ? 'On' : 'Off'}
-
-
- Slow
-
-
- Fast
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- paddingHorizontal: 10,
- },
- text: {
- textAlign: 'center',
- },
- buttonContainer: {
- flexDirection: 'row',
- alignItems: 'stretch',
- marginTop: 15,
- },
- button: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#eee',
- padding: 10,
- },
- middleButton: {
- borderLeftWidth: 1,
- borderRightWidth: 1,
- borderColor: '#ccc',
- },
-});
-```
-
-
-
-## API
-
-```js
-import { Magnetometer, MagnetometerUncalibrated } from 'expo-sensors';
-```
-
-
-
-```jsx
-import React from 'react';
-import MapView from 'react-native-maps';
-import { StyleSheet, View } from 'react-native';
-
-export default function App() {
- return (
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- },
- map: {
- width: '100%',
- height: '100%',
- },
-});
-```
-
-
-
-## Deploy app with Google Maps
-
-### Android
-
-> If you have already registered a project for another Google service on Android, such as Google Sign In, you enable the **Maps SDK for Android** on your project and jump to step 4.
-
-
-#### Register a Google Cloud API project and enable the Maps SDK for Android
-
-- Open your browser to the [Google API Manager](https://console.developers.google.com/apis) and create a project.
-- Once it's created, go to the project and enable the **Maps SDK for Android**.
-
-
-
-
-#### Copy your app's SHA-1 certificate fingerprint
-
-
-
-
-- **If you are deploying your app to the Google Play Store**, you'll need to [upload your app binary to Google Play console](/submit/android/) at least once. This is required for Google to generate your app signing credentials.
-- Go to the **[Google Play Console](https://play.google.com/console) > (your app) > Release > Setup > App integrity > App Signing**.
-- Copy the value of **SHA-1 certificate fingerprint**.
-
-
-
-
-
-- If you have already created a [development build](/develop/development-builds/introduction/), your project will be signed using a debug keystore.
-- After the build is complete, go to your [project's dashboard](https://expo.dev/accounts/[username]/projects/[project-name]), then, under **Configure** > click **Credentials**.
-- Under **Application Identifiers**, click your project's package name and under **Android Keystore** copy the value of **SHA-1 Certificate Fingerprint**.
-
-
-
-
-
-
-
-
-#### Create an API key
-
-- Go to [Google Cloud Credential manager](https://console.cloud.google.com/apis/credentials) and click **Create Credentials**, then **API Key**.
-- In the modal, click **Edit API key**.
-- Under **Key restrictions** > **Application restrictions**, choose **Android apps**.
-- Under **Restrict usage to your Android apps**, click **Add an item**.
-- Add your `android.package` from **app.json** (for example: `com.company.myapp`) to the package name field.
-- Then, add the **SHA-1 certificate fingerprint's** value from step 2.
-- Click **Done** and then click **Save**.
-
-
-
-
-#### Add the API key to your project
-
-- Copy your **API Key** into your project to either a **.env** file and then add it to your **app.json** under the `android.config.googleMaps.apiKey` field like or copy it:
-
- ```json
- {
- "android": {
- "config": {
- "googleMaps": {
- "apiKey": "process.env.GOOGLE_MAPS_API_KEY"
- }
- }
- }
- }
- ```
-
-- In your code, import `{ PROVIDER_GOOGLE }` from `react-native-maps` and add the property `provider={PROVIDER_GOOGLE}` to your ``. This property works on both Android and iOS.
-- Rebuild the app binary (or re-submit to the Google Play Store in case your app is already uploaded). An easy way to test if the configuration was successful is to do an [emulator build](/develop/development-builds/create-a-build/#create-a-development-build-for-emulatorsimulator).
-
-
-
-### iOS
-
-> If you have already registered a project for another Google service on iOS, such as Google Sign In, you enable the **Maps SDK for iOS** on your project and jump to step 3.
-
-
-#### Register a Google Cloud API project and enable the Maps SDK for iOS
-
-- Open your browser to the [Google API Manager](https://console.developers.google.com/apis) and create a project.
-- Then, go to the project, click **Enable APIs and Services** and enable the **Maps SDK for iOS**.
-
-
-
-
-#### Create an API key
-
-- Go to [Google Cloud Credential manager](https://console.cloud.google.com/apis/credentials) and click **Create Credentials**, then **API Key**.
-- In the modal, click **Edit API key**.
-- Under **Key restrictions** > **Application restrictions**, choose **iOS apps**.
-- Under **Accept requests from an iOS application with one of these bundle identifiers**, click the **Add an item** button.
-- Add your `ios.bundleIdentifier` from **app.json** (for example: `com.company.myapp`) to the bundle ID field.
-- Click **Done** and then click **Save**.
-
-
-
-
-#### Add the API key to your project
-
-- Copy your **API Key** into your project to either a **.env** file and then add it to your **app.json** under the `ios.config.googleMapsApiKey` field like or copy it:
-
- ```json
- {
- "ios": {
- "config": {
- "googleMapsApiKey": "process.env.GOOGLE_MAPS_API_KEY"
- }
- }
- }
- ```
-
-- In your code, import `{ PROVIDER_GOOGLE }` from `react-native-maps` and add the property `provider={PROVIDER_GOOGLE}` to your ``. This property works on both Android and iOS.
-- Rebuild the app binary. An easy way to test if the configuration was successful is to do a [simulator build](/develop/development-builds/create-a-build/#create-a-development-build-for-emulatorsimulator).
-
-
diff --git a/docs/pages/versions/v53.0.0/sdk/maps.mdx b/docs/pages/versions/v53.0.0/sdk/maps.mdx
deleted file mode 100644
index e4796b243cf964..00000000000000
--- a/docs/pages/versions/v53.0.0/sdk/maps.mdx
+++ /dev/null
@@ -1,196 +0,0 @@
----
-title: Maps
-description: A library that provides access to Google Maps on Android and Apple Maps on iOS.
-sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-53/packages/expo-maps'
-packageName: 'expo-maps'
-platforms: ['ios', 'android']
-iconUrl: '/static/images/packages/expo-maps.png'
-isAlpha: true
-hasVideoLink: true
----
-
-import APISection from '~/components/plugins/APISection';
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { AndroidPermissions, IOSPermissions } from '~/components/plugins/permissions';
-import { Collapsible } from '~/ui/components/Collapsible';
-import { ConfigPluginExample, ConfigPluginProperties } from '~/ui/components/ConfigSection';
-import { Step } from '~/ui/components/Step';
-import { Tabs, Tab } from '~/ui/components/Tabs';
-import { PlatformTag } from '~/ui/components/Tag/PlatformTag';
-import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
-
-> **important** **This library is currently in alpha and will frequently experience breaking changes.** It is not available in the Expo Go app – use [development builds](/develop/development-builds/introduction/) to try it out.
-
-## Installation
-
-
-
-
-> If you have already registered a project for another Google service on Android, such as Google Sign In, you enable the **Maps SDK for Android** on your project and jump to step 4.
-
-
-**Register a Google Cloud API project and enable the Maps SDK for Android**
-
-- Open your browser to the [Google API Manager](https://console.developers.google.com/apis) and create a project.
-- Once it's created, go to the project and enable the **Maps SDK for Android**.
-
-
-
-
-**Copy your app's SHA-1 certificate fingerprint**
-
-
-
-
-- **If you are deploying your app to the Google Play Store**, you'll need to [upload your app binary to Google Play console](/submit/android/) at least once. This is required for Google to generate your app signing credentials.
-- Go to the **[Google Play Console](https://play.google.com/console) > (your app) > Release > Setup > App integrity > App Signing**.
-- Copy the value of **SHA-1 certificate fingerprint**.
-
-
-
-
-
-- If you have already created a [development build](/develop/development-builds/introduction/), your project will be signed using a debug keystore.
-- After the build is complete, go to your [project's dashboard](https://expo.dev/accounts/[username]/projects/[project-name]), then, under **Project settings** > click **Credentials**.
-- Under **Application Identifiers**, click your project's package name and under **Android Keystore** copy the value of **SHA-1 Certificate Fingerprint**.
-
-
-
-
-
-
-
-
-**Create an API key**
-
-- Go to [Google Cloud Credential manager](https://console.cloud.google.com/apis/credentials) and click **Create Credentials**, then **API Key**.
-- In the modal, click **Edit API key**.
-- Under **Key restrictions** > **Application restrictions**, choose **Android apps**.
-- Under **Restrict usage to your Android apps**, click **Add an item**.
-- Add your `android.package` from **app.json** (for example: `com.company.myapp`) to the package name field.
-- Then, add the **SHA-1 certificate fingerprint's** value from step 2.
-- Click **Done** and then click **Save**.
-
-
-
-
-**Add the API key to your project**
-
-- Copy your **API Key** into your **app.json** under the `android.config.googleMaps.apiKey` field.
-- Create a new development build, and you can now use the Google Maps API on Android with `expo-maps`.
-
-
-
-
-
-## Permissions
-
-To display the user's location on the map, you need to declare and request location permission beforehand. You can configure this using its built-in [config plugin](/config-plugins/introduction/) if you use config plugins in your project ([Continuous Native Generation (CNG)](/workflow/continuous-native-generation/)). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does **not** use CNG, then you'll need to manually configure the library.
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-maps",
- {
- "requestLocationPermission": true,
- "locationPermission": "Allow $(PRODUCT_NAME) to use your location"
- }
- ]
- ]
- }
-}
-```
-
-
-
-Maps are only available on Android and iOS ;
- }
-}
-```
-
-## API
-
-```js
-import { AppleMaps, GoogleMaps } from 'expo-maps';
-
-// ApplesMaps.View and GoogleMaps.View are the React components
-```
-
-
-
-```json
-{
- "expo": {
- "plugins": [
- [
- "expo-media-library",
- {
- "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.",
- "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.",
- "isAccessMediaLocationEnabled": true
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using native **android** and **ios** projects manually, then you need to add following permissions and configuration to your native projects:
-
-**Android**
-
-- To access asset location (latitude and longitude EXIF tags), add `ACCESS_MEDIA_LOCATION` permission to your project's **android/app/src/main/AndroidManifest.xml**:
-
- ```xml
-
-
-
- ```
-
-**iOS**
-
-- Add `NSPhotoLibraryUsageDescription`, and `NSPhotoLibraryAddUsageDescription` keys to your project's **ios/[app]/Info.plist**:
-
- ```xml
- NSPhotoLibraryUsageDescription
- Give $(PRODUCT_NAME) permission to access your photos
- NSPhotoLibraryAddUsageDescription
- Give $(PRODUCT_NAME) permission to save photos
- ```
-
-
-
-## Usage
-
-
-
-{/* prettier-ignore */}
-```jsx
-import { useState, useEffect } from 'react';
-import { Button, Text, SafeAreaView, ScrollView, StyleSheet, Image, View, Platform } from 'react-native';
-import * as MediaLibrary from 'expo-media-library';
-
-export default function App() {
- const [albums, setAlbums] = useState(null);
- const [permissionResponse, requestPermission] = MediaLibrary.usePermissions();
-
- async function getAlbums() {
- if (permissionResponse.status !== 'granted') {
- await requestPermission();
- }
- const fetchedAlbums = await MediaLibrary.getAlbumsAsync({
- includeSmartAlbums: true,
- });
- setAlbums(fetchedAlbums);
- }
-
- return (
-
-
-
- {albums && albums.map((album) =>
-
- );
-}
-
-function AlbumEntry({ album }) {
- const [assets, setAssets] = useState([]);
-
- useEffect(() => {
- async function getAlbumAssets() {
- const albumAssets = await MediaLibrary.getAssetsAsync({ album });
- setAssets(albumAssets.assets);
- }
- getAlbumAssets();
- }, [album]);
-
- return (
-
-
- {album.title} - {album.assetCount ?? 'no'} assets
-
-
- {assets && assets.map((asset) => (
-
-
- );
-}
-
-/* @hide const styles = StyleSheet.create({ ... }); */
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- gap: 8,
- justifyContent: 'center',
- ...Platform.select({
- android: {
- paddingTop: 40,
- },
- }),
- },
- albumContainer: {
- paddingHorizontal: 20,
- marginBottom: 12,
- gap: 4,
- },
- albumAssetsContainer: {
- flexDirection: 'row',
- flexWrap: 'wrap',
- },
-});
-/* @end */
-````
-
-
-
-## API
-
-```js
-import * as MediaLibrary from 'expo-media-library';
-```
-
-
-Then proceed to [configuration](#configuration) to set up the [config plugin](#app-config) and -obtain the [credentials](#credentials) for push notifications. - -## Usage - -Check out the example Snack below to see Notifications in action, make sure to use a physical device to test it. Push notifications don't work on emulators/simulators. - -
-
-```tsx
-import { useState, useEffect } from 'react';
-import { Text, View, Button, Platform } from 'react-native';
-import * as Device from 'expo-device';
-import * as Notifications from 'expo-notifications';
-import Constants from 'expo-constants';
-
-Notifications.setNotificationHandler({
- handleNotification: async () => ({
- shouldPlaySound: false,
- shouldSetBadge: false,
- shouldShowBanner: true,
- shouldShowList: true,
- }),
-});
-
-export default function App() {
- const [expoPushToken, setExpoPushToken] = useState('');
- const [channels, setChannels] = useState([]);
- const [notification, setNotification] = useState(
- undefined
- );
-
- useEffect(() => {
- registerForPushNotificationsAsync().then(token => token && setExpoPushToken(token));
-
- if (Platform.OS === 'android') {
- Notifications.getNotificationChannelsAsync().then(value => setChannels(value ?? []));
- }
- const notificationListener = Notifications.addNotificationReceivedListener(notification => {
- setNotification(notification);
- });
-
- const responseListener = Notifications.addNotificationResponseReceivedListener(response => {
- console.log(response);
- });
-
- return () => {
- notificationListener.remove();
- responseListener.remove();
- };
- }, []);
-
- return (
-
- Your expo push token: {expoPushToken}
- {`Channels: ${JSON.stringify(
- channels.map(c => c.id),
- null,
- 2
- )}`}
-
- Title: {notification && notification.request.content.title}
- Body: {notification && notification.request.content.body}
- Data: {notification && JSON.stringify(notification.request.content.data)}
-
-
- );
-}
-
-async function schedulePushNotification() {
- await Notifications.scheduleNotificationAsync({
- content: {
- title: "You've got mail! 📬",
- body: 'Here is the notification body',
- data: { data: 'goes here', test: { test1: 'more data' } },
- },
- trigger: {
- type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL,
- seconds: 2,
- },
- });
-}
-
-async function registerForPushNotificationsAsync() {
- let token;
-
- if (Platform.OS === 'android') {
- await Notifications.setNotificationChannelAsync('myNotificationChannel', {
- name: 'A channel is needed for the permissions prompt to appear',
- importance: Notifications.AndroidImportance.MAX,
- vibrationPattern: [0, 250, 250, 250],
- lightColor: '#FF231F7C',
- });
- }
-
- if (Device.isDevice) {
- const { status: existingStatus } = await Notifications.getPermissionsAsync();
- let finalStatus = existingStatus;
- if (existingStatus !== 'granted') {
- const { status } = await Notifications.requestPermissionsAsync();
- finalStatus = status;
- }
- if (finalStatus !== 'granted') {
- alert('Failed to get push token for push notification!');
- return;
- }
- // Learn more about projectId:
- // https://docs.expo.dev/push-notifications/push-notifications-setup/#configure-projectid
- // EAS projectId is used here.
- try {
- const projectId =
- Constants?.expoConfig?.extra?.eas?.projectId ?? Constants?.easConfig?.projectId;
- if (!projectId) {
- throw new Error('Project ID not found');
- }
- token = (
- await Notifications.getExpoPushTokenAsync({
- projectId,
- })
- ).data;
- console.log(token);
- } catch (e) {
- token = `${e}`;
- }
- } else {
- alert('Must use physical device for Push Notifications');
- }
-
- return token;
-}
-```
-
-
-
-### Present a local (in-app) notification to the user
-
-```ts
-import * as Notifications from 'expo-notifications';
-
-// First, set the handler that will cause the notification
-// to show the alert
-Notifications.setNotificationHandler({
- handleNotification: async () => ({
- shouldShowBanner: true,
- shouldShowList: true,
- shouldPlaySound: false,
- shouldSetBadge: false,
- }),
-});
-
-// Second, call scheduleNotificationAsync()
-Notifications.scheduleNotificationAsync({
- content: {
- title: 'Look at that notification',
- body: "I'm so proud of myself!",
- },
- trigger: null,
-});
-```
-
-### Handle push notifications with navigation
-
-If you'd like to deep link to a specific screen in your app when you receive a push notification, you can configure either of Expo's navigation systems to do that.
-
-
-
-
-
-You can use Expo Router's [built-in deep linking](/router/basics/core-concepts/#2-all-pages-have-a-url) to handle incoming URLs from push notifications. Simply configure the root layout to listen for incoming and initial notification events.
-
-```tsx app/_layout.tsx
-import { useEffect } from 'react';
-import * as Notifications from 'expo-notifications';
-import { router } from 'expo-router';
-
-function useNotificationObserver() {
- useEffect(() => {
- let isMounted = true;
-
- function redirect(notification: Notifications.Notification) {
- const url = notification.request.content.data?.url;
- if (url) {
- /* @info Push the URL. You may want to verify the format before navigating. */
- router.push(url);
- /* @end */
- }
- }
-
- /* @info Handle the initial push notification. */
- Notifications.getLastNotificationResponseAsync() /* @end */
- .then(response => {
- if (!isMounted || !response?.notification) {
- return;
- }
- redirect(response?.notification);
- });
-
- /* @info Listen for runtime notifications. */
- const subscription = Notifications.addNotificationResponseReceivedListener(response => {
- /* @end */
- redirect(response.notification);
- });
-
- return () => {
- isMounted = false;
- subscription.remove();
- };
- }, []);
-}
-
-export default function Layout() {
- /* @info Observe at the root. Ensure this layout never returns **null** or the navigation will go unhandled. */
- useNotificationObserver();
- /* @end */
-
- return
-
-
-
-React Navigation's manual [linking configuration](https://reactnavigation.org/docs/navigation-container#linking) can be configured to handle incoming redirects from push notifications:
-
-```tsx App.tsx
-import React from 'react';
-import { Linking } from 'react-native';
-import * as Notifications from 'expo-notifications';
-import { NavigationContainer } from '@react-navigation/native';
-
-export default function App() {
- return (
- listener(url);
-
- // Listen to incoming links from deep linking
- const eventListenerSubscription = Linking.addEventListener('url', onReceiveURL);
-
- // Listen to expo push notifications
- const subscription = Notifications.addNotificationResponseReceivedListener(response => {
- const url = response.notification.request.content.data.url;
-
- // Any custom logic to see whether the URL needs to be handled
- //...
-
- // Let React Navigation handle the URL
- listener(url);
- });
-
- return () => {
- // Clean up the event listeners
- eventListenerSubscription.remove();
- subscription.remove();
- };
- },
- }}>
- {/* Your app content */}
-
- );
-}
-```
-
-See more details on [React Navigation documentation](https://reactnavigation.org/docs/deep-linking/#third-party-integrations).
-
-
-
-
-
-## Configuration
-
-### Credentials
-
-Follow the [setup guide](/push-notifications/push-notifications-setup/#get-credentials-for-development-builds).
-
-### App config
-
-To configure `expo-notifications`, use the built-in [config plugin](/config-plugins/introduction/) in the app config (**app.json** or **app.config.js**) for [EAS Build](/build/introduction) or with `npx expo run:[android|ios]`. The plugin allows you to configure the following properties that cannot be set at runtime and require building a new app binary to take effect:
-
-
-
-Learn how to configure the native projects in the [installation instructions in the `expo-notifications` repository](https://github.com/expo/expo/tree/main/packages/expo-notifications#installation-in-bare-react-native-projects).
-
-
-
-## Permissions
-
-### Android
-
-- On Android, this module requires permission to subscribe to the device boot. It's used to set up scheduled notifications when the device (re)starts.
- The `RECEIVE_BOOT_COMPLETED` permission is added automatically through the library's **AndroidManifest.xml**.
-
-- Starting from Android 12 (API level 31), to schedule a notification that triggers at an exact time, you need to add
- `
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using a native iOS project, then you'll need to add the following to your **Expo.plist** file:
-
-```xml ios/project-name/Supporting/Expo.plist
-UIBackgroundModes
-
- remote-notification
-
-```
-
-
-
-## Additional information
-
-### Set custom notification sounds
-
-To add custom push notification sounds to your app, add the `expo-notifications` plugin to your **app.json** file and then under the `sounds` key, provide an array of local paths to sound files that can be used as custom notification sounds. These local paths are local to your project.
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-notifications",
- {
- "sounds": ["local/path/to/mySoundFile.wav"]
- }
- ]
- ]
- }
-}
-```
-
-After building your app, the array of files will be available for use in both [`NotificationContentInput`](#notificationcontentinput) and [`NotificationChannelInput`](#notificationchannelinput).
-You only need to provide the base filename. Here's an example using the config above:
-
-```ts
-await Notifications.setNotificationChannelAsync('new_emails', {
- name: 'E-mail notifications',
- importance: Notifications.AndroidImportance.HIGH,
- sound: 'mySoundFile.wav', // Provide ONLY the base filename
-});
-
-await Notifications.scheduleNotificationAsync({
- content: {
- title: "You've got mail! 📬",
- sound: 'mySoundFile.wav', // Provide ONLY the base filename
- },
- trigger: {
- type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL,
- seconds: 2,
- channelId: 'new_emails',
- },
-});
-```
-
-You can also manually add notification files to your Android and iOS projects if you prefer:
-
-
-
-On Androids 8.0+, playing a custom sound for a notification requires more than setting the `sound` property on the `NotificationContentInput`.
-You will also need to configure the `NotificationChannel` with the appropriate `sound`, and use it when sending/scheduling the notification.
-
-For the example below to work, you would place your **email_sound.wav** file in **android/app/src/main/res/raw/**.
-
-```ts
-// Prepare the notification channel
-await Notifications.setNotificationChannelAsync('new_emails', {
- name: 'E-mail notifications',
- importance: Notifications.AndroidImportance.HIGH,
- sound: 'email_sound.wav', // <- for Android 8.0+, see channelId property below
-});
-
-// Eg. schedule the notification
-await Notifications.scheduleNotificationAsync({
- content: {
- title: "You've got mail! 📬",
- body: 'Open the notification to read them all',
- sound: 'email_sound.wav', // <- for Android below 8.0
- },
- trigger: {
- type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL,
- seconds: 2,
- channelId: 'new_emails', // <- for Android 8.0+, see definition above
- },
-});
-```
-
-
-
-
-
-On iOS, all that's needed is to place your sound file in your Xcode project (see the screenshot below),
-and then specify the sound file in your `NotificationContentInput`, like this:
-
-```ts
-await Notifications.scheduleNotificationAsync({
- content: {
- title: "You've got mail! 📬",
- body: 'Open the notification to read them all',
- sound: 'notification.wav',
- },
- trigger: {
- // ...
- },
-});
-```
-
-
-
-### Push notification payload specification
-
-See [Message request format](/push-notifications/sending-notifications/#message-request-format).
-
-### Manage notification categories for interactive notifications
-
-Notification categories allow you to create interactive push notifications, so that a user can respond directly to the incoming notification
-either via buttons or a text response. A category defines the set of actions a user can take, and then those actions are applied to a notification
-by specifying the `categoryIdentifier` in the [`NotificationContent`](#notificationcontent).
-
-
-
-```jsx
-import { useState, useEffect } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { Pedometer } from 'expo-sensors';
-
-export default function App() {
- const [isPedometerAvailable, setIsPedometerAvailable] = useState('checking');
- const [pastStepCount, setPastStepCount] = useState(0);
- const [currentStepCount, setCurrentStepCount] = useState(0);
-
- const subscribe = async () => {
- const isAvailable = await Pedometer.isAvailableAsync();
- setIsPedometerAvailable(String(isAvailable));
-
- if (isAvailable) {
- const end = new Date();
- const start = new Date();
- start.setDate(end.getDate() - 1);
-
- const pastStepCountResult = await Pedometer.getStepCountAsync(start, end);
- if (pastStepCountResult) {
- setPastStepCount(pastStepCountResult.steps);
- }
-
- return Pedometer.watchStepCount(result => {
- setCurrentStepCount(result.steps);
- });
- }
- };
-
- useEffect(() => {
- const subscription = subscribe();
- return () => subscription && subscription.remove();
- }, []);
-
- return (
-
- Pedometer.isAvailableAsync(): {isPedometerAvailable}
- Steps taken in the last 24 hours: {pastStepCount}
- Walk! And watch this go up: {currentStepCount}
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- marginTop: 15,
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
-```
-
-
-
-## API
-
-```js
-import { Pedometer } from 'expo-sensors';
-```
-
-
-
-```jsx
-import { useState } from 'react';
-import { View, StyleSheet, Button, Platform, Text } from 'react-native';
-import * as Print from 'expo-print';
-import { shareAsync } from 'expo-sharing';
-
-const html = `
-
-
-
-
-
- 
-
-
-`;
-
-export default function App() {
- const [selectedPrinter, setSelectedPrinter] = useState();
-
- const print = async () => {
- // On iOS/android prints the given html. On web prints the HTML from the current page.
- /* @info */ await Print.printAsync({
- html,
- printerUrl: selectedPrinter?.url, // iOS only
- }); /* @end */
- };
-
- const printToFile = async () => {
- // On iOS/android prints the given html. On web prints the HTML from the current page.
- /* @info */ const { uri } = await Print.printToFileAsync({ html }); /* @end */
- console.log('File has been saved to:', uri);
- await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf' });
- };
-
- const selectPrinter = async () => {
- /* @info */ const printer = await Print.selectPrinterAsync(); // iOS only
- /* @end */
- setSelectedPrinter(printer);
- };
-
- return (
-
-
- {`Selected printer: ${selectedPrinter.name}`}
- ) : undefined}
-
- )}
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- backgroundColor: '#ecf0f1',
- flexDirection: 'column',
- padding: 8,
- },
- spacer: {
- height: 8,
- },
- printer: {
- textAlign: 'center',
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Print from 'expo-print';
-```
-
-
-
- `;
-
- await printAsync({ html });
- } catch (error) {
- console.error('Error:', error);
- }
- }
-
- generateAndPrint();
- }, [context]);
-
- return <>{/* Render UI */};
-}
-```
-
-## Page margins
-
-**On iOS** you can set the page margins using the `margins` option:
-
-```js
-const { uri } = await Print.printToFileAsync({
- html: 'This page is printed with margins',
- margins: {
- left: 20,
- top: 50,
- right: 20,
- bottom: 100,
- },
-});
-```
-
-If `useMarkupFormatter` is set to `true`, setting margins may cause a blank page to appear at the end of your printout. To prevent this, make sure your HTML string is a well-formed document, including `` at the beginning of the string.
-
-**On Android**, if you're using `html` option in `printAsync` or `printToFileAsync`, the resulting print might contain page margins (it depends on the WebView engine).
-They are set by `@page` style block and you can override them in your HTML code:
-
-```html
-
-```
-
-See [`@page` documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@page) for more details.
diff --git a/docs/pages/versions/v53.0.0/sdk/reanimated.mdx b/docs/pages/versions/v53.0.0/sdk/reanimated.mdx
deleted file mode 100644
index b6119e52cd23b4..00000000000000
--- a/docs/pages/versions/v53.0.0/sdk/reanimated.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: react-native-reanimated
-description: A library that provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.
-sourceCodeUrl: 'https://github.com/software-mansion/react-native-reanimated'
-packageName: react-native-reanimated
-platforms: ['android', 'ios', 'tvos', 'web', 'expo-go']
-inExpoGo: true
----
-
-import { BookOpen02Icon } from '@expo/styleguide-icons/outline/BookOpen02Icon';
-
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { SnackInline } from '~/ui/components/Snippet';
-
-[`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.
-
-> **Reanimated uses React Native APIs that are incompatible with "Remote JS Debugging" for JavaScriptCore**. To use a debugger with your app with `react-native-reanimated`, you'll need to use the [Hermes JavaScript engine](/guides/using-hermes) and the [JavaScript Inspector for Hermes](/guides/using-hermes#javascript-inspector-for-hermes).
-
-## Installation
-
-
- -No additional configuration is required. [Reanimated Babel plugin](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#reanimated-babel-plugin) is automatically configured in [`babel-preset-expo`](https://www.npmjs.com/package/babel-preset-expo) when you install the library. - -## Usage - -The following example shows how to use the `react-native-reanimated` library to create a simple animation. - -
-
-{/* prettier-ignore */}
-```jsx
-import Animated, {
- useSharedValue,
- withTiming,
- useAnimatedStyle,
- Easing,
-} from 'react-native-reanimated';
-import { View, Button, StyleSheet } from 'react-native';
-
-export default function AnimatedStyleUpdateExample() {
- const randomWidth = useSharedValue(10);
-
- const config = {
- duration: 500,
- easing: Easing.bezier(0.5, 0.01, 0, 1),
- };
-
- const style = useAnimatedStyle(() => {
- return {
- width: withTiming(randomWidth.value, config),
- };
- });
-
- return (
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- },
- box: {
- width: 100,
- height: 80,
- backgroundColor: 'black',
- margin: 30,
- },
-});
-```
-
-
-
-## Learn more
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": ["expo-router"]
- }
-}
-```
-
-
-
-## Usage
-
-For information about using `expo-router/ui` in Custom tab layouts guide:
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": ["expo-router"]
- }
-}
-```
-
-
-
-## Usage
-
-For information core concepts, notation patterns, navigation layouts, and common navigation patterns, start with Router 101 section:
-
-
-
-`SafeAreaView` is a regular `View` component with the safe area edges applied as padding.
-
-If you set your own padding on the view, it will be added to the padding from the safe area.
-
-> **info** If you are targeting web, you must set up `SafeAreaProvider` as described in the [Context](#context) section.
-
-```jsx
-import { SafeAreaView } from 'react-native-safe-area-context';
-
-function SomeComponent() {
- return (
-
-
- );
-}
-```
-
-
-
-{/* prettier-ignore */}
-
- {'Optional\u2002•\u2002Type: '}
-
-
-
- -Sets the edges to apply the safe area insets to. - -
-
-
-
-
- {'Optional\u2002•\u2002Type: '}
-
-
- -On iOS 10+, emulate the safe area using the status bar height and home indicator sizes. - -
-
-
-## Hooks
-
-
-
-Hook gives you direct access to the safe area insets. This is a more advanced use-case, and might perform worse than `SafeAreaView` when rotating the device.
-
-
-
-## Types
-
-
-
-String union of possible edges.
-
-Acceptable values are: `'top'`, `'right'`, `'bottom'`, `'left'`.
-
-
-
-
-
-Represent the hook result.
-
-
-
-## Guides
-
-### Context
-
-To use safe area context, you need to add `SafeAreaProvider` in your app root component.
-
-> You may need to add it in other places too, including at the root of any modals any routes when using `react-native-screen`.
-
-```jsx
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-
-function App() {
- return ... ;
-}
-```
-
-Then, you can use [`useSafeAreaInsets()`](#usesafeareainsets) hook and also consumer API to access inset data:
-
-```jsx
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
-
-function Component() {
- return (
-
- {insets =>
- );
-}
-```
-
-### Optimization
-
-If you can, use `SafeAreaView`. It's implemented natively so when rotating the device, there is no delay from the asynchronous bridge.
-
-To speed up the initial render, you can import `initialWindowMetrics` from this package and set as the `initialMetrics` prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using `react-native-navigation`.
-
-```jsx
-import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
-
-function App() {
- return ... ;
-}
-```
-
-### Web SSR
-
-If you are doing server side rendering on the web, you can use `initialSafeAreaInsets` to inject values based on the device the user has, or simply pass zero. Otherwise, insets measurement will break rendering your page content since it is async.
-
-### Migrating from CSS
-
-#### Before
-
-In a web-only app, you would use CSS environment variables to get the size of the screen's safe area insets.
-
-```css styles.css
-div {
- padding-top: env(safe-area-inset-top);
- padding-left: env(safe-area-inset-left);
- padding-bottom: env(safe-area-inset-bottom);
- padding-right: env(safe-area-inset-right);
-}
-```
-
-#### After
-
-Universally, the hook `useSafeAreaInsets()` can provide access to this information.
-
-```jsx App.js
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-function App() {
- const insets = useSafeAreaInsets();
- return (
-
-
-```jsx
-import { usePreventScreenCapture } from 'expo-screen-capture';
-import { Text, View } from 'react-native';
-
-export default function ScreenCaptureExample() {
- usePreventScreenCapture();
-
- return (
-
- As long as this component is mounted, this screen is unrecordable!
-
- );
-}
-```
-
-
-
-### Example: Blocking screen capture imperatively
-
-
-
-```jsx
-import * as ScreenCapture from 'expo-screen-capture';
-import { useEffect } from 'react';
-import { Button, StyleSheet, View } from 'react-native';
-
-export default function ScreenCaptureExample() {
- const activate = async () => {
- await ScreenCapture.preventScreenCaptureAsync();
- };
-
- const deactivate = async () => {
- await ScreenCapture.allowScreenCaptureAsync();
- };
-
- return (
-
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
-```
-
-
-
-### Example: Callback for screen capture
-
-
-
-```jsx
-import * as ScreenCapture from 'expo-screen-capture';
-import { useEffect } from 'react';
-import { Button, StyleSheet, View } from 'react-native';
-
-export default function useScreenCaptureCallback() {
- // Only use this if you add the READ_MEDIA_IMAGES permission to your AndroidManifest.xml
- const hasPermissions = async () => {
- const { status } = await ScreenCapture.requestPermissionsAsync();
- return status === 'granted';
- };
-
- useEffect(() => {
- let subscription;
-
- const addListenerAsync = async () => {
- if (await hasPermissions()) {
- subscription = ScreenCapture.addScreenshotListener(() => {
- alert('Thanks for screenshotting my beautiful app 😊');
- });
- } else {
- console.error('Permissions needed to subscribe to screenshot events are missing!');
- }
- };
- addListenerAsync();
-
- return () => {
- subscription?.remove();
- };
- }, []);
-}
-```
-
-
-
-## API
-
-```js
-import * as ScreenCapture from 'expo-screen-capture';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "ios": {
- "requireFullScreen": true
- },
- "plugins": [
- [
- "expo-screen-orientation",
- {
- "initialOrientation": "DEFAULT"
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-1. Open the **ios** directory in Xcode with `xed ios`. If you don't have the directory, run `npx expo prebuild -p ios` to generate one.
-2. Tick the `Requires Full Screen` checkbox in Xcode. It should be located under **Project Target** > **General** > **Deployment Info**.
-
-
-
-## API
-
-```js
-import * as ScreenOrientation from 'expo-screen-orientation';
-```
-
-` components To better take advantage of operating system behavior and optimizations around screens. This capability is used by library authors and is unlikely to be used directly by most app developers. It also provides the native components needed for React Navigation's [`createNativeStackNavigator`](https://reactnavigation.org/docs/native-stack-navigator).
-
-## Installation
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-secure-store",
- {
- "configureAndroidBackup": true,
- "faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-Add `NSFaceIDUsageDescription` key to **Info.plist**:
-
-```xml Info.plist
-NSFaceIDUsageDescription
-Allow $(PRODUCT_NAME) to access your Face ID biometric data.
-```
-
-
-
-## Platform value storage
-
-### Android
-
-On Android, values are stored in [`SharedPreferences`](https://developer.android.com/training/data-storage/shared-preferences), encrypted with [Android's Keystore system](https://developer.android.com/training/articles/keystore.html).
-
-### iOS
-
-> For iOS standalone apps, data stored with `expo-secure-store` can persist across app installs.
-
-On iOS, values are stored using the [keychain services](https://developer.apple.com/documentation/security/keychain_services) as `kSecClassGenericPassword`. iOS has the additional option of being able to set the value's `kSecAttrAccessible` attribute, which controls when the value is available to be fetched.
-
-## Data persistence
-
-`expo-secure-store` is designed to provide a persistent data storage solution across app restarts and updates. However, it is important not to rely on it as a single source of truth for irreplaceable, critical data. Data saved using `expo-secure-store` will not be preserved upon app uninstallation.
-Additionally, any data protected with the `requireAuthentication` option set to `true` will become inaccessible if there are changes to the user's biometric settings, such as adding a new fingerprint.
-
-#### Exempting encryption prompt
-
-Apple App Store Connect prompts you to select the type of encryption algorithm your app implements. This is known as **Export Compliance Information**. It is asked when publishing the app or submitting for TestFlight.
-
-When using `expo-secure-store`, you can set the [`ios.config.usesNonExemptEncryption`](../config/app/#usesnonexemptencryption) property to `false` in the app config:
-
-{/* prettier-ignore */}
-```json app.json
-{
- "expo": {
- "ios": {
- "config": {
- "usesNonExemptEncryption": false
- }
- /* @hide ... */ /* @end */
- }
- }
-}
-```
-
-Setting this property automatically handles the compliance information prompt.
-
-## Android Auto Backup
-
-[Android Auto Backup for Apps](https://developer.android.com/identity/data/autobackup) automatically backs up a user's data from apps that target and run on Android 6.0 (API level 23) or higher.
-
-The Auto Backup system has to be configured to exclude `expo-secure-store` shared preferences entries, as it's impossible to decrypt them after restoring the backup — app's entries are deleted from the Android Key Store when the app is uninstalled.
-
-If your app doesn't have any custom backup configuration, `expo-secure-store` will automatically configure the Auto Backup system to ignore the `expo-secure-store` data.
-
-If you are using your own Auto Backup configuration, you should exclude the `SecureStore` under the `sharedpref` domain and set the `configureAndroidBackup` to `false` in the [config plugin configuration](#example-appjson-with-config-plugin).
-
-```xml
-
-
-
-
-
-
-
-```
-
-```xml
-
-
-
-```
-
-## Usage
-
-
-
-```jsx
-import { useState } from 'react';
-import { Text, View, StyleSheet, TextInput, Button } from 'react-native';
-import * as SecureStore from 'expo-secure-store';
-
-async function save(key, value) {
- await SecureStore.setItemAsync(key, value);
-}
-
-async function getValueFor(key) {
- let result = await SecureStore.getItemAsync(key);
- if (result) {
- alert("🔐 Here's your value 🔐 \n" + result);
- } else {
- alert('No values stored under that key.');
- }
-}
-
-export default function App() {
- const [key, onChangeKey] = useState('Your key here');
- const [value, onChangeValue] = useState('Your value here');
-
- return (
-
- Save an item, and grab it later!
- {/* @hide Add some TextInput components... */}
-
- onChangeKey(text)}
- value={key}
- />
- onChangeValue(text)}
- value={value}
- />
- {/* @end */}
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- paddingTop: 10,
- backgroundColor: '#ecf0f1',
- padding: 8,
- },
- paragraph: {
- marginTop: 34,
- margin: 24,
- fontSize: 18,
- fontWeight: 'bold',
- textAlign: 'center',
- },
- textInput: {
- height: 35,
- borderColor: 'gray',
- borderWidth: 0.5,
- padding: 4,
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as SecureStore from 'expo-secure-store';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-sensors",
- {
- "motionPermission": "Allow $(PRODUCT_NAME) to access your device motion"
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) or you're using native **android** project manually, add `HIGH_SAMPLING_RATE_SENSORS` permission to your project's **android/app/src/main/AndroidManifest.xml**:
-
-```xml
-
-
-### iOS
-
-The following usage description keys are used by this library:
-
-
-
-```jsx
-import { View, StyleSheet, Button } from 'react-native';
-import * as Speech from 'expo-speech';
-
-export default function App() {
- const speak = () => {
- const thingToSay = '1';
- Speech.speak(thingToSay);
- };
-
- return (
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- backgroundColor: '#ecf0f1',
- padding: 8,
- },
-});
-```
-
-
-
-## API
-
-```js
-import * as Speech from 'expo-speech';
-```
-
-
-
-
-
-```jsx app/_layout.tsx
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
-
-// Set the animation options. This is optional.
-SplashScreen.setOptions({
- duration: 1000,
- fade: true,
-});
-
-SplashScreen.preventAutoHideAsync();
-
-export default function RootLayout() {
- const [loaded] = useFonts({
- SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
- });
-
- useEffect(() => {
- if (loaded) {
- SplashScreen.hide();
- }
- }, [loaded]);
-
- if (!loaded) {
- return null;
- }
-
- return
-
-
-
-```jsx App.js
-import { useEffect } from 'react';
-import { Text, View } from 'react-native';
-import Entypo from '@expo/vector-icons/Entypo';
-import * as SplashScreen from 'expo-splash-screen';
-import * as Font from 'expo-font';
-
-// Keep the splash screen visible while we fetch resources
-SplashScreen.preventAutoHideAsync();
-
-// Set the animation options. This is optional.
-SplashScreen.setOptions({
- duration: 1000,
- fade: true,
-});
-
-export default function App() {
- const [loaded] = useFonts({
- SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
- });
-
- useEffect(() => {
- if (loaded) {
- SplashScreen.hideAsync();
- }
- }, [loaded]);
-
- if (!loaded) {
- return null;
- }
-
- return (
-
- SplashScreen Demo! 👋
-
- );
-}
-```
-
-
-
-
-
-## Configuration
-
-You can configure `expo-splash-screen` using its built-in [config plugin](/config-plugins/introduction/) if you use config plugins in your project ([Continuous Native Generation (CNG)](/workflow/continuous-native-generation/)). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does **not** use CNG, then you'll need to manually configure the library.
-
-**Using the config plugin, as shown below, is the recommended method for configuring the splash screen.** The other methods are now considered legacy and will be removed in the future.
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-splash-screen",
- {
- "backgroundColor": "#232323",
- "image": "./assets/splash-icon.png",
- "dark": {
- "image": "./assets/splash-icon-dark.png",
- "backgroundColor": "#000000"
- },
- "imageWidth": 200
- }
- ]
- ],
- }
-}
-```
-
-
-
-
-See how to configure the native projects in the [installation instructions in the `expo-splash-screen` repository](https://github.com/expo/expo/tree/main/packages/expo-splash-screen#-installation-in-bare-react-native-projects).
-
-
-
-### Animating the splash screen
-
-`SplashScreen` provides an out-of-the-box fade animation. It can be configured using the `setOptions` method.
-
-```js
-SplashScreen.setOptions({
- duration: 1000,
- fade: true,
-});
-```
-
-If you prefer to use custom animation, see the [`with-splash-screen`](https://github.com/expo/examples/tree/master/with-splash-screen) example on how to apply any arbitrary animations to your splash screen. You can initialize a new project from this example by running `npx create-expo-app --example with-splash-screen`.
-
-## API
-
-```js
-import * as SplashScreen from 'expo-splash-screen';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-sqlite",
- {
- "enableFTS": true,
- "useSQLCipher": true,
- "android": {
- // Override the shared configuration for Android
- "enableFTS": false,
- "useSQLCipher": false
- },
- "ios": {
- // You can also override the shared configurations for iOS
- "customBuildFlags": ["-DSQLITE_ENABLE_DBSTAT_VTAB=1 -DSQLITE_ENABLE_SNAPSHOT=1"]
- }
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-
-
- );
-}
-
-export function Header() {
- const db = useSQLiteContext();
- const [version, setVersion] = useState('');
- useEffect(() => {
- async function setup() {
- const result = await db.getFirstAsync<{ 'sqlite_version()': string }>(
- 'SELECT sqlite_version()'
- );
- setVersion(result['sqlite_version()']);
- }
- setup();
- }, []);
- return (
-
- SQLite version: {version}
-
- );
-}
-
-interface Todo {
- value: string;
- intValue: number;
-}
-
-export function Content() {
- const db = useSQLiteContext();
- const [todos, setTodos] = useState([]);
-
- useEffect(() => {
- async function setup() {
- const result = await db.getAllAsync('SELECT * FROM todos');
- setTodos(result);
- }
- setup();
- }, []);
-
- return (
-
- {todos.map((todo, index) => (
-
- {`${todo.intValue} - ${todo.value}`}
-
- ))}
-
- );
-}
-
-async function migrateDbIfNeeded(db: SQLiteDatabase) {
- const DATABASE_VERSION = 1;
- let { user_version: currentDbVersion } = await db.getFirstAsync<{ user_version: number }>(
- 'PRAGMA user_version'
- );
- if (currentDbVersion >= DATABASE_VERSION) {
- return;
- }
- if (currentDbVersion === 0) {
- await db.execAsync(`
-PRAGMA journal_mode = 'wal';
-CREATE TABLE todos (id INTEGER PRIMARY KEY NOT NULL, value TEXT NOT NULL, intValue INTEGER);
-`);
- await db.runAsync('INSERT INTO todos (value, intValue) VALUES (?, ?)', 'hello', 1);
- await db.runAsync('INSERT INTO todos (value, intValue) VALUES (?, ?)', 'world', 2);
- currentDbVersion = 1;
- }
- // if (currentDbVersion === 1) {
- // Add more migrations
- // }
- await db.execAsync(`PRAGMA user_version = ${DATABASE_VERSION}`);
-}
-
-const styles = StyleSheet.create({
- // Your styles...
-});
-```
-
-### `useSQLiteContext()` hook with `React.Suspense`
-
-As with the [`useSQLiteContext()`](#usesqlitecontext-hook) hook, you can also integrate the [`SQLiteProvider`](#sqliteprovider) with [`React.Suspense`](https://react.dev/reference/react/Suspense) to show a fallback component until the database is ready. To enable the integration, pass the `useSuspense` prop to the `SQLiteProvider` component.
-
-```tsx useSQLiteContext() hook with React.Suspense
-import { SQLiteProvider, useSQLiteContext } from 'expo-sqlite';
-import { Suspense } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-export default function App() {
- return (
-
-
-
-
-
- );
-}
-```
-
-### Executing queries within an async transaction
-
-```js Executing queries within an async transaction
-const db = await SQLite.openDatabaseAsync('databaseName');
-
-await db.withTransactionAsync(async () => {
- const result = await db.getFirstAsync('SELECT COUNT(*) FROM USERS');
- console.log('Count:', result.rows[0]['COUNT(*)']);
-});
-```
-
-Due to the nature of async/await, any query that runs while the transaction is active will be included in the transaction. This includes query statements that are outside of the scope function passed to `withTransactionAsync()` and may be surprising behavior. For example, the following test case runs queries inside and outside of a scope function passed to `withTransactionAsync()`. However, all of the queries will run within the actual SQL transaction because the second `UPDATE` query runs before the transaction finishes.
-
-```ts
-Promise.all([
- // 1. A new transaction begins
- db.withTransactionAsync(async () => {
- // 2. The value "first" is inserted into the test table and we wait 2
- // seconds
- await db.execAsync('INSERT INTO test (data) VALUES ("first")');
- await sleep(2000);
-
- // 4. Two seconds in, we read the latest data from the table
- const row = await db.getFirstAsync<{ data: string }>('SELECT data FROM test');
-
- // ❌ The data in the table will be "second" and this expectation will fail.
- // Additionally, this expectation will throw an error and roll back the
- // transaction, including the `UPDATE` query below since it ran within
- // the transaction.
- expect(row.data).toBe('first');
- }),
- // 3. One second in, the data in the test table is updated to be "second".
- // This `UPDATE` query runs in the transaction even though its code is
- // outside of it because the transaction happens to be active at the time
- // this query runs.
- sleep(1000).then(async () => db.execAsync('UPDATE test SET data = "second"')),
-]);
-```
-
-The [`withExclusiveTransactionAsync()`](#withexclusivetransactionasynctask) function addresses this. Only queries that run within the scope function passed to `withExclusiveTransactionAsync()` will run within the actual SQL transaction.
-
-### Executing PRAGMA queries
-
-```js Executing PRAGMA queries
-const db = await SQLite.openDatabaseAsync('databaseName');
-await db.execAsync('PRAGMA journal_mode = WAL');
-await db.execAsync('PRAGMA foreign_keys = ON');
-```
-
-> **info** **Tip:** Enable [WAL journal mode](https://www.sqlite.org/wal.html) when you create a new database to improve performance in general.
-
-### Import an existing database
-
-To open a new SQLite database using an existing **.db** file you already have, you can use the [`SQLiteProvider`](#sqliteprovider) with [`assetSource`](#assetsource).
-
-```tsx useSQLiteContext() with existing database
-import { SQLiteProvider, useSQLiteContext } from 'expo-sqlite';
-import { View, Text, StyleSheet } from 'react-native';
-
-export default function App() {
- return (
-
-
-
-
- );
-}
-```
-
-### Sharing a database between apps/extensions (iOS)
-
-To share a database with other apps/extensions in the same App Group, you can use shared containers by following the steps below:
-
-
-
-Configure the App Group in app config:
-
-```json app.json
-{
- "expo": {
- "ios": {
- "bundleIdentifier": "com.myapp",
- "entitlements": {
- "com.apple.security.application-groups": ["group.com.myapp"]
- }
- }
- }
-}
-```
-
-
-
-
-
-Use [`Paths.appleSharedContainers`](filesystem-next/#applesharedcontainers) from the [`expo-file-system`](filesystem-next/) library to retrieve the path to the shared container:
-
-```tsx Using Shared Container for SQLite Database on iOS
-import { SQLiteProvider, defaultDatabaseDirectory } from 'expo-sqlite';
-import { Paths } from 'expo-file-system/next';
-import { useMemo } from 'react';
-import { Platform, View } from 'react-native';
-
-export default function App() {
- const dbDirectory = useMemo(() => {
- if (Platform.OS === 'ios') {
- return Object.values(Paths.appleSharedContainers)?.[0]?.uri;
- // or `Paths.appleSharedContainers['group.com.myapp']?.uri` to choose specific container
- }
- return defaultDatabaseDirectory;
- }, []);
-
- return (
-
-
-
-
- );
-}
-```
-
-
-
-### Passing binary data
-
-Use [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) to pass binary data to the database:
-
-```ts Passing binary data
-await db.execAsync(`
-DROP TABLE IF EXISTS blobs;
-CREATE TABLE IF NOT EXISTS blobs (id INTEGER PRIMARY KEY NOT NULL, data BLOB);
-`);
-
-const blob = new Uint8Array([0x00, 0x01, 0x02, 0x03, 0x04, 0x05]);
-await db.runAsync('INSERT INTO blobs (data) VALUES (?)', blob);
-
-const row = await db.getFirstAsync<{ data: Uint8Array }>('SELECT * FROM blobs');
-expect(row.data).toEqual(blob);
-```
-
-### Browse an on-device database
-
-You can inspect a database, execute queries against it, and explore data with the [`drizzle-studio-expo` dev tools plugin](https://github.com/drizzle-team/drizzle-studio-expo). This plugin enables you to launch [Drizzle Studio](https://orm.drizzle.team/drizzle-studio/overview), connected to a database in your app, directly from Expo CLI. This plugin can be used with any `expo-sqlite` configuration. It does not require that you use [Drizzle ORM](#drizzle-orm) in your app. [Learn how to install and use the plugin](https://github.com/drizzle-team/drizzle-studio-expo).
-
-### Key-value storage
-
-The `expo-sqlite` library provides [`Storage`](#sqlitestorage) as a drop-in replacement for the [`@react-native-async-storage/async-storage`](https://github.com/react-native-async-storage/async-storage) library. This key-value store is backed by SQLite. If your project already uses `expo-sqlite`, you can leverage `expo-sqlite/kv-store` without needing to add another dependency.
-
-[`Storage`](#sqlitestorage) provides the same API as `@react-native-async-storage/async-storage`:
-
-```ts Using the Store
-// The storage API is the default export, you can call it Storage, AsyncStorage, or whatever you prefer.
-import Storage from 'expo-sqlite/kv-store';
-
-await Storage.setItem('key', JSON.stringify({ entity: 'value' }));
-const value = await Storage.getItem('key');
-const entity = JSON.parse(value);
-console.log(entity); // { entity: 'value' }
-```
-
-A key benefit of using `expo-sqlite/kv-store` is the addition of synchronous APIs for added convenience:
-
-```ts Using the Store with synchronous APIs
-// The storage API is the default export, you can call it Storage, AsyncStorage, or whatever you prefer.
-import Storage from 'expo-sqlite/kv-store';
-
-Storage.setItemSync('key', 'value');
-const value = Storage.getItemSync('key');
-```
-
-If you're currently using `@react-native-async-storage/async-storage` in your project, switching to `expo-sqlite/kv-store` is as simple as changing the import statement:
-
-```diff
-- import AsyncStorage from '@react-native-async-storage/async-storage';
-+ import AsyncStorage from 'expo-sqlite/kv-store';
-```
-
-## Third-party library integrations
-
-The `expo-sqlite` library is designed to be a solid SQLite foundation. It enables broader integrations with third-party libraries for more advanced higher-level features. Here are some of the libraries that you can use with `expo-sqlite`.
-
-### Drizzle ORM
-
-[Drizzle](https://orm.drizzle.team/) is a ["headless TypeScript ORM with a head"](https://orm.drizzle.team/docs/overview). It runs on Node.js, Bun, Deno, and React Native. It also has a CLI companion called [`drizzle-kit`](https://orm.drizzle.team/kit-docs/overview) for generating SQL migrations.
-
-Check out the [Drizzle ORM documentation](https://orm.drizzle.team/) and the [`expo-sqlite` integration guide](https://orm.drizzle.team/docs/get-started/expo-new) for more details.
-
-### Knex.js
-
-[Knex.js](https://knexjs.org/) is a SQL query builder that is ["flexible, portable, and fun to use!"](https://github.com/knex/knex)
-
-Check out the [`expo-sqlite` integration guide](https://github.com/expo/knex-expo-sqlite-dialect) for more details.
-
-## SQLCipher
-
-> **Note:** SQLCipher is not supported on [Expo Go](https://expo.dev/go).
-
-[SQLCipher](https://www.zetetic.net/sqlcipher/) is a fork of SQLite that adds encryption and authentication to the database. The `expo-sqlite` library supports SQLCipher for Android, iOS, and macOS. To use SQLCipher, you need to add the `useSQLCipher` config to your **app.json** as shown in the [Configuration in app config](#configuration-in-app-config) section and run `npx expo prebuild`.
-
-Right after you open a database, you need to set a password for the database using the `PRAGMA key = 'password'` statement.
-
-```ts Add a password to the database
-const db = await SQLite.openDatabaseAsync('databaseName');
-await db.execAsync(`PRAGMA key = 'password'`);
-```
-
-## API
-
-### Cheatsheet for the common API
-
-The following table summarizes the common API for [`SQLiteDatabase`](#sqlitedatabase) and [`SQLiteStatement`](#sqlitestatement) classes:
-
-| [`SQLiteDatabase`](#sqlitedatabase) methods | [`SQLiteStatement`](#sqlitestatement) methods | Description | Use Case |
-| ------------------------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [`runAsync()`](#runasyncsource-params) | [`executeAsync()`](#executeasyncparams) | Executes a SQL query, returning information on the changes made. | Ideal for SQL write operations such as `INSERT`, `UPDATE`, `DELETE`. |
-| [`getFirstAsync()`](#getfirstasyncsource-params) | [`executeAsync()`](#executeasyncparams) + [`getFirstAsync()`](#getfirstasync) | Retrieves the first row from the query result. | Suitable for fetching a single row from the database. For example: `getFirstAsync('SELECT * FROM Users WHERE id = ?', userId)`. |
-| [`getAllAsync()`](#getallasyncsource-params) | [`executeAsync()`](#executeasyncparams) + [`getFirstAsync()`](#getallasync) | Fetches all query results at once. | Best suited for scenarios with smaller result sets, such as queries with a LIMIT clause, like `SELECT * FROM Table LIMIT 100`, where you intend to retrieve all results in a single batch. |
-| [`getEachAsync()`](#geteachasyncsource-params) | [`executeAsync()`](#executeasyncparams) + `for-await-of` async iterator | Provides an iterator for result set traversal. This method fetches one row at a time from the database, potentially reducing memory usage compared to `getAllAsync()`. | Recommended for handling large result sets incrementally, such as with infinite scrolling implementations. |
-
-
-
-```jsx collapseHeight=310
-import { StyleSheet, Text, View } from 'react-native';
-import { StatusBar } from 'expo-status-bar';
-
-export default function App() {
- return (
-
- Notice that the status bar has light text!
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#000',
- alignItems: 'center',
- justifyContent: 'center',
- },
- text: {
- color: '#fff',
- },
-});
-```
-
-
-
-## API
-
-```js
-import { StatusBar } from 'expo-status-bar';
-```
-
-Svg
-
-A set of drawing primitives such as `Circle`, `Rect`, `Path`,
-`ClipPath`, and `Polygon`. It supports most SVG elements and properties.
-The implementation is provided by [react-native-svg](https://github.com/react-native-community/react-native-svg), and documentation is provided in that repository.
-
-
-
-```tsx
-import Svg, { Circle, Rect } from 'react-native-svg';
-
-export default function SvgComponent(props) {
- return (
-
- );
-}
-```
-
-
-
-### Tips
-
-Here are some helpful links that will get you moving fast!
-
-- Looking for SVGs? Try the [noun project](https://thenounproject.com/).
-- Create or modify your own SVGs for free using [Figma](https://www.figma.com/).
-- Optimize your SVG with [SVGOMG](https://jakearchibald.github.io/svgomg/). This will make the code smaller and easier to work with. Be sure not to remove the `viewbox` for best results on Android.
-- Convert your SVG to an Expo component in the browser using [SVGR](https://react-svgr.com/playground/?native=true&typescript=true).
-
-## Learn more
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
- symbol: {
- width: 35,
- height: 35,
- margin: 5,
- },
-});
-```
-
-## API
-
-```js
-import { SymbolView } from 'expo-symbols';
-```
-
-
- -> **info** You can test `TaskManager` in the Expo Go app. However, check the documentation of each [library](#libraries-using-expo-taskmanager) that uses `TaskManager` to confirm whether it supports testing in Expo Go. - -## Configuration
-
-```jsx
-import React from 'react';
-import { Button, View, StyleSheet } from 'react-native';
-import * as TaskManager from 'expo-task-manager';
-import * as Location from 'expo-location';
-
-const LOCATION_TASK_NAME = 'background-location-task';
-
-const requestPermissions = async () => {
- const { status: foregroundStatus } = await Location.requestForegroundPermissionsAsync();
- if (foregroundStatus === 'granted') {
- const { status: backgroundStatus } = await Location.requestBackgroundPermissionsAsync();
- if (backgroundStatus === 'granted') {
- await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
- accuracy: Location.Accuracy.Balanced,
- });
- }
- }
-};
-
-const PermissionsButton = () => (
-
-
-
-);
-
-TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
- if (error) {
- // Error occurred - check `error.message` for more details.
- return;
- }
- if (data) {
- const { locations } = data;
- // do something with the locations captured in the background
- }
-});
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
-
-export default PermissionsButton;
-```
-
-
-
-## API
-
-```js
-import * as TaskManager from 'expo-task-manager';
-```
-
-
-
-```json app.json
-{
- "expo": {
- "plugins": [
- [
- "expo-tracking-transparency",
- {
- "userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation/)) (you're using native **android** and **ios** projects manually), then you need to configure following permissions in your native projects:
-
-- For Android, add `com.google.android.gms.permission.AD_ID` permission to your project's **android/app/src/main/AndroidManifest.xml**.
-
- ```xml
- NSUserTrackingUsageDescription
- Your custom usage description string here.
- ```
-
-
-
-## Usage
-
-
-
-```jsx
-import { useEffect } from 'react';
-import { Text, StyleSheet, View } from 'react-native';
-import { requestTrackingPermissionsAsync } from 'expo-tracking-transparency';
-
-export default function App() {
- useEffect(() => {
- (async () => {
- const { status } = await requestTrackingPermissionsAsync();
- if (status === 'granted') {
- console.log('Yay! I have user permission to track data');
- }
- })();
- }, []);
-
- return (
-
- Tracking Transparency Module Example
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
-```
-
-
-
-## API
-
-```ts
-import * as ExpoTrackingTransparency from 'expo-tracking-transparency';
-```
-
-
-
-
-
-
-
-```tsx
-import { BottomSheet } from '@expo/ui/swift-ui';
-
- setIsOpened(e)}>
- Hello, world!
-
-```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:))*
-
-
-
-### Button
-
-
-
-
-
-```tsx
-import { Button } from '@expo/ui/swift-ui';
-
-
-```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/button)*
-
-
-
-### CircularProgress
-
-
-
-
-
- ```tsx
- import { CircularProgress } from '@expo/ui/swift-ui';
-
-
-
-
-### ColorPicker
-
-
-
-
-
-
-
-```tsx
-import { ColorPicker } from '@expo/ui/swift-ui';
-
-
-
-
-### ContextMenu
-
-> **Note:** Also known as **DropdownMenu**.
-
-
-
-
-
- ```tsx
- import { ContextMenu } from '@expo/ui/swift-ui';
-
-
-
-
-
- setSelectedIndex(index)}
- />
-
-
-
-
-
- ```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/contextmenu(menuitems:))*
-
-
-
-
-### DateTimePicker (date)
-
-
-
-
-
-```tsx
-import { DateTimePicker } from '@expo/ui/swift-ui';
-
- {
- setSelectedDate(date);
- }}
- displayedComponents='date'
- initialDate={selectedDate.toISOString()}
- variant='wheel'
-/>
-```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/datepicker)*
-
-
-
-### DateTimePicker (time)
-
-
-
-
-
- ```tsx
- import { DateTimePicker } from '@expo/ui/swift-ui';
-
- {
- setSelectedDate(date);
- }}
- displayedComponents='hourAndMinute'
- initialDate={selectedDate.toISOString()}
- variant='wheel'
- />
- ```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/datepicker)*
-
-
-
-
-### Gauge
-
-
-
-
-
-
-```tsx
-import { Gauge } from "@expo/ui/swift-ui";
-
-
-
-
-### LinearProgress
-
-
-
-
-
-```tsx
-import { LinearProgress } from '@expo/ui/swift-ui';
-
-
-
-
-### List
-
-
-
-
-
- ```tsx
- import { List } from '@expo/ui/swift-ui';
-
-
-
-
-### Picker (segmented)
-
-
-
-
-
-```tsx
-import { Picker } from '@expo/ui/swift-ui';
-
- {
- setSelectedIndex(index);
- }}
- variant="segmented"
- />
- ```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/picker#Styling-pickers)*
-
-
-
-### Picker (wheel)
-
-
-
-
-
-```tsx
-import { Picker } from '@expo/ui/swift-ui';
-
- {
- setSelectedIndex(index);
- }}
- variant="wheel"
- style={{
- height: 100,
- }}
-/>
-```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/pickerstyle/wheel)*
-
-
-
-### Slider
-
-
-
-
-
- ```tsx
- import { Slider } from '@expo/ui/swift-ui';
-
- {
- setValue(value);
- }}
- />
- ```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/slider)*
-
-
-
-
-### Switch (toggle)
-
-> **Note:** Also known as **Toggle**.
-
-
-
-
-
-```tsx
-import { Switch } from '@expo/ui/swift-ui';
-
- {
- setChecked(checked);
- }}
- color="#ff0000"
- label="Play music"
- variant="switch"
-/>
-```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/toggle)*
-
-
-
-### Switch (checkbox)
-
-
-
-
-
-```tsx
-import { Switch } from '@expo/ui/swift-ui';
-
- {
- setChecked(checked);
- }}
- label="Play music"
- variant="checkbox"
-/>
-```
- *See also: [official SwiftUI documentation](https://developer.apple.com/documentation/swiftui/toggle)*
-
-
-
-### TextInput
-
-
-
-
-
- ```tsx
- import { TextInput } from '@expo/ui/swift-ui';
-
-
-
-
-## Jetpack Compose examples
-
-### Button
-
-
-
-
-
-```tsx
-import { Button } from '@expo/ui/jetpack-compose';
-
-
-```
-*See also: [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/button)*
-
-
-
-### CircularProgress
-
-
-
-
-
- ```tsx
- import { CircularProgress } from '@expo/ui/jetpack-compose';
-
-
-
-
-### ContextMenu
-
-> **Note:** Also known as **DropdownMenu**.
-
-
-
-
-
- ```tsx
- import { ContextMenu } from '@expo/ui/jetpack-compose';
-
-
-
-
-
- setSelectedIndex(index)}
- />
-
-
-
-
-
- ```
- *See also: [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/menu)*
-
-
-
-
-### DateTimePicker (date)
-
-
-
-
-
-```tsx
-import { DateTimePicker } from '@expo/ui/jetpack-compose';
-
- {
- setSelectedDate(date);
- }}
- displayedComponents='date'
- initialDate={selectedDate.toISOString()}
- variant='picker'
-/>
-```
- *See also: [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/datepickers)*
-
-
-
-### DateTimePicker (time)
-
-
-
-
-
- ```tsx
- import { DateTimePicker } from '@expo/ui/jetpack-compose';
-
- {
- setSelectedDate(date);
- }}
- displayedComponents='hourAndMinute'
- initialDate={selectedDate.toISOString()}
- variant='picker'
- />
- ```
- *See also: [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/time-pickers)*
-
-
-
-
-### LinearProgress
-
-
-
-
-
- ```tsx
- import { LinearProgress } from '@expo/ui/jetpack-compose';
-
-
-
-
-### Picker (radio)
-
-
-
-
-
- ```tsx
- import { Picker } from '@expo/ui/jetpack-compose';
-
- {
- setSelectedIndex(index);
- }}
- variant="radio"
- />
- ```
- *See also: [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/radio-button)*
-
-
-
-
-### Picker (segmented)
-
-
-
-
-
-```tsx
-import { Picker } from '@expo/ui/jetpack-compose';
-
- {
- setSelectedIndex(index);
- }}
- variant="segmented"
-/>
-```
- *See also: [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/segmented-button)*
-
-
-
-### Slider
-
-
-
-
-
- ```tsx
- import { Slider } from '@expo/ui/jetpack-compose';
-
- {
- setValue(value);
- }}
- />
- ```
- *See also: [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/slider)*
-
-
-
-
-### Switch (toggle)
-
-> **Note:** Also known as **Toggle**.
-
-
-
-
-
- ```tsx
- import { Switch } from '@expo/ui/jetpack-compose';
-
- {
- setChecked(checked);
- }}
- color="#ff0000"
- label="Play music"
- variant="switch"
- />
- ```
- *See also: [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/switch)*
-
-
-
-
-### Switch (checkbox)
-
-
-
-
-
- ```tsx
- import { Switch } from '@expo/ui/jetpack-compose';
-
- {
- setChecked(checked);
- }}
- label="Play music"
- color="#ff0000"
- variant="checkbox"
- />
- ```
- *See also: [official Jetpack Compose documentation](https://developer.android.com/develop/ui/compose/components/checkbox)*
-
-
-
-
-### TextInput
-
-
-
-
-
- ```tsx
- import { TextInput } from '@expo/ui/jetpack-compose';
-
-
-
-
-## API
-
-Full documentation is not yet available. Use TypeScript types to explore the API.
-
-```ts
-// Import from the SwiftUI package
-import { BottomSheet } from '@expo/ui/swift-ui';
-```
-
-```ts
-// Import from the Jetpack Compose package
-import { Button } from '@expo/ui/jetpack-compose';
-```
-
-{/*
-
-
-
-## Configuration
-
-There are build-time configuration options that control the behavior of the library. For most apps, these configuration values are set in the [app config](/workflow/configuration/) under the [`updates` property](../config/app/#updates).
-
-| [App config property](../config/app/#updates) | Default | Required? | iOS plist/dictionary key | Android meta-data name | Android Map key |
-| ----------------------------------------------------------------------------------- | -------- | ----------- | -------------------------------------- | ---------------------------------------------------------------- | ----------------------------- |
-| [`updates.enabled`](../config/app/#enabled) | `true` |
-
-The runtime version can be managed manually by setting the string value in the config field.
-
-```json
-{
- "expo": {
- "runtimeVersion": ""
- }
-}
-```
-
-
-
-
-
-Runtime version policies derive the runtime version from another piece of information already present in your project. They can be set in the [`runtimeVersion`](../config/app/#runtimeversion) config field as follows:
-
-```json
-{
- "expo": {
- "runtimeVersion": {
- "policy": ""
- }
- }
-}
-```
-
-Available policy types:
-
-
-
-The `"appVersion"` policy is provided for projects with that wish to define their runtime compatibility based on the app version.
-
-For example, in a project that has the following in its app config:
-
-```json
-{
- "expo": {
- "runtimeVersion": {
- "policy": "appVersion"
- },
- "version": "1.0.0",
- "ios": {
- "buildNumber": "1"
- },
- "android": {
- "versionCode": 1
- }
- }
-}
-```
-
-The `"appVersion"` policy will set the runtime version to the project's current `"version"` property. In this case, the runtime version for the Android and iOS builds and any updates would be `"1.0.0"`.
-
-This policy is great for projects that contain custom native code and that update the `"version"` field after every public release. To submit an app, the app stores require an updated native version number for each submitted build, which makes this policy convenient if you want to be sure that every version installed on user devices has a different runtime version.
-
-When using this policy, you need to manually update `"version"` field in the app config every time there is a public release, but for Play Store's Internal Test Track and the App Store's TestFlight uploads, you can rely on `"autoIncrement"` option in **eas.json** to [manage versions for you](/build-reference/app-versions/#remote-version-source).
-
-
-
-
-
-The `"nativeVersion"` policy is provided for projects that wish to define their runtime compatibility based on the project's current `"version"` and `"versionCode"` (Android) or `"buildNumber"` (iOS) properties.
-
-For example, in a project that has the following in its app config:
-
-```json
-{
- "expo": {
- "runtimeVersion": {
- "policy": "nativeVersion"
- },
- "version": "1.0.0",
- "ios": {
- "buildNumber": "1"
- },
- "android": {
- "versionCode": 1
- }
- }
-}
-```
-
-The runtime version for the Android and iOS builds and any updates would be the combination of `"[version]([buildNumber|versionCode])"`, which in this case would be `"1.0.0(1)"`.
-
-This policy is great for projects containing custom native code that update the native version numbers (`"buildNumber"` for iOS and `"versionCode"` for Android) for each build. To submit an app, the app stores require an updated native version number for each submitted build, which makes this policy convenient if you want to be sure that every app uploaded to the Play Store's Internal Test Track and the App Store's TestFlight distribution tools has a different `runtimeVersion`.
-
-It's important to know that this policy requires management of the native version numbers manually between each build.
-
-Also, if you select a different native version between Android and iOS, you'll end up with builds and updates with separate runtime versions.
-
-
-
-
-
-The `"fingerprint"` runtime version policy automatically calculates the runtime version for you, including through changes like SDK upgrades or adding custom native code.
-
-```json
-{
- "expo": {
- "runtimeVersion": {
- "policy": "fingerprint"
- }
- }
-}
-```
-
-This policy works for both projects with and without custom native code. It works by using the [`@expo/fingerprint`](fingerprint) package to calculate the hash of your project during builds and updates to determine build-update compatibility (also known as the runtime).
-
-
-
-
-
-#### Native configuration and overriding
-
-If your project does not use Continuous Native Generation, these configuration values may also be set in your app's native configuration files or overridden during initialization in native code.
-
-
-
-On Android, these options are set as `meta-data` tags in the **AndroidManifest.xml** file (adjacent to the tags added during installation if auto-setup was used). You can also set or override them at runtime using `UpdatesController.overrideConfiguration()`.
-
-On iOS, these properties are set as keys in the **Expo.plist** file. You can also set or override them at runtime by calling `AppController.overrideConfiguration`.
-
-
-
-If your iOS native code or `AppDelegate.mm` is written in Objective-C++, you will need to add the following imports to reference methods on `EXUpdatesAppController`. This is only necessary for overriding configuration at runtime.
-
-```objc
-#import "ExpoModulesCore-Swift.h"
-#import "EXUpdatesInterface-Swift.h"
-#import "EXUpdates-Swift.h"
-```
-
-
-
-
-
-## Usage
-
-By default, `expo-updates` checks for updates when the app launches. If an update is available, it downloads the update and applies it the next time the app is restarted. You can tune this startup behavior using the `checkAutomatically` and `fallbackToCacheTimeout` configuration options above.
-
-The library also provides a variety of constants to inspect the current update and functions to customize update behavior from your application code (after startup). For example, one common alternative usage pattern is to manually check for updates after the app has started instead of doing the default check on launch.
-
-
-
-You can configure your app to check for updates manually by doing the following steps:
-
-1. Set the `checkAutomatically` configuration value to `ON_ERROR_RECOVERY` or `NEVER` to disable the library's default launch behavior.
-2. Add the following code to check for available updates, download them, and reload:
-
- ```jsx App.js
- import { View, Button } from 'react-native';
- import * as Updates from 'expo-updates';
-
- function App() {
- async function onFetchUpdateAsync() {
- try {
- const update = await Updates.checkForUpdateAsync();
-
- if (update.isAvailable) {
- await Updates.fetchUpdateAsync();
- await Updates.reloadAsync();
- }
- } catch (error) {
- // You can also add an alert() to see the error message in case of an error when fetching updates.
- alert(`Error fetching latest Expo update: ${error}`);
- }
- }
-
- return (
-
-
-
- );
- }
- ```
-
-
-
-## Testing
-
-Most of the methods and constants in this library can be used or tested only in release builds. In debug builds, the default behavior is to always load the latest JavaScript from a development server. It is possible to [build a debug version of your app with the same updates behavior as a release build](/eas-update/debug/#debugging-of-native-code-while-loading-the-app-through-expo-updates). Such an app will not open the latest JavaScript from your development server — it will load published updates just as a release build does. This may be useful for debugging the behavior of your app when it is not connected to a development server.
-
-**To test the content of an update in a development build**, run [`eas update`](/eas-update/getting-started/) and then browse to the update in your development build. Note that this only simulates what an update will look like in your app, and most of the [Updates API](#api) is unavailable when running in a development build.
-
-**To test updates in a release build**, you can create a [**.apk**](/build-reference/apk) or a [simulator build](/build-reference/simulators), or make a release build locally with `npx expo run:android --variant release` and `npx expo run:ios --configuration Release` (you don't need to submit this build to the store to test). The full [Updates API](#api) is available in a release build.
-
-**To test the content of an update in Expo Go**, run [`eas update`](/eas-update/getting-started/) and then browse to the update in Expo Go. Note that this only simulates what an update will look like in your app, and most of the [Updates API](#api) is unavailable when running in Expo Go. Also note that only updates using [Expo Go-compatible libraries](/workflow/using-libraries/#determining-third-party-library-compatibility) are supported.
-
-## API
-
-```js
-import * as Updates from 'expo-updates';
-```
-
-
-
-```jsx
-import { useState, useRef } from 'react';
-import { View, StyleSheet, Button } from 'react-native';
-import { Video, ResizeMode } from 'expo-av';
-
-export default function App() {
- const video = useRef(null);
- const [status, setStatus] = useState({});
- return (
-
-
- );
-}
-
-/* @hide const styles = StyleSheet.create({ ... }); */
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- backgroundColor: '#ecf0f1',
- },
- video: {
- alignSelf: 'center',
- width: 320,
- height: 200,
- },
- buttons: {
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- },
-});
-/* @end */
-```
-
-
-
-For more advanced examples, check out the [Playlist example](https://github.com/expo/playlist-example/blob/master/App.js), and the [custom `VideoPlayer` controls component](https://github.com/ihmpavel/expo-video-player/blob/master/lib/index.tsx) that wraps `
Hello World
-
- {/* Use `style` with the following syntax to append class names in React Native for web. */}
- Hello World
- - ); -} -``` - -```css App.module.css -.text { - color: red; -} -``` - -- On web, all CSS values are available. CSS is not processed or auto-prefixed like it is with the React Native Web `StyleSheet` API. You can use `postcss.config.js` to autoprefix your CSS. -- CSS Modules use [lightningcss](https://github.com/parcel-bundler/lightningcss) under the hood, check [the issues](https://github.com/parcel-bundler/lightningcss/issues) for unsupported features. - -### PostCSS - -[PostCSS](https://github.com/postcss/postcss) can be customized by adding a `postcss.config.json` file to the root of your project. This file should export a function that returns a PostCSS configuration object. For example: - -```json postcss.config.json -{ - "plugins": { - "autoprefixer": {} - } -} -``` - -Both `postcss.config.json` and `postcss.config.js` are supported, but `postcss.config.json` enables better caching. - -#### Resetting cache after updates - -Changing the Post CSS or `browserslist` config will require you to clear the Metro cache: - -npx @react-native-community/cli@latest init to Expo SDK packages.
-
- }
- Icon={BookOpen02Icon}
-/>
-
-rootRegisterComponent setup for existing React Native projects}>
-
-If you are managing your React Native project's native directories (**android** and **ios**) manually, you need to follow the instructions below to set up the `registerRootComponent` function. This is necessary for the Expo modules to work correctly.
-
-**Android**
-
-Update the **android/app/src/main/your-package/MainActivity.java** file to use the name `main` in the `getMainComponentName` function.
-
-```diff android/app/src/main/your-package/MainActivity.java
- @Override
- protected String getMainComponentName() {
-+ return "main";
- }
-```
-
-**iOS**
-
-Update the iOS **ios/your-project/AppDelegate.(m|mm|swift)** file to use the **moduleName** `main` in the `createRootViewWithBridge:bridge moduleName:@"main" initialProperties:initProps` line of the `application:didFinishLaunchingWithOptions:` function.
-
-`content://`,
`asset://`,
no scheme | `file://`,
`ph://`,
`assets-library://` | -| `readAsStringAsync` | `file:///`,
`asset://`,
[SAF URI](#saf-uri) | `file://` | -| `writeAsStringAsync` | `file:///`,
[SAF URI](#saf-uri) | `file://` | -| `deleteAsync` | `file:///`,
[SAF URI](#saf-uri) | `file://` | -| `moveAsync` | Source:
`file:///`,
[SAF URI](#saf-uri)
Destination:
`file://` | Source:
`file://`
Destination:
`file://` | -| `copyAsync` | Source:
`file:///`,
`content://`,
`asset://`,
[SAF URI](#saf-uri),
no scheme
Destination:
`file://` | Source:
`file://`,
`ph://`,
`assets-library://`
Destination:
`file://` | -| `makeDirectoryAsync` | `file:///` | `file://` | -| `readDirectoryAsync` | `file:///` | `file://` | -| `downloadAsync` | Source:
`http://`,
`https://`
Destination:
`file:///` | Source:
`http://`,
`https://`
Destination:
`file://` | -| `uploadAsync` | Source:
`file:///`
Destination:
`http://`
`https://` | Source:
`file://`
Destination:
`http://`
`https://` | -| `createDownloadResumable` | Source:
`http://`,
`https://`
Destination:
`file:///` | Source:
`http://`,
`https://`
Destination:
`file://` | - -> On Android **no scheme** defaults to a bundled resource. - -## Permissions - -### Android - -The following permissions are added automatically through this library's **AndroidManifest.xml**. - -
@expo/config-plugins raw functions}>
-
-When using config plugins with raw functions, it's essential to be aware of certain limitations, particularly in the context of fingerprinting. The library makes a best effort to generate fingerprints for changes made through config plugins; however, raw functions pose specific challenges. Raw functions are not serializable as fingerprints, which means they cannot be directly used for generating unique hashes.
-
-To work around this limitation, the library employs one of the following strategies to create serializable fingerprints for raw functions:
-
-1. Using `Function.name`: The library utilizes the `Function.name` property if available for named raw functions. This property provides a recognizable name for the function, which can be used as a fingerprint property.
-
-2. Using `withAnonymous`: For anonymous raw functions without a `Function.name`, the library resorts to using `withAnonymous` as the fingerprint property. This is a generic identifier for anonymous functions.
-
-Here's an example to illustrate a case in which the library will use [`withMyPlugin`, `withAnonymous`] as plugin properties for fingerprint hashing:
-
-{/* prettier-ignore */}
-```js app.config.js
-const { withInfoPlist } = require('expo/config-plugins');
-
-const withMyPlugin = (config) => {
- return withInfoPlist(config, (config) => {
- config.modResults.NSLocationWhenInUseUsageDescription = 'Allow $(PRODUCT_NAME) to use your location';
- return config;
- });
-};
-
-export default ({ config }) => {
- config.plugins ||= [];
- config.plugins.push(withMyPlugin);
- config.plugins.push((config) => config);
- return config;
-};
-```
-
-It's important to note that due to this design, if you make changes to the implementation of raw config plugins functions, such as altering the **Info.plist** value within `withMyPlugin`, the fingerprint will still generate the same hash value. To ensure unique fingerprints when modifying config plugins implementations, consider the following options:
-
-- Avoid Anonymous Functions: Avoid using anonymous raw config plugins functions. Instead, use named functions whenever possible, and ensure that their names remain consistent as long as the implementation changes.
-
-- Use Local config plugins: Alternatively, you can create local config plugins as separate modules, each with its own export. This approach allows you to specify a different function name when making changes to the config plugins implementations.
-
-Here's an example of using a local config plugin:
-
-```js ./plugins/withMyPlugin.js
-const { withInfoPlist } = require('expo/config-plugins');
-
-const withMyPlugin = config => {
- return withInfoPlist(config, config => {
- config.modResults.NSLocationWhenInUseUsageDescription =
- 'Allow $(PRODUCT_NAME) to use your location';
- return config;
- });
-};
-
-module.exports = withMyPlugin;
-```
-
-{/* prettier-ignore */}
-```json app.json
-{
- "expo": {
- /* @hide ... */ /* @end */
- "plugins": "./plugins/withMyPlugin"
- }
-}
-```
-
-By following these guidelines, you can effectively manage changes to config plugins and ensure that fingerprinting remains consistent and reliable.
-
--
-Then proceed to [configuration](#configuration) to set up the [config plugin](#app-config) and -obtain the [credentials](#credentials) for push notifications. - -## Usage - -Check out the example Snack below to see Notifications in action, make sure to use a physical device to test it. Push notifications don't work on emulators/simulators. - -
- Hello Expo! -
-
-
-
-`;
-
-export default function App() {
- const [selectedPrinter, setSelectedPrinter] = useState();
-
- const print = async () => {
- // On iOS/android prints the given html. On web prints the HTML from the current page.
- /* @info */ await Print.printAsync({
- html,
- printerUrl: selectedPrinter?.url, // iOS only
- }); /* @end */
- };
-
- const printToFile = async () => {
- // On iOS/android prints the given html. On web prints the HTML from the current page.
- /* @info */ const { uri } = await Print.printToFileAsync({ html }); /* @end */
- console.log('File has been saved to:', uri);
- await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf' });
- };
-
- const selectPrinter = async () => {
- /* @info */ const printer = await Print.selectPrinterAsync(); // iOS only
- /* @end */
- setSelectedPrinter(printer);
- };
-
- return (
-
-
- `;
-
- await printAsync({ html });
- } catch (error) {
- console.error('Error:', error);
- }
- }
-
- generateAndPrint();
- }, [context]);
-
- return <>{/* Render UI */};
-}
-```
-
-## Page margins
-
-**On iOS** you can set the page margins using the `margins` option:
-
-```js
-const { uri } = await Print.printToFileAsync({
- html: 'This page is printed with margins',
- margins: {
- left: 20,
- top: 50,
- right: 20,
- bottom: 100,
- },
-});
-```
-
-If `useMarkupFormatter` is set to `true`, setting margins may cause a blank page to appear at the end of your printout. To prevent this, make sure your HTML string is a well-formed document, including `` at the beginning of the string.
-
-**On Android**, if you're using `html` option in `printAsync` or `printToFileAsync`, the resulting print might contain page margins (it depends on the WebView engine).
-They are set by `@page` style block and you can override them in your HTML code:
-
-```html
-
-```
-
-See [`@page` documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@page) for more details.
diff --git a/docs/pages/versions/v53.0.0/sdk/reanimated.mdx b/docs/pages/versions/v53.0.0/sdk/reanimated.mdx
deleted file mode 100644
index b6119e52cd23b4..00000000000000
--- a/docs/pages/versions/v53.0.0/sdk/reanimated.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: react-native-reanimated
-description: A library that provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.
-sourceCodeUrl: 'https://github.com/software-mansion/react-native-reanimated'
-packageName: react-native-reanimated
-platforms: ['android', 'ios', 'tvos', 'web', 'expo-go']
-inExpoGo: true
----
-
-import { BookOpen02Icon } from '@expo/styleguide-icons/outline/BookOpen02Icon';
-
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { SnackInline } from '~/ui/components/Snippet';
-
-[`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.
-
-> **Reanimated uses React Native APIs that are incompatible with "Remote JS Debugging" for JavaScriptCore**. To use a debugger with your app with `react-native-reanimated`, you'll need to use the [Hermes JavaScript engine](/guides/using-hermes) and the [JavaScript Inspector for Hermes](/guides/using-hermes#javascript-inspector-for-hermes).
-
-## Installation
-
-- -No additional configuration is required. [Reanimated Babel plugin](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#reanimated-babel-plugin) is automatically configured in [`babel-preset-expo`](https://www.npmjs.com/package/babel-preset-expo) when you install the library. - -## Usage - -The following example shows how to use the `react-native-reanimated` library to create a simple animation. - -
Edge[]
-
- {'\u2002•\u2002Default: '}
- ["top", "right", "bottom", "left"]
-- -Sets the edges to apply the safe area insets to. - -
boolean
- {'\u2002•\u2002Default: '}
- true
-- -On iOS 10+, emulate the safe area using the status bar height and home indicator sizes. - -
- -> **info** You can test `TaskManager` in the Expo Go app. However, check the documentation of each [library](#libraries-using-expo-taskmanager) that uses `TaskManager` to confirm whether it supports testing in Expo Go. - -## Configuration
- alert(`indexes of selected items: ${items.join(', ')}`)}
- moveEnabled={moveEnabled}
- onMoveItem={(from, to) => alert(`moved item at index ${from} to index ${to}`)}
- onDeleteItem={(item) => alert(`deleted item at index: ${item}`)}
- style={{ flex: 1 }}
- listStyle='automatic'
- deleteEnabled={deleteEnabled}
- selectEnabled={selectEnabled}>
- {data.map((item, index) => (
-