useFonts hook from expo-font. */ import { useFonts } from 'expo-font'; /* @end */
/* @info 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';
@@ -321,9 +321,9 @@ The [`expo-splash-screen`](/versions/latest/sdk/splash-screen/) library provides
Inter_900Black and useFonts hook from @expo-google-fonts/inter*/
import { Inter_900Black, useFonts } from '@expo-google-fonts/inter';
@@ -419,7 +419,7 @@ A platform's default font is usually easy-to-read. However, don't be surprised w
When the icons from `@expo/vector-icons` library load for the first time, they appear as invisible icons in your app. Once they load, they're cached for all the app's subsequent usage. To avoid showing invisible icons on your app's first load, preload during the initial loading screen with [`useFonts`](/versions/latest/sdk/font/#usefontsmap). For example:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { useFonts } from 'expo-font';
import Ionicons from '@expo/vector-icons/Ionicons';
diff --git a/docs/pages/develop/user-interface/safe-areas.mdx b/docs/pages/develop/user-interface/safe-areas.mdx
index 20ff997f62a6ca..b825527cd3ba88 100644
--- a/docs/pages/develop/user-interface/safe-areas.mdx
+++ b/docs/pages/develop/user-interface/safe-areas.mdx
@@ -39,7 +39,7 @@ You can skip installing `react-native-safe-area-context` if you have created a p
You can directly use [`SafeAreaView`](https://appandflow.github.io/react-native-safe-area-context/api/safe-area-view) to wrap the content of your screen's component. It is a regular `
@@ -217,7 +217,7 @@ export default function Index() {
You can use the `{ $$css: true }` syntax to use Tailwind with React Native web elements:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { View, Text } from 'react-native';
export default function Index() {
@@ -238,11 +238,11 @@ Tailwind does not support Android and iOS platforms. You can use a compatibility
Alternatively, you can use [DOM components](/guides/dom-components) to render your Tailwind web code in a `WebView` on native.
{/* prettier-ignore */}
-```tsx app/index.tsx
+```tsx src/app/index.tsx
'use dom';
// Remember to import the global.css file in each DOM component.
-import '../global.css';
+import '../../global.css';
export default function Page() {
return (
diff --git a/docs/pages/guides/typescript.mdx b/docs/pages/guides/typescript.mdx
index d6fc0492f53ab3..12cd377111e0bb 100644
--- a/docs/pages/guides/typescript.mdx
+++ b/docs/pages/guides/typescript.mdx
@@ -19,7 +19,7 @@ This guide provides a quick way to get started for a new project and also steps
To create a new project, use the default template which includes base TypeScript configuration, example code, and basic navigation structure:
-
+- [/llms-sdk-v54.0.0.txt](/llms-sdk-v54.0.0.txt): Documentation for the Expo SDK v54.0.0
+
- [/llms-sdk-v53.0.0.txt](/llms-sdk-v53.0.0.txt): Documentation for the Expo SDK v53.0.0
- [/llms-sdk-v52.0.0.txt](/llms-sdk-v52.0.0.txt): Documentation for the Expo SDK v52.0.0
diff --git a/docs/pages/modules/use-standalone-expo-module-in-your-project.mdx b/docs/pages/modules/use-standalone-expo-module-in-your-project.mdx
index 9a0327d0bac6fa..5b1e82df8ac48f 100644
--- a/docs/pages/modules/use-standalone-expo-module-in-your-project.mdx
+++ b/docs/pages/modules/use-standalone-expo-module-in-your-project.mdx
@@ -172,8 +172,12 @@ Apart from publishing your module to npm, you can use it in your project in the
To test the published module in a new project, create a new app and install the module as a dependency by running the following command:
Controls what is protected],
+ ['src/app/_layout.tsx', Controls what is protected],
[
- 'app/sign-in.tsx',
+ 'src/app/sign-in.tsx',
Always accessible {
Create a **SplashScreenController** to manage the splash screen. Authentication loading is asynchronous, so keep the splash screen visible until authentication loads.
-```tsx splash.tsx
+```tsx src/splash.tsx
import { SplashScreen } from 'expo-router';
import { useSession } from './ctx';
@@ -201,11 +201,11 @@ export function SplashScreenController() {
Add the `SessionProvider` to your root layout. This gives your entire app access to the authentication context. Ensure the `SplashScreenController` is inside the `SessionProvider`.
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { Stack } from 'expo-router';
-import { SessionProvider } from '../ctx';
-import { SplashScreenController } from '../splash';
+import { SessionProvider } from '@/ctx';
+import { SplashScreenController } from '@/splash';
export default function Root() {
// Set up the auth context and render your layout inside of it.
@@ -229,11 +229,11 @@ function RootNavigator() {
Create the `/sign-in` screen. This screen toggles authentication using `signIn()`. Since this screen is outside the `(app)` group, the group's layout and authentication check do not run when rendering this screen. This lets logged-out users access this screen.
-```tsx app/sign-in.tsx|collapseHeight=480
+```tsx src/app/sign-in.tsx|collapseHeight=480
import { router } from 'expo-router';
import { Text, View } from 'react-native';
-import { useSession } from '../ctx';
+import { useSession } from '@/ctx';
export default function SignIn() {
const { signIn } = useSession();
@@ -258,9 +258,9 @@ export default function SignIn() {
Now modify the `RootNavigator` to protect routes based on your `SessionProvider`.
-```tsx app/_layout.tsx|collapseHeight=400
+```tsx src/app/_layout.tsx|collapseHeight=400
// All import statements remain the same except you need to import `useSession` from your `ctx.tsx` file.
-import { SessionProvider, useSession } from '../ctx';
+import { SessionProvider, useSession } from '@/ctx';
// All of the above code remains unchanged. Update the `RootNavigator` to protect routes based on your `SessionProvider` below.
@@ -287,10 +287,10 @@ function RootNavigator() {
Implement an authenticated screen that lets users sign out.
-```tsx app/(app)/index.tsx|collapseHeight=480
+```tsx src/app/(app)/index.tsx|collapseHeight=480
import { Text, View } from 'react-native';
-import { useSession } from '../../ctx';
+import { useSession } from '@/ctx';
export default function Index() {
const { signOut } = useSession();
@@ -312,9 +312,9 @@ export default function Index() {
-Create the **app/(app)/\_layout.tsx**:
+Create the **src/app/(app)/\_layout.tsx**:
-```tsx app/(app)/_layout.tsx
+```tsx src/app/(app)/_layout.tsx
import { Stack } from 'expo-router';
export default function AppLayout() {
@@ -333,12 +333,12 @@ Another common pattern is to render a sign-in modal over the top of the app. Thi
Modal presented over the root],
- ['app/(app)/(root)/_layout.tsx', Protects child routes],
+ ['src/app/_layout.tsx', 'Declares global session context'],
+ 'src/app/(app)/_layout.tsx',
+ ['src/app/(app)/sign-in.tsx', Modal presented over the root],
+ ['src/app/(app)/(root)/_layout.tsx', Protects child routes],
[
- 'app/(app)/(root)/index.tsx',
+ 'src/app/(app)/(root)/index.tsx',
Requires authorization
@@ -217,7 +217,7 @@ The `TabList` is both the configuration and default appearance of the `Tabs`, bu
`TabTrigger` will forward an `isFocused` prop, so you can create a separate tab button component that reacts to focused status.
-```tsx TabButton.tsx
+```tsx tab-button.tsx
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { TabTriggerSlotProps } from 'expo-router/ui';
import { ComponentProps, Ref } from 'react';
diff --git a/docs/pages/router/advanced/drawer.mdx b/docs/pages/router/advanced/drawer.mdx
index 4920df506c2069..a5e6932cdc300e 100644
--- a/docs/pages/router/advanced/drawer.mdx
+++ b/docs/pages/router/advanced/drawer.mdx
@@ -3,11 +3,17 @@ title: Drawer
description: Learn how to use the Drawer layout in Expo Router.
---
+import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
import { Terminal } from '~/ui/components/Snippet';
import { Tabs, Tab } from '~/ui/components/Tabs';
A navigation drawer is a common pattern in mobile apps, it allows users to swipe open a menu from a side of their screen to expose navigation options. This menu is also typically toggleable through a button in the app's header.
+
@@ -39,7 +45,7 @@ To use [drawer navigator](https://reactnavigation.org/docs/drawer-based-navigati
Now you can use the `Drawer` layout to create a drawer navigator.
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { Drawer } from 'expo-router/drawer';
export default function Layout() {
@@ -49,7 +55,7 @@ export default function Layout() {
To edit the drawer navigation menu labels, titles and screen options specific screens are required as follows:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { Drawer } from 'expo-router/drawer';
export default function Layout() {
diff --git a/docs/pages/router/advanced/modals.mdx b/docs/pages/router/advanced/modals.mdx
index d6bc140267cf5a..15e51292f0ea80 100644
--- a/docs/pages/router/advanced/modals.mdx
+++ b/docs/pages/router/advanced/modals.mdx
@@ -37,7 +37,7 @@ For most use cases, you can use the `Modal` component and customize it according
## Modal screen using Expo Router
-A modal screen is a file created inside the **app** directory and is used as a route within the existing stack. It is used for complex interactions that need to be part of the navigation system, such as multi-step forms where you can link to a specific screen after the process completes.
+A modal screen is a file created inside the **src/app** directory and is used as a route within the existing stack. It is used for complex interactions that need to be part of the navigation system, such as multi-step forms where you can link to a specific screen after the process completes.
Below is an example of how a modal screen works on different platforms:
@@ -45,13 +45,13 @@ Below is an example of how a modal screen works on different platforms:
### Usage
-To implement a modal route, create a screen called **modal.tsx** inside the **app** directory. Here's an example file structure:
+To implement a modal route, create a screen called **modal.tsx** inside the **src/app** directory. Here's an example file structure:
-
@@ -63,7 +63,7 @@ You can use the **app/\_layout.tsx** file to define your app's root layout using
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -109,9 +109,9 @@ export default function TabLayout() {
-Finally, you have the two tab files that make up the content of the tabs: **app/index.tsx** and **app/settings.tsx**.
+Finally, you have the two tab files that make up the content of the tabs: **src/app/index.tsx** and **src/app/settings.tsx**.
-```tsx app/index.tsx and app/settings.tsx
+```tsx src/app/index.tsx and src/app/settings.tsx
import { View, Text, StyleSheet } from 'react-native';
export default function Tab() {
@@ -155,7 +155,7 @@ Alternatively, you can pass `{default: ..., selected: ...}` to either the `sf` o
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -203,7 +203,7 @@ Liquid glass on iOS automatically changes colors based on if the background colo
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { DynamicColorIOS } from 'react-native';
import { NativeTabs } from 'expo-router/unstable-native-tabs';
@@ -294,7 +294,7 @@ When using the `src` or `xcasset` prop for custom images on iOS, you can control
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -403,7 +403,7 @@ If you don't want to display a label, you can use the `hidden` prop to hide the
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -453,7 +453,7 @@ You can use the `Badge` component to customize the badge displayed for the tab b
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -513,7 +513,7 @@ Since the native tab layout's appearance varies by platform, the customization o
You can hide the tab bar using `hidden` prop on the `NativeTabs` component. To hide tab bar for specific screens, you can use context API to set the `hidden` prop dynamically.
-```tsx context/TabBarContext.tsx
+```tsx src/context/TabBarContext.tsx
import { createContext } from 'react';
export const TabBarContext = createContext<{
@@ -523,11 +523,11 @@ export const TabBarContext = createContext<{
});
```
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
import { useState } from 'react';
-import { TabBarContext } from '../context/TabBarContext';
+import { TabBarContext } from '@/context/TabBarContext';
export default function TabLayout() {
const [isTabBarHidden, setIsTabBarHidden] = useState(false);
@@ -546,11 +546,11 @@ export default function TabLayout() {
}
```
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { useFocusEffect } from 'expo-router';
import { use } from 'react';
-import { TabBarContext } from '../context/TabBarContext';
+import { TabBarContext } from '@/context/TabBarContext';
export default function HomeScreen() {
const { setIsTabBarHidden } = use(TabBarContext);
@@ -572,7 +572,7 @@ export default function HomeScreen() {
If you want to hide a tab based on a condition, you can either remove the trigger or pass the `hidden` prop to the `NativeTabs.Trigger` component.
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -597,7 +597,7 @@ By default, tapping a tab that is already active closes all screens in that tab'
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -649,7 +649,7 @@ By default, tapping a tab that is already active and showing its root screen scr
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -709,7 +709,7 @@ To add a separate search tab, assign the `role` with its value set to `search` t
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -762,10 +762,15 @@ export default function TabLayout() {
To add a search field to the tab bar, wrap the screen in a Stack navigator and configure `headerSearchBarOptions`.
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -878,7 +883,7 @@ The bottom accessory can appear in two placements: `'regular'` (standard positio
The following example demonstrates a mini player with state lifted to the parent component:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
@@ -969,7 +974,7 @@ If you need full control over safe area handling, you can disable automatic cont
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
@@ -1007,7 +1012,7 @@ export default function TabLayout() {
When `disableAutomaticContentInsets` is set to `true`, you must manage safe area insets manually. You can use `SafeAreaView` from `react-native-screens/experimental`:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { SafeAreaView } from 'react-native-screens/experimental';
export default function HomeScreen() {
@@ -1254,7 +1259,7 @@ On iOS 18 and earlier, the native tab bar becomes transparent when scrolling to
You can use the [`disableTransparentOnScrollEdge`](/versions/latest/sdk/router-native-tabs/#disabletransparentonscrolledge) prop to disable this behavior.
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
function TabLayout() {
@@ -1270,7 +1275,7 @@ function TabLayout() {
When you are using a `ScrollView` and the tab bar is transparent from the start, ensure that the `ScrollView` is a first child of the screen component. If you wrap it with another component make sure to set `collapsable` to `false` on the wrapper component.
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { ScrollView, View } from 'react-native';
export default function HomeScreen() {
@@ -1290,7 +1295,7 @@ This happens because React Navigation's default theme uses a white background co
**For apps supporting both light and dark modes:**
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { ThemeProvider, DarkTheme, DefaultTheme } from '@react-navigation/native';
import { NativeTabs } from 'expo-router/unstable-native-tabs';
import { useColorScheme } from 'react-native';
@@ -1315,7 +1320,7 @@ export default function TabLayout() {
**For dark-mode-only apps:**
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { ThemeProvider, DarkTheme } from '@react-navigation/native';
import { NativeTabs } from 'expo-router/unstable-native-tabs';
@@ -1344,7 +1349,7 @@ Tapping an active tab should scroll the content to the top, but this may not wor
Ensure that the `ScrollView` is a direct first child of the screen component. If you wrap it with another component, make sure to set `collapsable` to `false` on the wrapper component.
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { ScrollView, View } from 'react-native';
export default function HomeScreen() {
@@ -1434,7 +1439,7 @@ Native tabs cannot be nested inside other native tabs. You can still nest [JavaS
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { NativeTabs } from 'expo-router/unstable-native-tabs';
export default function TabLayout() {
diff --git a/docs/pages/router/advanced/nesting-navigators.mdx b/docs/pages/router/advanced/nesting-navigators.mdx
index 732f4f9e122550..8477cd71f5c904 100644
--- a/docs/pages/router/advanced/nesting-navigators.mdx
+++ b/docs/pages/router/advanced/nesting-navigators.mdx
@@ -24,31 +24,31 @@ Consider the following file structure which is used as an example:
` from `@react-navigation/native` using the appropriate theme:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { ThemeProvider, DarkTheme, DefaultTheme } from '@react-navigation/native';
import { Stack } from 'expo-router';
import { useColorScheme } from 'react-native';
@@ -339,7 +339,7 @@ A white flash between screen transitions usually means the navigation stack is u
To fix this, wrap your root layout with React Navigation's `` and pass the appropriate theme:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { ThemeProvider, DarkTheme, DefaultTheme } from '@react-navigation/native';
import { Stack } from 'expo-router';
import { useColorScheme } from 'react-native';
@@ -365,7 +365,7 @@ When using `headerLargeTitle: true` (or ``) alongside
To fix this, ensure `ScrollView` or `FlatList` is the first child rendered by your screen component. If you need a wrapper, set `collapsable={false}` on it:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Stack } from 'expo-router';
import { ScrollView, View, Text } from 'react-native';
@@ -383,7 +383,7 @@ export default function Home() {
If you need to wrap the `ScrollView`, set `collapsable={false}` on the wrapper:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Stack } from 'expo-router';
import { ScrollView, View, Text } from 'react-native';
@@ -431,4 +431,4 @@ You cannot nest `Stack.Toolbar` components inside each other.
## Learn more
-For complete API documentation, including all available props, see the [`Stack.Toolbar` API reference](/versions/unversioned/sdk/router/#stacktoolbar).
+For complete API documentation, including all available props, see the [`Stack.Toolbar` API reference](/versions/latest/sdk/router/#stacktoolbar).
diff --git a/docs/pages/router/advanced/stack.mdx b/docs/pages/router/advanced/stack.mdx
index 6cdd8c07a8f526..1d49190357ad74 100644
--- a/docs/pages/router/advanced/stack.mdx
+++ b/docs/pages/router/advanced/stack.mdx
@@ -30,13 +30,13 @@ This guide provides information on how you can create a `Stack` navigator in you
You can use file-based routing to create a stack navigator. Here's an example file structure:
-
-```tsx app/details.tsx
+```tsx src/app/details.tsx
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
import { View, Text, StyleSheet } from 'react-native';
@@ -148,7 +148,7 @@ const styles = StyleSheet.create({
> **important** Screen composition API is in alpha and available in SDK 55 and later.
-```tsx app/details.tsx
+```tsx src/app/details.tsx
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
import { View, Text, StyleSheet } from 'react-native';
@@ -205,7 +205,7 @@ You can add buttons to the header by using the `headerLeft` and `headerRight` op
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Stack } from 'expo-router';
import { Button, Text, Image, StyleSheet } from 'react-native';
import { useState } from 'react';
@@ -245,7 +245,7 @@ const styles = StyleSheet.create({
> **important** Screen composition API is in alpha and available in SDK 55 and later.
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Stack } from 'expo-router';
import { Button, Text, Image, StyleSheet } from 'react-native';
import { useState } from 'react';
@@ -299,9 +299,9 @@ For example, the `index` route in the following layout structure shows a list of
` component in the layout component route to modify the push behavior:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { Stack } from 'expo-router';
export default function Layout() {
@@ -341,7 +341,7 @@ You can optionally pass a positive number to dismiss up to that specified number
Dismiss is different from `back` as it targets the closest stack and not the current navigator. If you have nested navigators, calling `dismiss` will take you back multiple screens.
{/* prettier-ignore */}
-```tsx app/settings.tsx
+```tsx src/app/settings.tsx
import { Button, View } from 'react-native';
/* @info Import `) with a `Sc
To fix this, ensure `ScrollView` or `FlatList` is the first child rendered by your screen component. If you need a wrapper, set `collapsable={false}` on it:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Stack } from 'expo-router';
import { ScrollView, View, Text } from 'react-native';
@@ -577,7 +577,7 @@ export default function Home() {
If you need to wrap the `ScrollView`, set `collapsable={false}` on the wrapper:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Stack } from 'expo-router';
import { ScrollView, View, Text } from 'react-native';
@@ -601,9 +601,9 @@ export default function Home() {
A white flash between screen transitions usually means the navigation stack is using a light background while your app uses a dark theme.
-To fix this, wrap your root layout with React Navigation's `ThemeProvider` and pass the appropriate theme:
+To fix this, wrap your root layout with React Navigation's `` and pass the appropriate theme:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { ThemeProvider, DarkTheme, DefaultTheme } from '@react-navigation/native';
import { Stack } from 'expo-router';
import { useColorScheme } from 'react-native';
@@ -623,7 +623,7 @@ export default function RootLayout() {
For apps that are always dark-themed:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { ThemeProvider, DarkTheme } from '@react-navigation/native';
import { Stack } from 'expo-router';
diff --git a/docs/pages/router/advanced/tabs.mdx b/docs/pages/router/advanced/tabs.mdx
index fbbd4c90a5f9e2..5986b7b72b0883 100644
--- a/docs/pages/router/advanced/tabs.mdx
+++ b/docs/pages/router/advanced/tabs.mdx
@@ -51,10 +51,10 @@ You can use file-based routing to create a tabs layout. Here's an example file s
@@ -103,9 +103,9 @@ If you need more control over the alignment rectangle, you can pass an `alignmen
## Complete example
-Here's a more complex example showing a gallery grid with zoom transitions to detail views. The source screen component (**app/index.tsx**) uses `Link.AppleZoom` to wrap an `Image` component:
+Here's a more complex example showing a gallery grid with zoom transitions to detail views. The source screen component (**src/app/index.tsx**) uses `Link.AppleZoom` to wrap an `Image` component:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Image } from 'expo-image';
import { Link } from 'expo-router';
import { useState } from 'react';
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
In the destination screen, the `Link.AppleZoomTarget` is used to specify the alignment of the zoomed element:
-```tsx app/image/[id].tsx
+```tsx src/app/image/[id].tsx
import { Image } from 'expo-image';
import { Link, useLocalSearchParams } from 'expo-router';
import { useMemo } from 'react';
@@ -234,13 +234,13 @@ const styles = StyleSheet.create({
## Controlling dismissal gestures
-The [`usePreventZoomTransitionDismissal`](/versions/unversioned/sdk/router/#usepreventzoomtransitiondismissal_options) hook allows you to control the interactive swipe-to-dismiss gesture on screens using zoom transitions. This is useful when you want to prevent accidental dismissals or restrict dismissal to specific screen areas.
+The [`usePreventZoomTransitionDismissal`](/versions/latest/sdk/router/#usepreventzoomtransitiondismissal_options) hook allows you to control the interactive swipe-to-dismiss gesture on screens using zoom transitions. This is useful when you want to prevent accidental dismissals or restrict dismissal to specific screen areas.
### Disabling dismissal completely
Call the hook without any options to completely disable the swipe-to-dismiss gesture:
-```tsx app/detail.tsx
+```tsx src/app/detail.tsx
import { usePreventZoomTransitionDismissal } from 'expo-router';
export default function DetailScreen() {
@@ -254,7 +254,7 @@ export default function DetailScreen() {
Use the `unstable_dismissalBoundsRect` option to define a rectangle where dismissal gestures are allowed. This is useful for image viewers where you want dismissal only from the image area:
-```tsx app/image.tsx
+```tsx src/app/image.tsx
import { usePreventZoomTransitionDismissal } from 'expo-router';
import { View, StyleSheet } from 'react-native';
import { Image } from 'expo-image';
diff --git a/docs/pages/router/basics/common-navigation-patterns.mdx b/docs/pages/router/basics/common-navigation-patterns.mdx
index bbc0530047eb6d..3ca3305f67accc 100644
--- a/docs/pages/router/basics/common-navigation-patterns.mdx
+++ b/docs/pages/router/basics/common-navigation-patterns.mdx
@@ -21,19 +21,19 @@ Consider the following navigation tree:
Protected
+
+ Home
+
+
+ Feed
+
+
+ Profile
+
+
+ );
+}
+```
+
+### Platform-specific tabs
+
+Since native tabs are only available on Android and iOS, a common pattern is to use [platform-specific file extensions](/router/advanced/platform-specific-modules/) to provide different tab implementations for native and web. The root layout renders a tab component, and Expo's module resolution automatically picks the correct file based on the platform.
+
+
+
+ Home
+
+
+ Explore
+
+
+ );
+}
+```
+
+On web, **app-tabs.tsx** uses [custom tabs](/router/advanced/custom-tabs/) from `expo-router/ui`, which are unstyled and flexible components:
+
+```tsx src/components/app-tabs.tsx
+import { Tabs, TabList, TabTrigger, TabSlot } from 'expo-router/ui';
+
+export default function AppTabs() {
+ return (
+
+
+
+ Home
+
+
+ Explore
+
+
+
+ );
+}
+```
+
## Slot
In some cases, you may want a layout without a navigator. This is helpful for adding a header or footer around the current route, or for displaying a modal over any route inside a directory. In this case, you can use the `Slot` component, which serves as a placeholder for the current child route.
@@ -143,16 +253,16 @@ Consider the following file structure:
-You can create a custom entry point in your Expo Router project to initialize and load side-effects before your app loads the root layout (**app/\_layout.tsx**). Below are some of the common cases for a custom entry point:
+You can create a custom entry point in your Expo Router project to initialize and load side-effects before your app loads the root layout (**src/app/\_layout.tsx**). Below are some of the common cases for a custom entry point:
- Initializing global services like analytics, error reporting, and so on.
- Setting up polyfills
@@ -54,7 +54,7 @@ You can create a custom entry point in your Expo Router project to initialize an
1. Create a new file in the root of your project, such as **index.js**. After creating this file, the project structure should look like this:
-
+### Configure path aliases
+
+If you are using the [`src` directory](/router/reference/src-directory/), add path aliases to your **tsconfig.json** so you can use short import paths like `@/components/button` instead of relative paths:
+
+```json tsconfig.json
+{
+ "extends": "expo/tsconfig.base",
+ "compilerOptions": {
+ "strict": true,
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}
+```
+
+The `@/*` alias maps to the **src** directory in the above example.
+
+
+
+
+
### Clear bundler cache
-After updating the Babel config file, run the following command to clear the bundler cache:
+After updating the configuration, run the following command to clear the bundler cache:
-
+
### Update resolutions
diff --git a/docs/pages/router/introduction.mdx b/docs/pages/router/introduction.mdx
index 0d9e3c03a4a6a4..8bef955f75931c 100644
--- a/docs/pages/router/introduction.mdx
+++ b/docs/pages/router/introduction.mdx
@@ -28,13 +28,15 @@ We recommend creating a new Expo app using `create-expo-app` to create a project
diff --git a/docs/pages/router/migrate/from-expo-webpack.mdx b/docs/pages/router/migrate/from-expo-webpack.mdx
index f1d9ff0fb71e88..48506e8670889f 100644
--- a/docs/pages/router/migrate/from-expo-webpack.mdx
+++ b/docs/pages/router/migrate/from-expo-webpack.mdx
@@ -59,7 +59,7 @@ In `@expo/webpack-config` all routes shared a single HTML file. This file was ba
In Expo Router, there are two different rendering patterns:
-- **Recommended**: `web.output: "static"` which outputs a new HTML file for each route in the app. This approach lets you [dynamically generate the entire HTML template using the **app/+html.js** file](/router/web/static-rendering#root-html).
+- **Recommended**: `web.output: "static"` which outputs a new HTML file for each route in the app. This approach lets you [dynamically generate the entire HTML template using the **src/app/+html.tsx** file](/router/web/static-rendering#root-html).
- **Not recommended**: `web.output: "single"` which outputs a single-page application. This approach lets you use `public/index.html` as the template HTML file.
## Static resources
@@ -176,7 +176,7 @@ For example, here's a possible flow for setting up Workbox. Create a new project
Next, create a root HTML file for the app and add the service worker registration script:
-```tsx app/+html.tsx
+```tsx src/app/+html.tsx
import { ScrollViewStyleReset } from 'expo-router/html';
import type { PropsWithChildren } from 'react';
@@ -283,7 +283,7 @@ Unlike `@expo/webpack-config`, Expo Router does not automatically attempt to gen
You can link this in your HTML file using the `link` tag:
-```tsx app/+html.tsx
+```tsx src/app/+html.tsx
import { ScrollViewStyleReset } from 'expo-router/html';
import type { PropsWithChildren } from 'react';
diff --git a/docs/pages/router/migrate/from-react-navigation.mdx b/docs/pages/router/migrate/from-react-navigation.mdx
index 844d6bfd74068d..592a54f7319ba8 100644
--- a/docs/pages/router/migrate/from-react-navigation.mdx
+++ b/docs/pages/router/migrate/from-react-navigation.mdx
@@ -70,7 +70,35 @@ Expo Router **does not** add `react-native-gesture-handler` (as of v3), so you'l
### Copy screens to the app directory
-Create an **app** directory at the root of your repo, or in a root **src** directory.
+Create an **app** directory inside a root **src** directory. Expo Router automatically detects the **src/app** directory as the root of your routes.
+
+Ensure your **tsconfig.json** and **app.json** are properly configured
+
+```json tsconfig.json
+{
+ "extends": "expo/tsconfig.base",
+ "compilerOptions": {
+ "strict": true,
+ "paths": {
+ "@/*": ["./src/*"],
+ "@/assets/*": ["./assets/*"]
+ }
+ },
+ "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}
+```
+
+Also ensure your **app.json** has the `expo-router` plugin configured:
+
+```json app.json
+{
+ "expo": {
+ /* @hide ... */
+ /* @end */
+ "plugins": ["expo-router"]
+ }
+}
+```
Layout the structure of your app by creating files according to the [application of Expo Router rules](/router/basics/core-concepts/#the-rules-of-expo-router-applied). Kebab-case and lowercase letters are considered best practice for route filenames.
@@ -127,16 +155,16 @@ function App() {
`, ``, and `` use a shared appearance provider. In React Navigation, you set the theme for the entire app using the `
The Root Layout is a stack navigator:
- ```tsx app/_layout.tsx
+ ```tsx src/app/_layout.tsx
import { Stack } from 'expo-router';
export default function Layout() {
@@ -47,9 +47,9 @@ The example below demonstrates the difference between `useLocalSearchParams` and
- The initial route redirects to the dynamic route **app/[user].tsx**, with **user=evanbacon**:
+ The initial route redirects to the dynamic route **src/app/[user].tsx**, with **user=evanbacon**:
- ```tsx app/index.tsx
+ ```tsx src/app/index.tsx
import { Redirect } from 'expo-router';
export default function Route() {
@@ -61,9 +61,9 @@ The example below demonstrates the difference between `useLocalSearchParams` and
- The dynamic route **app/[user]** prints out the global and local URL parameters (route parameters, in this case). It also allows for pushing new instances of the same route with different **route parameters**:
+ The dynamic route **src/app/[user]** prints out the global and local URL parameters (route parameters, in this case). It also allows for pushing new instances of the same route with different **route parameters**:
- ```tsx app/[user].tsx
+ ```tsx src/app/[user].tsx
import { Text, View } from 'react-native';
import { useLocalSearchParams, useGlobalSearchParams, Link } from 'expo-router';
@@ -132,7 +132,7 @@ Pressing "Visit james" has a similar effect:
Both the `useLocalSearchParams` and `useGlobalSearchParams` can be statically typed using a generic. The following is an example for the `user` route parameter:
-```tsx app/[user].tsx
+```tsx src/app/[user].tsx
import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
@@ -148,7 +148,7 @@ export default function Route() {
Any search parameters (for example, `?query=...`) can be typed optionally:
-```tsx app/[user].tsx
+```tsx src/app/[user].tsx
const { user, query } = useLocalSearchParams<{ user: string; query?: string }>();
// Given the URL: `/evanbacon?query=hello`
@@ -157,7 +157,7 @@ const { user, query } = useLocalSearchParams<{ user: string; query?: string }>()
When used with the rest syntax (`...`), route parameters are returned as a string array:
-```tsx app/[...everything].tsx
+```tsx src/app/[...everything].tsx
import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
@@ -179,7 +179,7 @@ export default function Route() {
Any search parameters will continue to be returned as individual strings:
{/* prettier-ignore */}
-```tsx app/[...everything].tsx
+```tsx src/app/[...everything].tsx
import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
@@ -208,7 +208,7 @@ URL parameters can be updated using the **router.setParams** function from the i
The following example uses a `` to update the search parameter **q**:
-```tsx app/search.tsx
+```tsx src/app/search.tsx
import { useLocalSearchParams, router } from 'expo-router';
import { useState } from 'react';
import { TextInput, View } from 'react-native';
@@ -243,7 +243,7 @@ export default function Page() {
Here is an example using an `onPress` event to update the route parameter **user**:
-```tsx app/[user].tsx
+```tsx src/app/[user].tsx
import { useLocalSearchParams, router } from 'expo-router';
import { Text } from 'react-native';
@@ -265,9 +265,9 @@ Route parameters are used to match a route, while search parameters are used to
) {
// const postId = new URL(request.url).searchParams.get('post')
// fetch data for 'post'
@@ -143,7 +143,7 @@ export async function GET(request: Request, { post }: Record) {
Use the `request.json()` function to access the request body. It automatically parses the body and returns the result.
-```ts app/validate+api.ts
+```ts src/app/validate+api.ts
export async function POST(request: Request) {
const body = await request.json();
@@ -155,7 +155,7 @@ export async function POST(request: Request) {
Query parameters can be accessed by parsing the request URL:
-```ts app/endpoint+api.ts
+```ts src/app/endpoint+api.ts
export async function GET(request: Request) {
const url = new URL(request.url);
const post = url.searchParams.get('post');
@@ -169,7 +169,7 @@ export async function GET(request: Request) {
Responses use the global, standard [`Response`](https://fetch.spec.whatwg.org/#response) object.
-```ts app/demo+api.ts
+```ts src/app/demo+api.ts
export function GET() {
return Response.json({ hello: 'universe' });
}
@@ -179,7 +179,7 @@ export function GET() {
For error cases, you can create `Response`s with any status code and response body.
-```ts app/blog/[post]+api.ts
+```ts src/app/blog/[post]+api.ts
export async function GET(request: Request, { post }: Record) {
if (!post) {
return new Response('No post found', {
@@ -210,7 +210,7 @@ Using `expo-server` is not limited to API routes and it can be used in any other
You can abort a request and instead return an error `Response` by throwing a [`StatusError`](/versions/latest/sdk/server/#statuserror). This is a special `Error` instance that will be replaced with an HTTP response replacing the error itself.
-```ts app/blog/[post]+api.ts
+```ts src/app/blog/[post]+api.ts
import { StatusError } from 'expo-server';
export async function GET(request: Request, { post }: Record) {
@@ -227,7 +227,7 @@ When composing your own server utilities and helpers, the `StatusError` is a mor
This can be restrictive, and isn't suitable for all cases. Sometimes it might be beneficial to instead `throw` a `Response` object, which interrupts your logic as well, but replaces the resolved `Response` from your API route directly, without a `StatusError` wrapper. For example, this can be used to create redirect responses.
-```ts app/blog/[post]+api.ts
+```ts src/app/blog/[post]+api.ts
import { StatusError } from 'expo-server';
export async function GET(request: Request, { post }: Record) {
@@ -246,7 +246,7 @@ Helper functions from `expo-server` return values that are scoped to the current
A common value that you may need to access is the request's origin URL. The origin URL, typically transmitted on a request's `Origin` header, represents the URL that a user used to access your API route. This may differ from any internal deployment URL that your server sees when the request is being proxied. You can use `expo-server`'s [`origin()`](/versions/latest/sdk/server/#origin) helper method to access this value.
-```ts app/help+api.ts
+```ts src/app/help+api.ts
import { origin } from 'expo-server';
export async function GET(request: Request) {
@@ -257,7 +257,7 @@ export async function GET(request: Request) {
Most runtimes that you deploy your server code to have a concept of environments, to differentiate between production or staging deployments. You can use `expo-server`'s [`environment()`](/versions/latest/sdk/server/#environment) helper to get an environment name. This value will differ depending on how you're running your server code.
-```ts app/env+api.ts
+```ts src/app/env+api.ts
import { environment } from 'expo-server';
export async function GET(request: Request) {
@@ -276,7 +276,7 @@ export async function GET(request: Request) {
In your request handlers, you may need to run asynchronous tasks in parallel to your server logic.
-```ts app/tasks+api.ts
+```ts src/app/tasks+api.ts
export async function GET(request: Request) {
// This will delay the response:
await pingAnalytics(...);
@@ -290,7 +290,7 @@ In the above example, an `await`-ed function call delays the rest of the API rou
Instead, you can use `expo-server`'s [`runTask()`](/versions/latest/sdk/server/#runtaskfn) helper function to run concurrent tasks. This is equivalent to the [`waitUntil()`](https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil) method that you see in service worker code or other serverless runtimes.
-```ts app/tasks+api.ts
+```ts src/app/tasks+api.ts
import { runTask } from 'expo-server';
export async function GET(request: Request) {
@@ -310,7 +310,7 @@ However, sometimes you may want to delay a task until after the API route has re
You can use `expo-server`'s [`deferTask()`](/versions/latest/sdk/server/#defertaskfn) helper function to schedule tasks to run after a `Response` has been resolved by your API route.
-```ts app/tasks+api.ts
+```ts src/app/tasks+api.ts
import { deferTask } from 'expo-server';
export async function GET(request: Request) {
@@ -330,7 +330,7 @@ When structuring and splitting server logic into separate helper functions and f
For example, you may need to add metadata in [server middleware](/router/web/middleware/) to a `Response` before your API route code is running.
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
import { setResponseHeaders } from 'expo-server';
export default function middleware(request: Request) {
@@ -341,7 +341,7 @@ export default function middleware(request: Request) {
In the above example, a `Retry-After` header is added to a future `Response` that an API route may be creating. This can also be extended for authentication and cookies.
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
import { setResponseHeaders } from 'expo-server';
export default function middleware(request: Request) {
@@ -367,7 +367,7 @@ API Routes are bundled with Expo CLI and [Metro bundler](/guides/customizing-met
Route handlers are executed in a sandboxed environment that is isolated from the client code. It means you can safely store sensitive data in the route handlers without exposing it to the client.
-- Client code that imports code with a secret is included in the client bundle. It applies to **all files** in the **app directory** even though they are not a route handler file (such as suffixed with **+api.ts**).
+- Client code that imports code with a secret is included in the client bundle. It applies to **all files** in the **src/app directory** even though they are not a route handler file (such as suffixed with **+api.ts**).
- If the secret is in a **<...>+api.ts** file, it is not included in the client bundle. It applies to all files that are imported in the route handler.
- The secret stripping takes place in `expo/metro-config` and requires it to be used in the **metro.config.js**.
diff --git a/docs/pages/router/web/data-loaders.mdx b/docs/pages/router/web/data-loaders.mdx
index 106f6a52065e49..7ab1994a7091bb 100644
--- a/docs/pages/router/web/data-loaders.mdx
+++ b/docs/pages/router/web/data-loaders.mdx
@@ -10,7 +10,7 @@ import { Step } from '~/ui/components/Step';
> **important** Data loaders are in alpha and are available in SDK 55 and later. They require either [static rendering](/router/web/static-rendering) or [server rendering](/router/web/server-rendering).
-Data loaders enable server-side data fetching for your routes. By exporting a `loader` function from a route file, you can fetch data on the server and access it in your component using the [`useLoaderData`](/versions/unversioned/sdk/router/#useloaderdata) hook. This lets you keep sensitive data and API keys on the server while providing your components with the data they need.
+Data loaders enable server-side data fetching for your routes. By exporting a `loader` function from a route file, you can fetch data on the server and access it in your component using the [`useLoaderData`](/versions/latest/sdk/router/#useloaderdata) hook. This lets you keep sensitive data and API keys on the server while providing your components with the data they need.
## Setup
@@ -72,9 +72,9 @@ Start the development server:
## Basic example
-Export a `loader` function from your route file and use the [`useLoaderData`](/versions/unversioned/sdk/router/#useloaderdata) hook to access the data in your component:
+Export a `loader` function from your route file and use the [`useLoaderData`](/versions/latest/sdk/router/#useloaderdata) hook to access the data in your component:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Text, View } from 'react-native';
import { useLoaderData } from 'expo-router';
@@ -95,17 +95,17 @@ export default function Home() {
}
```
-The `loader` function executes on the server, and its return value is serialized and passed to your component. This means you can safely use server-side secrets, database connections, and other resources that should not be exposed to the client. When using TypeScript, passing `typeof loader` as the generic parameter to [`useLoaderData`](/versions/unversioned/sdk/router/#useloaderdata) allows the hook to infer the return type from your loader function.
+The `loader` function executes on the server, and its return value is serialized and passed to your component. This means you can safely use server-side secrets, database connections, and other resources that should not be exposed to the client. When using TypeScript, passing `typeof loader` as the generic parameter to [`useLoaderData`](/versions/latest/sdk/router/#useloaderdata) allows the hook to infer the return type from your loader function.
-> **info** The [`useLoaderData`](/versions/unversioned/sdk/router/#useloaderdata) hook does not need to be called in the route component itself. It can be called in any child component within the route's component tree.
+> **info** The [`useLoaderData`](/versions/latest/sdk/router/#useloaderdata) hook does not need to be called in the route component itself. It can be called in any child component within the route's component tree.
### Using Suspense
-When a component calls the [`useLoaderData`](/versions/unversioned/sdk/router/#useloaderdata) hook while data is still loading, React suspends that component. The loading state cascades up the component tree until it reaches the nearest [``](https://react.dev/reference/react/Suspense) boundary, which then renders its fallback.
+When a component calls the [`useLoaderData`](/versions/latest/sdk/router/#useloaderdata) hook while data is still loading, React suspends that component. The loading state cascades up the component tree until it reaches the nearest [``](https://react.dev/reference/react/Suspense) boundary, which then renders its fallback.
This lets you control exactly where loading fallbacks appear by placing [``](https://react.dev/reference/react/Suspense) boundaries in your component tree:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Suspense } from 'react';
import { Text, View } from 'react-native';
import { useLoaderData } from 'expo-router';
@@ -132,13 +132,13 @@ function DataSection() {
}
```
-In the above example, [`useLoaderData`](/versions/unversioned/sdk/router/#useloaderdata) is in a child component of `` and wrapped it with [``](https://react.dev/reference/react/Suspense) to show a loading state.
+In the above example, [`useLoaderData`](/versions/latest/sdk/router/#useloaderdata) is in a child component of `` and wrapped it with [``](https://react.dev/reference/react/Suspense) to show a loading state.
### Error handling
When a loader throws an error, it propagates to the nearest [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary). You can export an [`ErrorBoundary`](/versions/latest/sdk/router/#errorboundary) component from the same route file to handle loader errors:
-```tsx app/data.tsx
+```tsx src/app/data.tsx
import { Text, View } from 'react-native';
import { useLoaderData, type ErrorBoundaryProps } from 'expo-router';
@@ -175,7 +175,7 @@ When no `ErrorBoundary` is exported, the error propagates to the nearest parent
Loaders receive route parameters as the second argument:
-```tsx app/posts/[postId].tsx
+```tsx src/app/posts/[postId].tsx
import { Text, View } from 'react-native';
import { useLoaderData } from 'expo-router';
@@ -202,7 +202,7 @@ export default function Post() {
When using [server rendering](/router/web/server-rendering), loaders receive the incoming HTTP request as the first argument. This allows you to access headers, cookies, and other request information:
-```tsx app/profile.tsx
+```tsx src/app/profile.tsx
import { Text, View } from 'react-native';
import { useLoaderData } from 'expo-router';
@@ -241,7 +241,7 @@ export default function Profile() {
Loaders can return data as plain JSON, which is easily deserialized using [`JSON.parse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse). This includes objects, arrays or any other primitive that can be serialized with [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
-```tsx app/index.tsx
+```tsx src/app/index.tsx
export async function loader() {
const response = await fetch('https://api.example.com/data');
return response.json();
@@ -254,7 +254,7 @@ If your loader returns `undefined` or `null`, the value is normalized to `null`.
Data loaders have full access to the [Runtime API](/router/web/api-routes/#runtime-api) from [`expo-server`](/versions/latest/sdk/server/). This includes utilities for setting response headers, throwing HTTP errors, and running background tasks:
-```tsx app/example.tsx
+```tsx src/app/example.tsx
import { setResponseHeaders, StatusError } from 'expo-server';
export async function loader(request) {
@@ -276,7 +276,7 @@ See the [Runtime API documentation](/router/web/api-routes/#runtime-api) for a f
Loaders run on the server and have access to `process.env`. Environment variables used in loaders are never exposed to the client bundle. This is useful for accessing API keys and other secrets:
-```tsx app/api-data.tsx
+```tsx src/app/api-data.tsx
import { Text, View } from 'react-native';
import { useLoaderData } from 'expo-router';
@@ -332,7 +332,7 @@ With server rendering, loaders execute on every request. This means:
For improved type safety, you can import the `LoaderFunction` type from `expo-router`:
-```tsx app/posts/[postId].tsx
+```tsx src/app/posts/[postId].tsx
import { Text, View } from 'react-native';
import { useLoaderData } from 'expo-router';
import { type LoaderFunction } from 'expo-router/server';
@@ -374,6 +374,6 @@ Yes. Data loaders work with both static rendering (`web.output: 'static'`) and s
-No, `loader` exports are dropped from the client bundle. However, if another module contains server-side logic and is imported by client-side code outside of the **app** directory, it may be included in your client-side bundle.
+No, `loader` exports are dropped from the client bundle. However, if another module contains server-side logic and is imported by client-side code outside of the **src/app** directory, it may be included in your client-side bundle.
diff --git a/docs/pages/router/web/middleware.mdx b/docs/pages/router/web/middleware.mdx
index 92333e9d29a49e..59d5eeac4de9d5 100644
--- a/docs/pages/router/web/middleware.mdx
+++ b/docs/pages/router/web/middleware.mdx
@@ -50,9 +50,9 @@ First, configure your app to use server output by adding the server configuratio
### Create your middleware file
-Create a **+middleware.ts** file in your **app** directory, to define your server middleware function:
+Create a **+middleware.ts** file in your **src/app** directory, to define your server middleware function:
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
export default function middleware(request) {
console.log(`Middleware executed for: ${request.url}`);
// Your middleware logic goes here
@@ -89,7 +89,7 @@ Visit your app in a browser or make requests to test that your middleware is wor
By default, middleware runs on all server requests. You can add a matcher to control when your middleware executes with `unstable_settings`:
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
export const unstable_settings = {
matcher: {
// Only run on GET requests
@@ -175,7 +175,7 @@ Middleware does not run for:
Middleware is often used to perform authorization checks before a route has loaded. You can check headers, cookies, or query parameters to determine if a user has access to certain routes:
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
import { jwtVerify } from 'jose';
export default function middleware(request) {
@@ -194,7 +194,7 @@ export default function middleware(request) {
You can use middleware to log requests for debugging or analytics purposes. This can help you track user activity or diagnose issues in your app:
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
export default function middleware(request) {
console.log(`${request.method} ${request.url}`);
}
@@ -206,7 +206,7 @@ export default function middleware(request) {
Middleware can also be used to perform dynamic redirects. This allows you to control user navigation based on specific conditions:
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
export default function middleware(request) {
if (request.headers.has('specific-header')) {
return Response.redirect('https://expo.dev');
@@ -220,7 +220,7 @@ export default function middleware(request) {
Use matchers to run middleware only for API routes, keeping other routes unaffected:
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
export const unstable_settings = {
matcher: {
patterns: ['/api'],
@@ -244,7 +244,7 @@ export default function middleware(request) {
Protect write operations (POST, PUT, DELETE) while allowing public read access:
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
export const unstable_settings = {
matcher: {
methods: ['POST', 'PUT', 'DELETE'],
@@ -272,7 +272,7 @@ function isValidToken(token: string): boolean {
Monitor specific endpoints without logging every request:
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
export const unstable_settings = {
matcher: {
patterns: ['/api/users/[userId]', '/admin', /^\/webhook/],
@@ -301,7 +301,7 @@ export default function middleware(request) {
### Typed middleware
-```ts app/+middleware.ts
+```ts src/app/+middleware.ts
import { MiddlewareFunction } from 'expo-router/server';
const middleware: MiddlewareFunction = request => {
diff --git a/docs/pages/router/web/server-rendering.mdx b/docs/pages/router/web/server-rendering.mdx
index f1d6b6c9c713c3..83d77091804769 100644
--- a/docs/pages/router/web/server-rendering.mdx
+++ b/docs/pages/router/web/server-rendering.mdx
@@ -85,7 +85,7 @@ The above command starts a local server that renders pages on each request, simu
With server rendering, dynamic routes are rendered on the fly, and the [`generateStaticParams`](/router/web/static-rendering/#generatestaticparams) export is not needed and should be removed. If your route file exports `generateStaticParams`, those routes will be handled dynamically instead. The route is rendered at request time with the actual parameters from the URL.
-```tsx app/blog/[id].tsx
+```tsx src/app/blog/[id].tsx
import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
@@ -102,9 +102,9 @@ In the above example, when the app user visits `/blog/my-post`, the page is rend
## Root HTML
-You can customize the root HTML document by creating an **app/+html.tsx** file. This component wraps all routes and runs only on the server.
+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.
-```tsx app/+html.tsx
+```tsx src/app/+html.tsx
import { ScrollViewStyleReset } from 'expo-router/html';
import { type PropsWithChildren } from 'react';
@@ -147,7 +147,7 @@ All `+html.tsx` components are expected to render the `children` prop they recei
Add meta tags to your pages using the ` ` component from `expo-router`:
-```tsx app/about.tsx
+```tsx src/app/about.tsx
import Head from 'expo-router/head';
import { Text } from 'react-native';
diff --git a/docs/pages/router/web/static-rendering.mdx b/docs/pages/router/web/static-rendering.mdx
index b366b5c5ac9b67..95303b0084a4cf 100644
--- a/docs/pages/router/web/static-rendering.mdx
+++ b/docs/pages/router/web/static-rendering.mdx
@@ -51,13 +51,13 @@ You can test the production build locally by running the following command and o
[]> {
/* @info Prints the current working directory */
console.log(process.cwd());
@@ -97,7 +97,7 @@ export async function generateStaticParams(): Promise[]>
`generateStaticParams` cascades from nested parents down to children. The cascading parameters are passed to every dynamic child route that exports **generateStaticParams**.
-```tsx app/[id]/_layout.tsx
+```tsx src/app/[id]/_layout.tsx
export async function generateStaticParams(): Promise[]> {
/* @info Any dynamic children that export []>
Now the dynamic child routes will be invoked twice, once with `{ id: 'one' }` and once with `{ id: 'two' }`. All variations must be accounted for.
-```tsx app/[id]/[comment].tsx
+```tsx src/app/[id]/[comment].tsx
export async function generateStaticParams(params: {
id: 'one' | 'two';
}): Promise[]> {
@@ -131,7 +131,7 @@ Since Expo Router compiles your code into a separate directory you cannot use `_
Instead, use `process.cwd()`, which gives you the directory where the project is being compiled.
-```tsx app/[category].tsx
+```tsx src/app/[category].tsx
import fs from 'node:fs/promises';
import path from 'node:path';
@@ -152,11 +152,11 @@ export async function generateStaticParams(params: {
By default, every page is wrapped with some small HTML boilerplate, this is known as the **root HTML**.
-You can customize the root HTML file by creating an **app/+html.tsx** file in your project. This file exports a React component that only ever runs in Node.js, which means global CSS cannot be imported inside of it. The component will wrap all routes in the **app** directory. This is useful for adding global `` elements or disabling body scrolling.
+You can customize the root HTML file by creating a **src/app/+html.tsx** file in your project. This file exports a React component that only ever runs in Node.js, which means global CSS cannot be imported inside of it. The component will wrap all routes in the **app** directory. This is useful for adding global `` elements or disabling body scrolling.
> **Note**: Global context providers should go in the [Root Layout](/router/basics/layout/#root-layout) component, not the Root HTML component.
-```tsx app/+html.tsx
+```tsx src/app/+html.tsx
import { ScrollViewStyleReset } from 'expo-router/html';
import { type PropsWithChildren } from 'react';
@@ -202,7 +202,7 @@ The exports from `expo-router/html` are related to the Root HTML component.
You can add meta tags to your pages with the ` ` module from `expo-router`:
-```tsx app/about.tsx
+```tsx src/app/about.tsx
import Head from 'expo-router/head';
import { Text } from 'react-native';
@@ -246,7 +246,7 @@ These files will be copied to the **dist** directory during static rendering:
> **info** **Web only**: Static assets can be accessed in runtime code using relative paths. For example, the **logo.png** can be accessed at `/logo.png`:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { Image } from 'react-native';
export default function Page() {
@@ -260,7 +260,7 @@ Expo Font has automatic static optimization for font loading in Expo Router. Whe
The following snippet will load Inter into the namespace and statically optimize on web:
-```tsx app/home.tsx
+```tsx src/app/home.tsx
import { Text } from 'react-native';
import { useFonts } from 'expo-font';
diff --git a/docs/pages/tutorial/create-your-first-app.mdx b/docs/pages/tutorial/create-your-first-app.mdx
index 1ba40ba0e43a72..68bf9df9f365c2 100644
--- a/docs/pages/tutorial/create-your-first-app.mdx
+++ b/docs/pages/tutorial/create-your-first-app.mdx
@@ -51,6 +51,8 @@ We'll use [`create-expo-app`](/more/create-expo/) to initialize a new Expo app.
This command will create a new project directory named StickerSmash, using the [default](/more/create-expo/#--template) template. This template has essential boilerplate code and libraries needed to build our app, including Expo Router. We'll continue to add more libraries throughout this tutorial as needed.
+> **info** `create-expo-app@latest` currently creates an SDK 54 project. This tutorial is designed for SDK 54, so no `--template` flag is needed.
+
- Creates a new React Native project with `expo` package installed
diff --git a/docs/pages/tutorial/follow-up.mdx b/docs/pages/tutorial/follow-up.mdx
index 748db57ee2561b..e802ed6d673f04 100644
--- a/docs/pages/tutorial/follow-up.mdx
+++ b/docs/pages/tutorial/follow-up.mdx
@@ -9,7 +9,9 @@ Now that the example app is done, let's learn more about the technologies we use
## Build your project into an app
-To start creating a new app on your machine you can use `npx create-expo-app@latest` and [set up your development environment](/get-started/set-up-your-environment/) sequentially.
+To start creating a new app on your machine you can use `npx create-expo-app@latest --template default@sdk-55` and [set up your development environment](/get-started/set-up-your-environment/) sequentially.
+
+> **Note:** During the SDK 55 transition period, `create-expo-app@latest` without the `--template` flag creates an SDK 54 project. If you plan to use Expo Go on a physical device, use an SDK 54 project. Otherwise, use `--template default@sdk-55` to create an SDK 55 project.
### Recommended resources
diff --git a/docs/pages/versions/unversioned/index.mdx b/docs/pages/versions/unversioned/index.mdx
index a783d7b7f50e9f..e4217d3caf381a 100644
--- a/docs/pages/versions/unversioned/index.mdx
+++ b/docs/pages/versions/unversioned/index.mdx
@@ -68,7 +68,7 @@ New Expo SDK versions are released three times each year. Between these releases
### Canary releases
-Canary releases represent a snapshot of the state of the `main` branch at the time they are published. Canary package versions include `-canary` in the name, along with the date and commit hash, such as `54.0.0-canary-20240418-8d74597`. To install the latest canary release:
+Canary releases represent a snapshot of the state of the `main` branch at the time they are published. Canary package versions include `-canary` in the name, along with the date and commit hash, such as `55.0.0-canary-20260121-a63c0dd`. To install the latest canary release:
{
- if (loaded) {
+ if (isReady) {
SplashScreen.hide();
}
- }, [loaded]);
+ }, [isReady]);
- if (!loaded) {
+ if (!isReady) {
return null;
}
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx
index 06f95256c5a68e..e1a0d7ff17f96d 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/label.mdx
@@ -49,7 +49,7 @@ export default function LabelCustomIconExample() {
### Icon only
-Use the [`labelStyle`](/versions/unversioned/sdk/ui/swift-ui/modifiers/#labelstyle) modifier with `iconOnly` to display only the icon. Always provide a `title` for accessibility even though it won't be visible.
+Use the [`labelStyle`](/versions/latest/sdk/ui/swift-ui/modifiers/#labelstyle) modifier with `iconOnly` to display only the icon. Always provide a `title` for accessibility even though it won't be visible.
```tsx LabelIconOnlyExample.tsx
import { Host, Label } from '@expo/ui/swift-ui';
diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/rnhostview.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/rnhostview.mdx
index b6e35e3ef20fce..3d04e119317749 100644
--- a/docs/pages/versions/unversioned/sdk/ui/swift-ui/rnhostview.mdx
+++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/rnhostview.mdx
@@ -88,7 +88,7 @@ function Example() {
### Usage with Popover
-`RNHostView` works well inside [`Popover`](/versions/unversioned/sdk/ui/swift-ui/popover) to display interactive React Native content.
+`RNHostView` works well inside [`Popover`](/versions/latest/sdk/ui/swift-ui/popover) to display interactive React Native content.
```tsx RNHostView in Popover
import { useState } from 'react';
diff --git a/docs/pages/versions/v52.0.0/config/app.mdx b/docs/pages/versions/v52.0.0/config/app.mdx
deleted file mode 100644
index 90c6c29dbc6bd5..00000000000000
--- a/docs/pages/versions/v52.0.0/config/app.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: app.json / app.config.js
-description: A reference of available properties in Expo app config.
-maxHeadingDepth: 5
----
-
-import { BookOpen02Icon } from '@expo/styleguide-icons/outline/BookOpen02Icon';
-
-import schema from '~/public/static/schemas/unversioned/app-config-schema.json';
-import AppConfigSchemaTable from '~/ui/components/AppConfigSchemaTable';
-import { BoxLink } from '~/ui/components/BoxLink';
-
-The following is a list of properties that are available for you under the `"expo"` key in **app.json** or **app.config.json**. These properties can be passed to the top level object of **app.config.js** or **app.config.ts**.
-
-
-
-
-
-CSS support is enabled by default. You can disable the feature by setting `isCSSEnabled` in the Metro config.
-
-```js metro.config.js
-/** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(__dirname, {
- // Disable CSS support.
- isCSSEnabled: false,
-});
-```
-
-
-
-
-
-To enable CSS support, set `isCSSEnabled` to `true` in the Metro config.
-
-```js metro.config.js
-/** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(__dirname, {
- isCSSEnabled: true,
-});
-```
-
-
-
-
-
-### Global CSS
-
-> **warning** Global styles are web-only, usage will cause your application to diverge visually on native.
-
-You can import a CSS file from any component. The CSS will be applied to the entire page.
-
-Here, we'll define a global style for the class name `.container`:
-
-```css styles.css
-.container {
- background-color: red;
-}
-```
-
-We can then use the class name in our component by importing the stylesheet and using `.container`:
-
-```jsx App.js|collapseHeight=470
-import './styles.css';
-import { View } from 'react-native';
-
-export default function App() {
- return (
- <>
- {/* Use `className` to assign the style with React DOM components. */}
-
- 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.
-
-## 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:
-
-```js
-import { Image } from 'react-native';
-
-import asset from './img.png';
-
-function Demo() {
- return .xcodeproj/project.pbxproj`
-
-In your `ios/.xcodeproj/project.pbxproj` file, replace the following scripts:
-
-#### `"Start Packager"`
-
-Remove the "Start Packager" script in SDK 50 and later. The dev server must be started with `npx expo` before/after running the app.
-
-.xcodeproj/project.pbxproj` file, replace the `"Bundle React Native code and images"` script to set `$ENTRY_FILE` according using Metro:
-
-
-
-## `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](/workflow/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/v52.0.0/index.mdx b/docs/pages/versions/v52.0.0/index.mdx
deleted file mode 100644
index 2deb754c194c1f..00000000000000
--- a/docs/pages/versions/v52.0.0/index.mdx
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: Reference
-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 provides access to device and system functionality such as contacts, camera, gyroscope, GPS location, and so on, in the form of packages. You can install any Expo SDK package using the `npx expo 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`, 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,
- },
-});
-```
-
-
-
-### Recording sounds
-
-
-
-```jsx
-import { useState } from 'react';
-import { View, StyleSheet, Button } from 'react-native';
-import { useAudioRecorder, AudioModule, RecordingPresets } from 'expo-audio';
-
-export default function App() {
- const audioRecorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
-
- 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');
- }
- })();
- }, []);
-
- 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(() => {
- checkStatusAsync();
- }, []);
-
- const checkStatusAsync = async () => {
- const status = await BackgroundTask.getStatusAsync();
- setStatus(status);
- };
-
- const toggle = async () => {
- if (isRegistered) {
- await registerBackgroundTaskAsync();
- } else {
- await unregisterBackgroundTaskAsync();
- }
- setIsRegistered(!isRegistered);
- };
-
- 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.
-
-## API
-
-```js
-import * as BackgroundTask from 'expo-background-task';
-```
-
-
-
-```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/v52.0.0/sdk/brightness.mdx b/docs/pages/versions/v52.0.0/sdk/brightness.mdx
deleted file mode 100644
index dd8fc1c7e8daef..00000000000000
--- a/docs/pages/versions/v52.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-52/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';
-```
-
-
-
-```jsx
-import { Camera } from 'expo-camera';
-import * as FaceDetector from 'expo-face-detector';
-
-const App = () => (
-
-
-## API
-
-```js
-import * as FaceDetector from 'expo-face-detector';
-```
-
-
-
-
-
- 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**. - -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",
- {
- "fonts": ["path/to/file.ttf"]
- }
- ]
- ]
- }
-}
-```
-
-
-
-
-
-- **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
-
-
-
-```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() {
- 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,
- },
-});
-```
-
-
-
-## API
-
-```js
-import LottieView from 'lottie-react-native';
-```
-
-Refer to the [lottie-react-native repository](https://github.com/lottie-react-native/lottie-react-native#usage) for more detailed documentation.
diff --git a/docs/pages/versions/v52.0.0/sdk/magnetometer.mdx b/docs/pages/versions/v52.0.0/sdk/magnetometer.mdx
deleted file mode 100644
index ee126cca0b7624..00000000000000
--- a/docs/pages/versions/v52.0.0/sdk/magnetometer.mdx
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Magnetometer
-description: A library that provides access to the device's magnetometer sensor.
-sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-52/packages/expo-sensors'
-packageName: 'expo-sensors'
-iconUrl: '/static/images/packages/expo-sensors.png'
-platforms: ['android', 'ios', 'expo-go']
----
-
-import APISection from '~/components/plugins/APISection';
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { SnackInline } from '~/ui/components/Snippet';
-
-`Magnetometer` from `expo-sensors` provides access to the device magnetometer sensor(s) to respond to and measure the changes in the magnetic field measured in microtesla (`Ī¼T`).
-
-You can access the calibrated values with `Magnetometer` and uncalibrated raw values with `MagnetometerUncalibrated`.
-
-## Installation
-
-
-
-```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/v52.0.0/sdk/maps.mdx b/docs/pages/versions/v52.0.0/sdk/maps.mdx
deleted file mode 100644
index 8fc470e5ebe2d8..00000000000000
--- a/docs/pages/versions/v52.0.0/sdk/maps.mdx
+++ /dev/null
@@ -1,192 +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/main/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 **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 **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';
-```
-
-
-
-```tsx
-import { useState, useEffect, useRef } 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 () => ({
- shouldShowAlert: true,
- shouldPlaySound: false,
- shouldSetBadge: false,
- }),
-});
-
-export default function App() {
- const [expoPushToken, setExpoPushToken] = useState('');
- const [channels, setChannels] = useState([]);
- const [notification, setNotification] = useState(
- undefined
- );
- const notificationListener = useRef();
- const responseListener = useRef();
-
- useEffect(() => {
- registerForPushNotificationsAsync().then(token => token && setExpoPushToken(token));
-
- if (Platform.OS === 'android') {
- Notifications.getNotificationChannelsAsync().then(value => setChannels(value ?? []));
- }
- notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
- setNotification(notification);
- });
-
- responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
- console.log(response);
- });
-
- return () => {
- notificationListener.current &&
- Notifications.removeNotificationSubscription(notificationListener.current);
- responseListener.current &&
- Notifications.removeNotificationSubscription(responseListener.current);
- };
- }, []);
-
- 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 () => ({
- shouldShowAlert: 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
-
-#### Android
-
-Firebase Cloud Messaging credentials are required for all Android apps to receive push notifications in your app (except when testing in Expo Go). For more information, see how to get [FCM credentials](/push-notifications/push-notifications-setup/#android) for your app.
-
-#### iOS
-
-To register your iOS device and automatically enable push notifications for your EAS Build, see [push notification setup](/push-notifications/push-notifications-setup/#ios).
-
-### 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/sdk-52/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/v52.0.0/sdk/reanimated.mdx b/docs/pages/versions/v52.0.0/sdk/reanimated.mdx
deleted file mode 100644
index 6614d8c0ad8aa5..00000000000000
--- a/docs/pages/versions/v52.0.0/sdk/reanimated.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: React Native Reanimated
-sidebar_title: 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']
----
-
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { SnackInline } from '~/ui/components/Snippet';
-
-> **info** This library is listed in the Expo SDK reference because it is included in [Expo Go](https://expo.dev/go). You may use any library of your choice with [development builds](/develop/development-builds/introduction/).
-
-[`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. For more information on the API and its usage, see [`react-native-reanimated` documentation](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-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,
- },
-});
-```
-
-
diff --git a/docs/pages/versions/v52.0.0/sdk/register-root-component.mdx b/docs/pages/versions/v52.0.0/sdk/register-root-component.mdx
deleted file mode 100644
index 6c5c7e55151fdf..00000000000000
--- a/docs/pages/versions/v52.0.0/sdk/register-root-component.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: registerRootComponent
-description: A universal component that allows setting the initial React component to render natively in the app's root React Native view.
-sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-52/packages/expo/src/launch'
-packageName: 'expo'
-platforms: ['android', 'ios', 'tvos', 'web']
----
-
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-
-Sets the initial React component to render natively in the app's root React Native view on Android, iOS, and the web. It also adds dev-only debugging tools for use with `npx expo start`.
-
-## Installation
-
-
-
-```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
-
-Find more information and guides about using `expo-router` in [Expo Router](/router/introduction/) section.
-
-## API
-
-```js
-import { Stack, Tabs, Link } from 'expo-router';
-```
-
-
-
-`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).
-
-> **Note**: See [`react-native-screens` issue tracker](https://github.com/software-mansion/react-native-screens/issues) if you encounter any problems.
-
-## 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
-
-
-## API
-
-```js
-import * as Sensors from 'expo-sensors';
-// OR
-import {
- Accelerometer,
- Barometer,
- DeviceMotion,
- Gyroscope,
- LightSensor,
- Magnetometer,
- MagnetometerUncalibrated,
- Pedometer,
-} from 'expo-sensors';
-```
-
-## Permissions
-
-### Android
-
-Starting in Android 12 (API level 31), the system has a 200Hz limit for each sensor updates.
-
-If you need an update interval of greater than 200Hz, you must add the following permissions to your **app.json** inside the [`expo.android.permissions`](../config/app/#permissions) array.
-
-
-
-```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';
-```
-
-
- 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/sdk-52/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.
-
-## 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';
-```
-
-
-
-```tsx
-import Svg, { Circle, Rect } from 'react-native-svg';
-
-export default function SvgComponent(props) {
- return (
-
- );
-}
-```
-
-
-
-### Pro 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 [React SVGR](https://react-svgr.com/playground/?native=true&typescript=true).
diff --git a/docs/pages/versions/v52.0.0/sdk/symbols.mdx b/docs/pages/versions/v52.0.0/sdk/symbols.mdx
deleted file mode 100644
index 16a0fca03dcc3e..00000000000000
--- a/docs/pages/versions/v52.0.0/sdk/symbols.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Symbols
-description: A library that allows access to native symbols.
-sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-52/packages/expo-symbols'
-packageName: 'expo-symbols'
-iconUrl: '/static/images/packages/expo-symbols.png'
-platforms: ['ios', 'expo-go']
----
-
-import APISection from '~/components/plugins/APISection';
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
-
-> **warning** This library is currently in beta and subject to breaking changes.
-
-`expo-symbols` provides access to the [SF Symbols](https://developer.apple.com/sf-symbols/) library on iOS.
-
-
-
- );
-}
-
-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';
-```
-
-
-
-```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';
-```
-
-
-
-
-
-## 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-advanced/#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 `
router object which is used to navigate imperatively. */ router /* @end */} from 'expo-router';
import { StyleSheet, Text, View } from 'react-native';
@@ -168,7 +168,7 @@ const styles = StyleSheet.create({
By default on iOS, the modal has a dark background which hides the status bar. To change the status bar appearance, you can use the `Platform` API to check if the current platform is iOS and then use the [`StatusBar`](/versions/latest/sdk/status-bar/) component to change the appearance inside the **modal.tsx** file.
{/* prettier-ignore */}
-```tsx app/modal.tsx|collapseHeight=250
+```tsx src/app/modal.tsx|collapseHeight=250
import { StyleSheet, Text, View, Platform } from 'react-native';
import { StatusBar } from 'expo-status-bar';
@@ -216,7 +216,7 @@ Form sheet presents a modal as a bottom sheet that app users can drag between di
To use form sheet, set the `presentation` option to `formSheet` on your modal screen:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { Stack } from 'expo-router';
export default function Layout() {
@@ -246,7 +246,7 @@ Detents define the heights where the sheet can rest. Use `sheetAllowedDetents` t
> **info** Android supports a maximum of 3 detents. iOS accepts any number of detents.
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { Stack } from 'expo-router';
export default function Layout() {
@@ -279,7 +279,7 @@ export default function Layout() {
| `sheetCornerRadius` | `number` | Corner radius of the sheet in pixels. |
| `sheetLargestUndimmedDetentIndex` | `number \| 'none' \| 'last'` | Largest detent index that keeps the background undimmed. |
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { Stack } from 'expo-router';
export default function Layout() {
@@ -314,7 +314,7 @@ export default function Layout() {
You can add a footer to the sheet that stays visible at all detent positions using a React component:
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { Stack } from 'expo-router';
import { View, Button } from 'react-native';
@@ -347,7 +347,7 @@ export default function Layout() {
When using numeric detents, your modal content can use `flex: 1` to fill the available space within the sheet:
-```tsx app/modal.tsx
+```tsx src/app/modal.tsx
import { StyleSheet, Text, View } from 'react-native';
export default function Modal() {
diff --git a/docs/pages/router/advanced/native-intent.mdx b/docs/pages/router/advanced/native-intent.mdx
index fe7dc16456c85d..5dcba5e5d0ebde 100644
--- a/docs/pages/router/advanced/native-intent.mdx
+++ b/docs/pages/router/advanced/native-intent.mdx
@@ -24,13 +24,13 @@ Expo Router will always evaluate a URL with the assumption that the URL targets
In such scenarios, the URL needs to be rewritten to correctly target a route.
-To facilitate this, create a special file called **+native-intent.tsx** at the top level of your project's **app** directory. This file exports a special [`redirectSystemPath`](/versions/latest/sdk/router/#nativeintent) method designed to handle URL/path processing. When invoked, it receives an `options` object with two attributes: `path` and `initial`.
+To facilitate this, create a special file called **+native-intent.tsx** at the top level of your project's **src/app** directory. This file exports a special [`redirectSystemPath`](/versions/latest/sdk/router/#nativeintent) method designed to handle URL/path processing. When invoked, it receives an `options` object with two attributes: `path` and `initial`.
-useRouter from Expo Router. */
import { useRouter } from 'expo-router';
@@ -377,7 +377,7 @@ Dismisses screens in the current `useRouter from Expo Router. */
import { useRouter } from 'expo-router';
@@ -411,7 +411,7 @@ To return to the first screen in the closest stack. This is similar to [`popToTo
For example, the `home` route is the first screen, and the `settings` is the last. To go from `settings` to `home` route you'll have to go back to `details`. However, using the `dismissAll` action, you can go from `settings` to `home` and dismiss any screen in between.
{/* prettier-ignore */}
-```tsx app/settings.tsx
+```tsx src/app/settings.tsx
import { Button, View, Text } from 'react-native';
/* @info Import useRouter from Expo Router. */
import { useRouter } from 'expo-router';
@@ -443,7 +443,7 @@ export default function Settings() {
To check if it is possible to dismiss the current screen. Returns `true` if the router is within a stack with more than one screen in the stack's history.
{/* prettier-ignore */}
-```tsx app/settings.tsx|collapseHeight=410
+```tsx src/app/settings.tsx|collapseHeight=410
import { Button, View } from 'react-native';
/* @info Import useRouter from Expo Router. */
import { useRouter } from 'expo-router';
@@ -506,7 +506,7 @@ export const JsStack = withLayoutContext<
After defining the `JsStack` component, you can use it in your app:
{/* prettier-ignore */}
-```tsx app/_layout.tsx
+```tsx src/app/_layout.tsx
import { JsStack } from '../layouts/js-stack';
export default function Layout() {
@@ -559,7 +559,7 @@ When using `headerLargeTitle: true` (or `unstable_settings can be set in any stack's _layout.tsx file. It is used to define the initial route name for the stack, which ensures that users have a consistent starting point, especially when deep linking. */
@@ -495,7 +495,7 @@ The above example sets the `index` screen as the [`initialRouteName`](/router/ad
Style the overlay and modal content in **modal.tsx** as shown below:
{/* prettier-ignore */}
-```tsx app/modal.tsx|collapseHeight=250
+```tsx src/app/modal.tsx|collapseHeight=250
import { Link } from 'expo-router';
import { Pressable, StyleSheet, Text } from 'react-native';
import Animated, { FadeIn, SlideInDown } from 'react-native-reanimated';
diff --git a/docs/pages/router/advanced/zoom-transition.mdx b/docs/pages/router/advanced/zoom-transition.mdx
index dedfe59a24bbc4..15420ec05c1da5 100644
--- a/docs/pages/router/advanced/zoom-transition.mdx
+++ b/docs/pages/router/advanced/zoom-transition.mdx
@@ -24,7 +24,7 @@ To implement zoom transitions, you need to use the `Link.AppleZoom` component to
To activate zoom transition for a link, wrap the source (`Image`) element with `Link.AppleZoom` in your screen:
-```tsx app/index.tsx
+```tsx src/app/index.tsx
import { View, Text, StyleSheet, Pressable } from 'react-native';
import { Link } from 'expo-router';
import { Image } from 'expo-image';
@@ -49,7 +49,7 @@ export default function HomeScreen() {
In the destination screen, define the `Image` component:
-```tsx app/image.tsx
+```tsx src/app/image.tsx
import { View, Text, StyleSheet } from 'react-native';
import { Image } from 'expo-image';
@@ -79,7 +79,7 @@ The `Link.AppleZoom` component wraps the element you want to zoom from. It is us
You can specify the alignment of the zoomed element on the destination screen by using `Link.AppleZoomTarget` element.
-```tsx app/image.tsx
+```tsx src/app/image.tsx
export default function ImageScreen() {
return (
initialRouteName ensures that direct links deep into the stack still push the index route onto the stack first. */
@@ -65,11 +65,11 @@ export default function FeedLayout() {
}
```
-Now, within the **app/(tabs)/feed** directory, you can have `Link` components that point to different posts (for example, `/feed/123`). Those links will push the `feed/[postId]` route onto the stack, leaving the tab navigator visible.
+Now, within the **src/app/(tabs)/feed** directory, you can have `Link` components that point to different posts (for example, `/feed/123`). Those links will push the `feed/[postId]` route onto the stack, leaving the tab navigator visible.
You can also navigate from any other tab to a post in the feed tab with the same URL. Use `withAnchor` in conjunction with `initialRouteName` to ensure that the `feed/index` route is always the first screen in the stack:
-```tsx app/(tabs)/feed/index.tsx
+```tsx src/app/(tabs)/feed/index.tsx
Go to post
@@ -84,23 +84,42 @@ You can also nest tabs inside of an outer stack navigator. That is often more us
Icon={BookOpen02Icon}
/>
+## Different tabs per platform: platform-specific tabs
+
+When building a cross-platform app, you may want to use [native tabs](/router/advanced/native-tabs/) on Android and iOS for a platform-native look and feel, while using [custom tabs](/router/advanced/custom-tabs/) on web for full control over styling. You can achieve this using [platform-specific file extensions](/router/advanced/platform-specific-modules/).
+
+Link React component from expo-router. */
import { Link } from 'expo-router';
@@ -132,12 +132,12 @@ Dynamic routes can be linked to with their full URL, or by passing a `params` ob
Consider the following file structure:
-Link React component and router to navigate imperatively from expo-router. */
import { Link, router } from 'expo-router';
/* @end */
@@ -311,9 +311,9 @@ Assuming your `scheme` is `myapp`, here are some examples of how you would link
user is a route parameter
,
@@ -275,9 +275,9 @@ Route parameters are used to match a route, while search parameters are used to
]}
/>
-When the `app/[user]` route is matched, the `user` parameter is passed to the component and never a nullish value. Both search and route parameters can be used together and are accessible with the `useLocalSearchParams` and `useGlobalSearchParams` hooks:
+When the `src/app/[user]` route is matched, the `user` parameter is passed to the component and never a nullish value. Both search and route parameters can be used together and are accessible with the `useLocalSearchParams` and `useGlobalSearchParams` hooks:
-```tsx app/[user].tsx
+```tsx src/app/[user].tsx
import { useLocalSearchParams } from 'expo-router';
export default function User() {
@@ -300,7 +300,7 @@ export default function User() {
Whenever a route parameter is changed, the component will re-mount.
-```tsx app/[user].tsx
+```tsx src/app/[user].tsx
import { Text } from 'react-native';
import { router, useLocalSearchParams, Link } from 'expo-router';
@@ -324,7 +324,7 @@ TODO: REMOVE COMMENT WHEN https://github.com/expo/expo/pull/30268 IS PUBLISHED
URL parameters that are present multiple times will be grouped together as an array.
-```tsx app/hash.tsx
+```tsx src/app/hash.tsx
import { router, useLocalSearchParams } from 'expo-router';
export default function Route() {
@@ -341,7 +341,7 @@ export default function Route() {
The URL [hash](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) is a string that follows the `#` symbol in a URL. It is commonly used on websites to link to a specific section of a page, but it can also be used to store data. Expo Router treats the hash as a special search parameter using the name `#`. It can be accessed and modified using the same hooks and APIs from [search parameters](#local-versus-global-search-parameters).
{/* prettier-ignore */}
-```tsx app/hash.tsx
+```tsx src/app/hash.tsx
import { Text } from 'react-native';
import { router, useLocalSearchParams, Link } from 'expo-router';
diff --git a/docs/pages/router/web/api-routes.mdx b/docs/pages/router/web/api-routes.mdx
index c8b0471aab210d..cee602d44d7430 100644
--- a/docs/pages/router/web/api-routes.mdx
+++ b/docs/pages/router/web/api-routes.mdx
@@ -13,9 +13,9 @@ import { Step } from '~/ui/components/Step';
import { Tab, Tabs } from '~/ui/components/Tabs';
import { VideoBoxLink } from '~/ui/components/VideoBoxLink';
-Expo Router enables you to write secure server code for all platforms, right in your **app** directory.
+Expo Router enables you to write secure server code for all platforms, right in your **src/app** directory.
-```ts app/hello+api.ts
+```ts src/app/hello+api.ts
export function GET(request: Request) {
return Response.json({ hello: 'world' });
}
@@ -34,7 +34,7 @@ API Routes are functions that are executed on a server when a route is matched.
In Expo, API Routes are defined by creating files in the **app** directory with the `+api.ts` extension. For example, the following API route is executed when the route `/hello` is matched.
-generateStaticParams will be invoked once for every entry in the array. */
return [{ id: 'one' }, { id: 'two' }];
@@ -107,7 +107,7 @@ export async function generateStaticParams(): PromiseHello 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 - -> Changing the Post CSS or `browserslist` config will require you to clear the Metro cache: `npx expo start --clear` | `npx expo export --clear`. - -[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. - -### SASS - -Expo Metro has _partial_ support for SCSS/SASS. - -To setup, install the `sass` package in your project: - -npx @react-native-community/cli@latest init to Expo SDK packages.
-
- }
- Icon={BookOpen02Icon}
-/>
-
-`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.
-
--
- 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/v52.0.0/sdk/reanimated.mdx b/docs/pages/versions/v52.0.0/sdk/reanimated.mdx
deleted file mode 100644
index 6614d8c0ad8aa5..00000000000000
--- a/docs/pages/versions/v52.0.0/sdk/reanimated.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: React Native Reanimated
-sidebar_title: 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']
----
-
-import { APIInstallSection } from '~/components/plugins/InstallSection';
-import { SnackInline } from '~/ui/components/Snippet';
-
-> **info** This library is listed in the Expo SDK reference because it is included in [Expo Go](https://expo.dev/go). You may use any library of your choice with [development builds](/develop/development-builds/introduction/).
-
-[`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. For more information on the API and its usage, see [`react-native-reanimated` documentation](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-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. - -