compileSdkVersion and targetSdkVersion bumped to 34
On Android, compileSdkVersion and targetSdkVersion have been bumped to 34 across all exposed modules.
Expo & React Native · all subjects
expo-core
512 notes in this subject, read out of this brain and free to use. This is page 9 of 9.
iOS deployment target bumped to 13.4
iOS deployment target has been bumped to 13.4 across many expo modules including expo-camera, expo-font, expo-gl, expo-image-manipulator, expo-keep-awake, expo-image-picker, expo-linear-gradient, expo-mail-composer, expo-local-authentication, expo-location, expo-media-library, expo-localization, expo-modules-core, expo-notifications, expo-print, expo-device, expo-screen-capture, expo-network, expo-sensors, expo-random, expo-secure-store, expo-screen-orientation, expo-sms, expo-store-review, expo-task-manager, expo-speech, expo-sharing, expo-video-thumbnails, expo-web-browser, expo-sqlite, and unimodules-app-loader.
React Native 0.73 support across expo modules
React Native 0.73 support has been added to most expo modules including expo-asset, expo-application, expo-barcode-scanner, expo-battery, expo-background-fetch, expo-av, expo-camera, expo-cellular, expo-calendar, expo-brightness, expo-blur, expo-constants, expo-crypto, expo-clipboard, expo-contacts, expo-file-system, expo-document-picker, expo-face-detector, expo-haptics, expo-image-loader, expo-font, expo-gl, expo-image-manipulator, expo-keep-awake, expo-image-picker, expo-intent-launcher, expo-linear-gradient, expo-mail-composer, expo-local-authentication, expo-location, expo-media-library, expo-localization, expo-modules-core, expo-notifications, expo-print, expo-device, expo-screen-capture, expo-network, expo-sensors, expo-random, expo-secure-store, expo-screen-orientation, expo-sms, expo-store-review, expo-task-manager, expo-speech, expo-sharing, expo-video-thumbnails, expo-web-browser, expo-sqlite, and unimodules-app-loader.
locale constant deprecated in expo-localization
The locale constant in expo-localization has been deprecated.
expo-battery added hooks
expo-battery now includes hooks: useBatteryLevel, useBatteryState, useLowPowerMode, and usePowerState.
expo-device added deviceType constant
expo-device added a deviceType constant. On iOS, deviceType detection now supports Desktop on MacOS, checking for Catalyst and iPad app running on Mac.
JSC engine configuration example
To use JSC instead of Hermes, set the jsEngine field in app.json: {"expo": {"jsEngine": "jsc"}}
V8 engine requires react-native-v8 package
To use the V8 engine, install the react-native-v8 package which adds V8 runtime support for React Native. Install it by running 'npx expo install react-native-v8 v8-android-jit'. Remove the jsEngine field from app config when using V8.
Platform-specific JS engine override in app.json
To use a different JS engine on a specific platform, set jsEngine at the top level and override it under the 'android' or 'ios' key. The platform-specific value takes precedence over the common field. Example: {"expo": {"jsEngine": "hermes", "ios": {"jsEngine": "jsc"}}}
JS engine unavailable for web platform
Switching JavaScript engines is not possible for the web platform because the JavaScript engine is included in the web browser.
V8 engine requires prebuild after installation
After installing react-native-v8 for V8 engine support, run 'npx expo prebuild -p android --clean' to prebuild again.
Default JS engine in Expo projects
Expo projects use Hermes as the default JavaScript engine. Hermes is purpose-built and optimized for React Native apps and has the best debugging experience.
JS engine configuration via jsEngine field
The jsEngine field in app.json allows you to specify the JavaScript engine for your app. The default value is 'hermes'. Valid values include 'hermes', 'jsc', and 'v8'.
jsEngine configuration requires development build
Changing the JS engine is unavailable in Expo Go from SDK 52 onwards (only Hermes engine is available). A development build is required to use JS engine customization.
Recompilation required after JS engine change
Changing the JS engine requires recompiling development builds with eas build to work properly.
Snack development environment
Snack is an in-browser development environment at snack.expo.dev that works similarly to Expo Go. It is a way to share code snippets and experiment with React Native without downloading tools. You can edit components in App.js, choose a platform (Android, iOS, or web) and see changes live.
Expo Go limitations
Expo Go is a free, open-source playground for students and learners to try out React Native on Android and iOS. However, Expo Go is limited and not useful for building production-grade projects. Development builds should be used instead for production projects.
expo-go CLI tool
The `expo-go` CLI is a standalone tool that downloads an Expo Go binary for a platform and specific SDK version, or prints its download URL. Examples: `npx expo-go download android latest` (downloads Expo Go for Android), `npx expo-go url ios latest` (prints download URL for iOS). This command downloads the Expo Go app to the current directory and caches it under ~/.expo. The tool works for Android devices, Android Emulators, and iOS Simulators, but does not support side-loading older app versions on physical iPhone devices due to Apple's policies.
Expo Go SDK version incompatibility error
When running a project created for an unsupported SDK version in Expo Go, you see the error: 'Project is incompatible with this version of Expo Go'. The fix depends on whether you are using an Android device, physical iOS device, or simulator. See Troubleshoot an Expo Go version mismatch guide to install a compatible version or upgrade your project.
React Native directory for third-party libraries
Any library that is compatible with React Native works in an Expo project when you use a development build. reactnative.directory is a searchable database for React Native libraries. If a library is not included in Expo SDK, use the directory to find a compatible library for your project.
Expo CLI installation and usage
Expo CLI is installed automatically with the `expo` package when you create a new project. It is designed to help you move faster during app development phase. You can use it by running `npx expo start` to start the development server.
Expo CLI common commands
Common Expo CLI commands include: `npx expo start` (starts development server), `npx expo prebuild` (generates native Android and iOS directories using Prebuild), `npx expo run:android` (compiles native Android app locally), `npx expo run:ios` (compiles native iOS app locally), `npx expo install package-name` (installs or validates and updates libraries with optional --fix flag), and `npx expo lint` (sets up, configures, or lints using ESLint).
Develop standalone module: open projects and start dev server
After creating a standalone module, follow these steps: 1. Open native projects: - Navigate to the module directory - Use npm run open:android or npm run open:ios to open the generated native projects - Equivalent commands exist for yarn, pnpm, and bun - Note: open:ios requires macOS and Xcode; on Windows, open the android directory in Android Studio 2. Start the development server: - Navigate to the example directory - Start the dev server using one of these commands: - npm: npx expo start - yarn: yarn expo start - pnpm: pnpm expo start - bun: bun expo start 3. Seeing changes: - JavaScript and TypeScript changes are picked up automatically by the development server - When changing native code, rebuild the example app to see the changes
Static image assets require require() syntax
Static image assets located in the assets/images directory must be imported using require() syntax. For example, const PlaceholderImage = require('@/assets/images/background-image.png'). This creates a static resource reference that can be passed to the Image component's source prop.
Path alias @ for imports
The @ symbol is a custom path alias for importing custom components and other modules instead of using relative paths. Expo CLI automatically configures it in tsconfig.json. Usage example: import ImageViewer from '@/components/ImageViewer'.
Use Pressable component for touch handling in React Native
The Pressable component from React Native is the recommended way to handle touch events. It is flexible and can detect single taps, long presses, trigger separate events when the button is pushed in and released, and more. It accepts an onPress prop to handle press events.
Component prop pattern for theming buttons
Create a reusable button component with a theme prop to allow different style variants. For example, a Button component can accept theme='primary' to conditionally render a button with different styling. The theme prop is optional and can be checked with if (theme === 'primary') to render variant styles.
FontAwesome icons from @expo/vector-icons
The @expo/vector-icons library provides icon sets including FontAwesome. Import FontAwesome with: import FontAwesome from '@expo/vector-icons/FontAwesome'. Use it with props like name (icon name), size (numeric size), and color (hex color). Example: <FontAwesome name="picture-o" size={18} color="#25292e" />.
Use expo-image Image component for cross-platform image display
The Image component from the expo-image library provides a cross-platform way to load and render images. It accepts a source prop that can be either a static asset (imported with require from the assets/images directory) or a URL with a uri property. The Image component is included in the default Expo project template.
Inline styles override StyleSheet.create() styles
Inline styles passed directly to a style prop override the default styles defined in StyleSheet.create(). This allows component-specific style variations. For example, passing style={[styles.button, { backgroundColor: '#fff' }]} will override the backgroundColor for that specific instance while keeping other button styles.
Convert legacy asset IDs and objects to new Asset API
When migrating from the legacy API to the new Asset API, use the following platform-specific conversion methods: **Converting stored legacy asset IDs:** - iOS: Prefix the legacy ID with 'ph://' and pass to new Asset(phUri) - Android: Use LegacyMediaLibrary.getAssetContentUriAsync(legacyId) to resolve the numeric MediaStore ID to a content:// URI, then pass to new Asset(contentUri) **Converting legacy Asset objects (when gradually migrating with both APIs in use):** - iOS: Use asset.uri directly (already a ph:// URI) and pass to new Asset - Android: Use LegacyMediaLibrary.getAssetContentUriAsync(legacyAsset) to convert the numeric MediaStore ID to a content:// URI, then pass to new Asset(contentUri)
Swift compiler directives for platform-specific code
Use Swift compiler directives with the 'os' condition to write platform-specific implementations. The pattern uses #if os(iOS), #elseif os(macOS), #elseif os(tvOS), and #endif to conditionally compile code for specific platforms. Example showing how to use Swift compiler directives for cross-platform code: #if os(iOS) // iOS implementation #elseif os(macOS) // macOS implementation #elseif os(tvOS) // tvOS implementation #endif