expo-core

512 notes in this subject, read out of this brain and free to use. This is page 1 of 9.

Expo enables performant web development with shared codebase

Expo enables developers to develop performant websites with the same codebase used for mobile apps, which is not available in React Native alone.

Expo enables native library installation from command line

Expo allows developers to install natively compatible libraries from the command line, which is not possible with React Native alone.

Expo Go is a playground for trying React Native

Expo Go is a playground for students and learners to try React Native on a simulator or device.

Expo supports major upgrades without native changes

Expo enables major upgrades without requiring native code changes, a capability not available in React Native projects without Expo.

Expo provides first-class TypeScript support

Expo provides first-class TypeScript support, which is not a standard feature of React Native alone.

expo npm package can be installed in nearly any React Native project

The expo npm package enables a suite of features for React Native apps. The expo package can be installed in nearly any React Native project.

Snack enables sharing example apps in browser

Expo supports creating and sharing example apps in the browser through Snack, which is not available in React Native without Expo.

Expo enables development entirely in JavaScript

With Expo, developers can develop complex apps entirely in JavaScript, which is not possible with React Native alone.

Expo enables development without Xcode or Android Studio

Expo allows developers to develop apps without requiring Xcode or Android Studio, unlike React Native projects without Expo.

Prebuild separates React from Native

Prebuild separates React from Native to enable developing from any computer, upgrading easily, white labeling apps, and maintaining larger projects.

Expo SDK is a comprehensive suite of React Native modules

The Expo SDK is a comprehensive suite of well-tested React Native modules that run on Android, iOS, and web.

All Expo features are free, optional, and independent

All features in Expo are free, optional, and can be used independently of each other. Unused features add no additional bloat to your app.

Expo CLI Tunnel can route dev server to any device

Expo CLI provides Tunnel functionality to route your dev server to any device for testing and development.

Expo CLI manages dependencies and compiles native apps

Expo CLI manages dependencies, compiles native apps, enables development for the web, and can connect to any device with a powerful dev server.

Persist data in Expo apps using cloud databases

Most apps need to persist data beyond the lifetime of a single session. Cloud-hosted databases can store an app's data and sync it across devices and users.

Firebase backend platform for Expo apps

Firebase is an app development platform that provides hosted backend services such as real-time database, cloud storage, authentication, crash reporting, analytics, and more. It is built on Google's infrastructure and scales automatically. A guide for using Firebase with the JS SDK and React Native Firebase is available at /guides/using-firebase/.

Supabase backend platform for Expo apps

Supabase is an app development platform that provides hosted backend services such as a Postgres database, user authentication, file storage, edge functions, realtime syncing, and a vector and AI toolkit. A guide for using Supabase is available at /guides/using-supabase/.

Convex TypeScript database for Expo apps

Convex is a TypeScript-based database that requires no cluster management, SQL, or ORMs. Convex provides real-time updates over a WebSocket, making it perfect for reactive apps. A guide for using Convex is available at /guides/using-convex/.

Moti animation library compatible with Expo

Moti is an animation package that can be used in Expo projects and works on Android, iOS, and web. Documentation is available at https://moti.fyi/.

react-native-reanimated minimal example

Example demonstrating react-native-reanimated usage: ```tsx 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 ( <View style={styles.container}> <Animated.View style={[styles.box, style]} /> <Button title="toggle" onPress={() => { randomWidth.value = Math.random() * 350; }} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, box: { width: 100, height: 80, backgroundColor: 'black', margin: 30, }, }); ```

Install react-native-reanimated with expo install

To install react-native-reanimated in an Expo project, run: npx expo install react-native-reanimated (npm), yarn expo install react-native-reanimated (yarn), pnpm expo install react-native-reanimated (pnpm), or bun expo install react-native-reanimated (bun).

react-native-reanimated provides simplified animation API

The react-native-reanimated library provides an API that simplifies creating smooth, powerful, and maintainable animations with better performance compared to the React Native Animated API.

React Native Animated API available in Expo

Expo projects can use the Animated API from React Native for animations. Documentation is available at https://reactnative.dev/docs/next/animations.

react-native-reanimated included in default Expo template

The react-native-reanimated library is pre-installed in projects created using the default Expo template. Manual installation is only necessary for projects created without the default template.

Appearance API for color scheme detection

Use Appearance.getColorScheme() to imperatively get the current color scheme, or Appearance.addChangeListener() to listen to color scheme changes. Import Appearance from react-native.

Color scheme example with useColorScheme and StatusBar

Example showing useColorScheme() hook to detect theme and conditionally apply theme styles to container and text. Also imports StatusBar from expo-status-bar which automatically switches bar style based on theme. The example uses themeContainerStyle and themeTextStyle to apply appropriate colors for light and dark modes.

Web does not require additional configuration for color themes

For web, no additional configuration is required to support switching between light and dark mode. Configuration is only needed for Android and iOS projects.

userInterfaceStyle supported values

The userInterfaceStyle property supports three values: 'automatic' (follow system appearance settings and notify about changes), 'light' (restrict app to light theme only), and 'dark' (restrict app to dark theme only).

userInterfaceStyle platform-specific configuration

You can configure userInterfaceStyle for specific platforms by setting either android.userInterfaceStyle or ios.userInterfaceStyle in app.json to the preferred value.

userInterfaceStyle property configuration

Configure supported appearance styles using the userInterfaceStyle property in app.json. It is set to 'automatic' by default in new projects. The app will default to 'light' style if this property is absent.

Detect color scheme with useColorScheme hook

Import useColorScheme from react-native to detect the current color scheme. Call useColorScheme() in a component to get the current scheme value as 'light' or 'dark', or null.

SplashScreen integration with useFonts

When using useFonts, call SplashScreen.preventAutoHideAsync() before component render to prevent the splash screen from auto-hiding while fonts load. After fonts finish loading (checked via loaded or error), call SplashScreen.hideAsync() to hide the splash screen.

useFonts hook example with local font

Import useFonts from 'expo-font' and use it in a top-level component like the root layout file. Example usage: const [loaded, error] = useFonts({ 'Inter-Black': require('./assets/fonts/Inter-Black.otf') }). The hook returns a tuple with loading state and any errors.

Preloading vector icons with useFonts

To avoid invisible icons from @expo/vector-icons on first app load, preload them during the initial loading screen using useFonts. Pass both the custom font and Ionicons.font to useFonts array. Example: useFonts([require('./assets/fonts/Inter-Black.otf'), Ionicons.font]).

useFonts hook for runtime font loading

The useFonts hook from expo-font library allows loading font files asynchronously at runtime. It tracks the loading state and loads fonts when the app initializes. It works with all Expo SDK versions and with Expo Go, making it compatible with managed workflows.

Using native libraries with Expo

You can use native Android and iOS libraries with Expo by creating a custom native module with Swift and Kotlin. Many popular libraries already have custom native modules. The React Native directory lists popular libraries for various use cases.

Expo SDK minimal app size

A bare minimum production app created using pure Expo is less than 3 MB. For iOS, Expo targets a newer minimum iOS version which enables app store optimizations. If the `expo` package is included in your app, it only adds 1 MB one time to the final size of apps on app stores. The `expo` package has a marginal size cost of approximately 150 KiB on Android.

Web libraries with Expo and React Native

Many popular web packages such as three.js work with Expo and React Native. Examples are available in the Expo examples repository.

Expo SDK well-tested and multiplatform

The Expo SDK is well-tested, written in TypeScript, documented, and built for Android, iOS, and the web. Every module in the Expo SDK works together to ensure versioning always matches, creating a smooth upgrading experience. The SDK is written with the Expo Modules API to make contributing, maintaining, and understanding easier.

Expo vs React Native differences

The `expo` package provides features that make it easier to develop and scale complex React Native applications and can be installed in nearly any React Native app. The `expo` package is not required to use Expo Application Services (EAS) or React Native, however it is highly recommended. Expo Application Services (EAS) also works with all React Native apps with first-class support for builds, updates, and app store submissions.

Expo Go is open source

Expo Go source code is available in the expo/expo GitHub repository in the **apps/expo-go** directory. Expo Go is built with Expo and React Native.

Secondary text styling with foregroundStyle modifier

Example using foregroundStyle to apply hierarchical styling: ```tsx import { Button, Form, Host, HStack, Image, List, Section, Spacer, Text } from '@expo/ui/swift-ui'; import { buttonStyle, font, foregroundStyle, padding } from '@expo/ui/swift-ui/modifiers'; export default function SecondaryTextExample() { return ( <Host style={{ flex: 1 }}> <Form> <Section> <List> <Button onPress={() => console.log('Navigate')} modifiers={[buttonStyle('plain')]}> <HStack> <Text>Night Shift</Text> <Spacer /> <Text modifiers={[ foregroundStyle({type: 'hierarchical', style: 'secondary'}), padding({ trailing: 8 }), ]}> 22:00 to 07:00 </Text> <Image systemName="chevron.right" size={14} color="#C7C7CC" /> </HStack> </Button> </List> <List> <Text modifiers={[foregroundStyle({type: 'hierarchical', style: 'secondary'}), font({ size: 14 })]}> Save up to 280.7 MB. This will permanently delete all photos and videos kept in the "Recently Deleted" album. </Text> </List> </Section> </Form> </Host> ); } ```

iOS Settings app Form example

Example building an iOS Settings-like UI with Form, Section, Toggle, and Image components: ```tsx import { Button, Form, Host, HStack, Image, Section, Spacer, Toggle, Text, } from '@expo/ui/swift-ui'; import { background, buttonStyle, foregroundStyle, clipShape, frame } from '@expo/ui/swift-ui/modifiers'; import { Link } from 'expo-router'; import { useState } from 'react'; export default function SettingsView() { const [isAirplaneMode, setIsAirplaneMode] = useState(true); return ( <Host style={{ flex: 1 }}> <Form> <Section> <HStack spacing={8}> <Image systemName="airplane" color="white" size={18} modifiers={[ frame({ width: 28, height: 28 }), background('#ffa500'), clipShape('roundedRectangle'), ]} /> <Text>Airplane Mode</Text> <Spacer /> <Toggle isOn={isAirplaneMode} onIsOnChange={setIsAirplaneMode} /> </HStack> <Link href="/wifi" asChild> <Button modifiers={[buttonStyle('plain')]}> <HStack spacing={8}> <Image systemName="wifi" color="white" size={18} modifiers={[ frame({ width: 28, height: 28 }), background('#007aff'), clipShape('roundedRectangle'), ]} /> <Text modifiers={[foregroundStyle({type: 'color', color: 'black'})]}> Wi-Fi </Text> <Spacer /> <Image systemName="chevron.right" size={14} color="secondary" /> </HStack> </Button> </Link> </Section> </Form> </Host> ); } ```

Slider with icons example

Example of flanking a Slider with icons for brightness/volume controls: ```tsx import { useState } from 'react'; import { Form, Host, HStack, Image, List, Section, Slider, Spacer, Text, Toggle, } from '@expo/ui/swift-ui'; import { padding } from '@expo/ui/swift-ui/modifiers'; export default function SliderWithIconsExample() { const [brightness, setBrightness] = useState(0.5); const [trueToneEnabled, setTrueToneEnabled] = useState(true); return ( <Host style={{ flex: 1 }}> <Form> <Section header={<Text>Brightness</Text>} footer={ <Text> Automatically adapt iPhone display based on ambient lighting conditions to make colors appear consistent in different environments. </Text> } > <List> <HStack modifiers={[padding({ vertical: 6 })]}> <Image systemName="sun.min.fill" size={22} color="#8E8E93" /> <Spacer /> <Slider value={brightness} onValueChange={setBrightness} /> <Spacer /> <Image systemName="sun.max.fill" size={22} color="#8E8E93" /> </HStack> <Toggle label="True Tone" isOn={trueToneEnabled} onIsOnChange={setTrueToneEnabled} /> </List> </Section> </Form> </Host> ); } ```

Modifiers example with glassEffect and padding

Example combining glassEffect and padding modifiers: ```tsx import { Host, Text } from '@expo/ui/swift-ui'; import { glassEffect, padding } from '@expo/ui/swift-ui/modifiers'; import { MeshGradientView } from 'expo-mesh-gradient'; import { View } from 'react-native'; export default function Page() { return ( <View style={{ flex: 1 }}> <MeshGradientView style={{ flex: 1 }} columns={3} rows={3} colors={['red', 'purple', 'indigo', 'orange', 'white', 'blue', 'yellow', 'green', 'cyan']} points={[ [0.0, 0.0], [0.5, 0.0], [1.0, 0.0], [0.0, 0.5], [0.5, 0.5], [1.0, 0.5], [0.0, 1.0], [0.5, 1.0], [1.0, 1.0], ]} /> <Host style={{ position: 'absolute', top: 0, right: 0, left: 0, bottom: 0 }}> <Text size={32} modifiers={[ padding({ all: 16, }), glassEffect({ glass: { variant: 'clear', }, }), ]}> Glass effect text </Text> </Host> </View> ); } ```

Multi-line list items with VStack

Example using VStack with alignment="leading" for list items with title and subtitle: ```tsx import { Button, Form, Host, HStack, Image, List, Section, Spacer, Text, VStack, } from '@expo/ui/swift-ui'; import { buttonStyle, font, foregroundStyle, padding } from '@expo/ui/swift-ui/modifiers'; export default function MultiLineListItemExample() { return ( <Host style={{ flex: 1 }}> <Form> <Section> <List> <HStack> <Image systemName="safari" size={22} modifiers={[padding({ trailing: 6 })]} /> <Spacer /> <Button onPress={() => console.log('Navigate')} modifiers={[buttonStyle('plain'), padding({ vertical: 6 })]} > <VStack spacing={4} alignment="leading"> <Text>Chrome</Text> <Text modifiers={[foregroundStyle({type: 'hierarchical', style: 'secondary'}), font({ size: 14 })]}> Last used: Today </Text> </VStack> <Spacer /> <Text modifiers={[ foregroundStyle({type: 'hierarchical', style: 'secondary'}), font({ size: 16 }), ]} > 1.57 GB </Text> <Image systemName="chevron.right" size={14} color="#C7C7CC" /> </Button> </HStack> </List> </Section> </Form> </Host> ); } ```

React Native components can be used inside SwiftUI components

React Native components can be placed as JSX children of Expo UI components. Expo UI automatically creates a UIViewRepresentable wrapper. However, SwiftUI fully controls the layout of the UIKit view's center, bounds, frame, and transform properties. Do not directly set these layout-related properties on views managed by UIViewRepresentable from your own code as it conflicts with SwiftUI and results in undefined behavior. Once React Native components are rendered, you are leaving the SwiftUI context. To add Expo UI components again, you need to reintroduce a Host wrapper.

Basic SwiftUI loading view example with Host and CircularProgress

Example of using Host with CircularProgress: ```tsx import { CircularProgress, Host } from '@expo/ui/swift-ui'; import { View, Text } from 'react-native'; export default function LoadingView() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Host matchContents> <CircularProgress /> </Host> <Text>Loading...</Text> </View> ); } ```

Flexbox styles apply to Host component only

Flexbox styles can be applied to the Host component itself. Once inside the SwiftUI context, Yoga is not available and layouts should be defined using HStack and VStack instead.

HStack and VStack layout example

Example of using HStack and VStack to build layout in SwiftUI: ```tsx import { CircularProgress, Host, HStack, LinearProgress, VStack } from '@expo/ui/swift-ui'; export default function LoadingView() { return ( <Host style={{ flex: 1, margin: 32 }}> <VStack spacing={32}> <HStack spacing={32}> <CircularProgress /> <CircularProgress color="orange" /> </HStack> <LinearProgress progress={0.5} /> <LinearProgress color="orange" progress={0.7} /> </VStack> </Host> ); } ```

Use buttonStyle('plain') to prevent default blue button styling

When using Button components in Expo UI SwiftUI, apply the buttonStyle('plain') modifier to prevent default blue button styling and allow custom styling.

Install Expo UI with npx expo install

To install the @expo/ui package in your Expo project, run the command: npx expo install @expo/ui

Host component is the container for SwiftUI views

The Host component is the container for SwiftUI views in Expo UI. You can think of it like <svg> in the DOM or <Canvas> in react-native-skia. Under the hood, it uses UIHostingController to render SwiftUI views in UIKit.

Expo UI Swift UI only supports iOS, macOS, tvOS

The first milestone for Expo UI is achieving a 1-to-1 mapping from SwiftUI to Expo UI on iOS, macOS, and tvOS. Universal support will come in the next stage of the roadmap. The priority is to establish strong SwiftUI support first, then expand to Jetpack Compose on Android and DOM support on the Web.

Import SwiftUI components from @expo/ui/swift-ui

Expo UI SwiftUI components are imported from @expo/ui/swift-ui. To cross the boundary from React Native (UIKit) to SwiftUI, you need to use the Host component.

Expo UI available in SDK 54 and later

Expo UI is available in SDK 54 and later.

Expo UI brings SwiftUI primitives to React Native

Expo UI brings SwiftUI to React Native. It is not another UI library but exposes native SwiftUI components directly to JavaScript, rather than re-implementing or simulating UI in JavaScript. Components in Expo UI have a 1-to-1 mapping to SwiftUI views.

Modifiers imported from @expo/ui/swift-ui/modifiers

SwiftUI modifiers in Expo UI are imported from @expo/ui/swift-ui/modifiers and passed as an array to the modifiers prop of components.

glassEffect modifier requires Xcode 26+ and iOS 26+

The glassEffect modifier requires Xcode 26 and later and iOS 26 and later.

Specify Text color explicitly when wrapped in Link

When Text is wrapped in a Link component in Expo UI SwiftUI, the color needs to be specified explicitly using the foregroundStyle modifier.

Give your agent this brain