guides

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

Flat config Prettier integration setup

To integrate Prettier with ESLint using Flat config, update eslint.config.js: const { defineConfig } = require('eslint/config'); const expoConfig = require('eslint-config-expo/flat'); const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended'); module.exports = defineConfig([ expoConfig, eslintPluginPrettierRecommended, { ignores: ['dist/*'], }, ]);

Legacy config Prettier integration setup

To integrate Prettier with ESLint using legacy config, update .eslintrc.js: module.exports = { extends: ['expo', 'prettier'], ignorePatterns: ['/dist/*'], plugins: ['prettier'], rules: { 'prettier/prettier': 'error', }, }; You can use "prettier/prettier": "warn" instead of "error" if you prefer formatting issues as warnings.

Prettier formatting check with npx expo lint

After integrating Prettier with ESLint, running npx expo lint will catch anything not aligned with Prettier formatting as an error.

Customize Prettier settings

Create a .prettierrc file at the root of your project to customize Prettier settings and configuration.

Speed up ESLint performance

To speed up ESLint on large projects, lint fewer files by adding a .eslintignore file to the project root to ignore certain files and directories such as /.expo and node_modules.

Example .eslintignore configuration

/.expo node_modules

Run ESLint linting command

After ESLint has been configured, run npx expo lint (or yarn expo lint, pnpm expo lint, bun expo lint) to lint your code. This command runs the lint script from package.json.

Migrate to Flat config from legacy

Flat config is supported in Expo SDK 53 and later. To migrate, upgrade ESLint and eslint-config-expo with npx expo install eslint eslint-config-expo --dev (or yarn, pnpm, bun equivalents). If you haven't customized ESLint config, delete .eslintrc.js and run npx expo lint to generate new config. npx expo lint supports both legacy and flat config and will automatically pick up the new config.

VS Code ESLint extension recommended

For VS Code, install the ESLint extension to lint code as you type. The extension can be restarted by running the command ESLint: Restart ESLint Server from the command palette.

ESLint environment configuration for multiple environments

Expo projects run in multiple environments: app.config.js, metro.config.js, babel.config.js, and src/app/+html.tsx run in Node.js environment with access to __dirname and Node.js modules like path. Standard Expo project files like src/app/index.js run in Hermes, Node.js, or web browser. Environment-specific globals configuration differs between Flat config and legacy config.

Flat config environment globals setup

For Flat config, metro.config.js files already work with Node.js globals due to built-in support in eslint-config-expo. For other configuration files needing Node.js globals, use languageOptions.globals in eslint.config.js with a configuration object specifying files and globals.node.

Flat config example with Node.js globals

Example configuration for Flat config: const { defineConfig, globalIgnores } = require('eslint/config'); const expoConfig = require('eslint-config-expo/flat'); module.exports = defineConfig([ globalIgnores(['dist/*']), expoConfig, { files: ['babel.config.js'], languageOptions: { globals: globals.node, }, }, ]);

Legacy config environment configuration with eslint-env comment

For legacy config, add the eslint-env comment to the top of a file to tell ESLint which environment the file is running in. For example, /* eslint-env node */ at the top of metro.config.js.

Initialize ESLint in Expo project

Run npx expo lint (or yarn expo lint, pnpm expo lint, bun expo lint) to install ESLint dependencies and create an eslint.config.js file at the root of the project. This file extends configuration from eslint-config-expo.

ESLint Flat config format support by SDK version

From SDK 53 onwards, the default ESLint config file uses the Flat config format. It also supports legacy config. For SDK 52 and earlier, the default ESLint config file uses legacy config and does not support Flat config.

Install LogRocket SDK with expo install

Install LogRocket SDK using the expo install command: `npx expo install @logrocket/react-native expo-build-properties` (or equivalent for yarn, pnpm, or bun).

Connect LogRocket project on EAS dashboard

Link your LogRocket project to your Expo project by going to Project settings > General and clicking Connect. After connecting, View on LogRocket buttons appear in the EAS dashboard in the Native Deployments and Updates dashboards, showing the last few sessions from your app.

Connect LogRocket account on EAS dashboard

Link your LogRocket account to your Expo account by going to Account settings > Overview > Connections and clicking Connect to authenticate with LogRocket.

LogRocket records user sessions and identifies bugs

LogRocket records user sessions and identifies bugs as users use your app. You can filter sessions by update IDs.

Initialize LogRocket with updateId and channel

Initialize LogRocket in a top-level file like src/app/_layout.tsx using LogRocket.init('<App ID>', {updateId: Updates.isEmbeddedLaunch ? null : Updates.updateId, expoChannel: Updates.channel}). Replace <App ID> with your LogRocket App ID from https://app.logrocket.com/r/settings/setup.

Running React Native Firebase projects with EAS Build

If using EAS Build, you can create and install a development build on your devices without needing to run the project locally before creating a development build.

Firebase JS SDK minimum version requirement

Expo SDK only supports firebase@12.0.0 and above. Versions before this version cause ES module resolution errors.

Two ways to use Firebase in Expo projects

There are two different ways you can use Firebase in Expo projects: using Firebase JS SDK or using React Native Firebase. React Native supports both the JS SDK and the native SDK.

When to use Firebase JS SDK

Use Firebase JS SDK when you want to use Firebase services such as Authentication, Firestore, Realtime Database, and Storage in your app and want to develop with Expo Go, want a quick start with Firebase services, or want to create a universal app for Android, iOS, and the web.

Firebase JS SDK service support limitations

Firebase JS SDK does not support all services for mobile apps. Some services not supported are Analytics, Dynamic Links, and Crashlytics. React Native Firebase should be used if you need these services.

Firebase JS SDK installation command

To install Firebase JS SDK in an Expo project, run: npx expo install firebase (npm), yarn expo install firebase (yarn), pnpm expo install firebase (pnpm), or bun expo install firebase (bun).

Firebase JS SDK initialization configuration object structure

The Firebase configuration object requires the following properties: apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId, appId, and measurementId. These values must be obtained by registering a web app in the Firebase project and passed to the initializeApp() method from the firebase/app module.

Firebase JS SDK modular API import pattern

Firebase version 9 and above provide a modular API. You can directly import any service you want to use from the firebase package. For example, to use authentication service, import the auth module from the firebase/auth package.

Deprecated Expo Firebase packages

The expo-firebase-analytics and expo-firebase-recaptcha libraries have been removed from SDK 48 onwards. React Native Firebase is recommended as it provides capabilities similar to these libraries.

When to use React Native Firebase

Use React Native Firebase when your app requires access to Firebase services not supported by the Firebase JS SDK such as Dynamic Links and Crashlytics, you want to use native SDKs, you have an existing React Native project with React Native Firebase already configured but are migrating to Expo SDK, or you want to use Firebase Analytics.

React Native Firebase requirement to avoid Expo Go

React Native Firebase requires custom native code and cannot be used with Expo Go.

expo-dev-client is required for React Native Firebase

Since React Native Firebase requires custom native code, you must install the expo-dev-client library in your project to configure native code using Config plugins without writing native code yourself.

Core React Native Firebase module

To use React Native Firebase, install the @react-native-firebase/app module, which provides the core functionality for all other modules and adds custom native code to your project using a config plugin.

React Native Firebase installation commands

Install expo-dev-client with: npx expo install expo-dev-client (npm), yarn expo install expo-dev-client (yarn), pnpm expo install expo-dev-client (pnpm), or bun expo install expo-dev-client (bun). Install @react-native-firebase/app with: npx expo install @react-native-firebase/app (npm), yarn expo install @react-native-firebase/app (yarn), pnpm expo install @react-native-firebase/app (pnpm), or bun expo install @react-native-firebase/app (bun).

Local development setup for React Native Firebase

To run a React Native Firebase project locally, you need both Android Studio and Xcode installed and configured on your machine. If a React Native Firebase module requires custom native configuration steps, add it as a plugin to the app config file and run npx expo prebuild --clean to apply native changes before npx expo run commands.

Full Next.js configuration example with Expo

A complete next.config.js configuration with Expo looks like: const { withExpo } = require('@expo/next-adapter'); const nextConfig = withExpo({ reactStrictMode: true, swcMinify: true, transpilePackages: ['react-native', 'react-native-web', 'expo'], experimental: { forceSwcTransforms: true } }); module.exports = nextConfig;

React Native Web styling reset in Next.js pages directory

react-native-web builds on the assumption of reset CSS styles. In pages/_document.js, register the Main component with AppRegistry, get style elements, and include reset CSS. The reset CSS should set html, body, and #__next with properties like height: 100%, flex display, smooth scroll behavior, and font smoothing for cross-browser compatibility.

pages/_document.js setup for react-native-web

Create pages/_document.js that registers 'main' with AppRegistry, calls AppRegistry.getApplication('main').getStyleElement() in getInitialProps, includes the react-native-web reset CSS, and renders with html style height: 100%, body style height: 100% and overflow: hidden.

pages/_app.js viewport meta tag for Next.js with Expo

In pages/_app.js, include a viewport meta tag in the Head component with content="width=device-width, initial-scale=1" to ensure proper mobile rendering.

Using Next.js with Expo is not official

Using Next.js is not an official part of Expo's universal app development workflow.

Next.js only works with Expo for web

Next.js can only be used with Expo for web. There is no support for Server-Side Rendering (SSR) for native apps.

Cannot use import statement outside a module troubleshooting

If you encounter the error 'Cannot use import statement outside a module', identify which module has the import statement and add it to the transpilePackages option in next.config.js, then restart the development server.

Use Expo Router for file-based routing on native

For file-based routing on native platforms, use Expo Router instead of Next.js routing.

Expo Next.js adapter app directory limitation

The Expo Next.js adapter does not support the experimental app directory in Next.js.

Deploy Next.js with Expo to Vercel

To deploy a Next.js project with Expo to Vercel: add a build script to package.json with "build": "next build", install the Vercel CLI globally (npm install --global vercel, yarn global add vercel, pnpm add --global vercel, or bun add --global vercel), then run vercel to deploy.

Module transpilation default behavior in Next.js

By default, modules in the React Native ecosystem are not transpiled to run in web browsers. Next.js uses webpack, which does not have the same level of caching as Metro, so no node modules are transpiled by default. You must manually mark every module you want to transpile with the transpilePackages option in next.config.js.

@expo/next-adapter library for Next.js configuration

Use the @expo/next-adapter library to handle configuration when integrating Next.js with the Expo SDK.

Use Next.js CLI for web, not npx expo start

When developing for the web platform with Next.js, you must start your web projects with the Next.js CLI using npx next dev, not with npx expo start. Use npx expo start only for native development.

Create Next.js project with with-nextjs template

To quickly get started with Next.js and Expo, create a new project using the with-nextjs template with: npx create-expo-app -e with-nextjs (npm), yarn create expo-app -e with-nextjs (yarn), pnpm create expo-app -e with-nextjs (pnpm), or bun create expo -e with-nextjs (bun).

Dependencies for Next.js with Expo

Install the following packages for Next.js with Expo: expo, next, and @expo/next-adapter.

Babel configuration for Next.js with Expo

Configure babel.config.js to use only babel-preset-expo for native development. The minimal configuration is: module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'] }; };

Force Next.js to use SWC transpilation

Using Next.js with SWC is recommended. Add forceSwcTransforms: true to the experimental object in next.config.js to force Next.js to use SWC instead of Babel.

Babel configuration for Next.js with Babel transpilation

If using Babel instead of SWC, configure babel.config.js to conditionally add next/babel only for web bundling. Detect web usage by checking if the API caller name is 'babel-loader' or 'next-babel-turbo-loader', and add next/babel to presets only when isWeb is true. Include 'babel-preset-expo' for native support.

withExpo wrapper for Next.js configuration

Use the withExpo function from @expo/next-adapter to wrap your Next.js configuration: const { withExpo } = require('@expo/next-adapter'); module.exports = withExpo({ /* config */ });

transpilePackages configuration for Next.js

In next.config.js, configure transpilePackages to include packages that need transpilation for the web: transpilePackages: ['react-native', 'react-native-web', 'expo']. Note that even though react-native is never used directly in Next.js, it must be listed because react-native-web is aliased to react-native. Add additional React Native and Expo packages as needed.

EAS Workflows PostHog integration

EAS Workflows can interact with PostHog from the CI pipeline. You can send events, create annotations, roll out feature flags, gate rollouts on live metrics, and upload source maps as workflow steps. These steps automatically read EXPO_PUBLIC_POSTHOG_* and POSTHOG_CLI_* environment variables that connect sets. PostHog functions are available in the EAS Workflows syntax reference.

PostHogProvider example with error tracking configuration

Example root layout with PostHogProvider: import { PostHogProvider } from 'posthog-react-native'; import { Slot } from 'expo-router'; export default function RootLayout() { return (<PostHogProvider apiKey={process.env.EXPO_PUBLIC_POSTHOG_API_KEY} options={{ host: process.env.EXPO_PUBLIC_POSTHOG_HOST, enableSessionReplay: false, errorTracking: { autocapture: { uncaughtExceptions: true, unhandledRejections: true } }, }}><Slot /></PostHogProvider>); } Set enableSessionReplay to true if enabled, include errorTracking only if error tracking is enabled, and uncomment disabled: __DEV__ to stop sending events from development builds.

PostHog troubleshooting: source maps not symbolicating

Confirm metro.config.js is wrapped with getPostHogExpoConfig and that POSTHOG_CLI_* environment variables are set (connect adds them when error tracking is enabled). For over-the-air updates, ensure you ran `posthog-cli hermes upload --directory dist` after `eas update`.

PostHog troubleshooting: session replay not working

Session replay requires a development build since it doesn't work with Expo Go. If your project uses Continuous Native Generation, create a development build with `npx expo run:android` or `npx expo run:ios` locally, or with `eas build --profile development`.

PostHog source maps setup with metro.config.js

To set up source map injection, add getPostHogExpoConfig to metro.config.js: const { getPostHogExpoConfig } = require('posthog-react-native/metro'); const config = getPostHogExpoConfig(__dirname); module.exports = config; If already customizing Metro config, apply changes to the config object returned by getPostHogExpoConfig instead of calling getDefaultConfig yourself.

Give your agent this brain