### Scaffold New Project from Expo Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-examples/SKILL.md Create a new Expo project directly from a specified example. This is the quickest way to start a new project based on a template. ```bash npx create-expo --example with-stripe # short form: npx create-expo -e with-stripe ``` ```bash bun create expo --example with-stripe # with bun ``` -------------------------------- ### List Live Expo Example Names Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-examples/SKILL.md Use this command to get a live list of example names from the Expo GitHub repository. This helps in triaging and finding relevant examples. ```bash gh api repos/expo/examples/contents --jq '.[] | select(.type=="dir" and (.name|startswith(".")|not)) | .name' ``` -------------------------------- ### List Files in an Expo Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-examples/SKILL.md Recursively list all file paths within a specific example directory in the Expo examples repository. This is useful for understanding the structure of an example before fetching individual files. ```bash gh api 'repos/expo/examples/git/trees/master?recursive=1' --jq '.tree[].path | select(startswith("with-stripe/"))' ``` -------------------------------- ### Install Android Build Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-dev-client/SKILL.md Install a locally built Android development client using ADB. ```bash adb install build.apk ``` -------------------------------- ### Install iOS Build on Simulator Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-dev-client/SKILL.md Install a locally built iOS development client on a simulator by extracting the .app file from the output archive. ```bash # Find the .app in the .tar.gz output tar -xzf build-*.tar.gz xcrun simctl install booted ./path/to/App.app ``` -------------------------------- ### Plugin Manifest Example Source: https://github.com/expo/skills/blob/main/AGENTS.md A basic example of a `.claude-plugin/plugin.json` file. Ensure 'name' is unique and in kebab-case. ```json { "name": "my-plugin", "version": "1.0.0", "description": "Brief description of the plugin", "author": { "name": "Expo Team", "email": "support@expo.dev" } } ``` -------------------------------- ### Install Expo Beta Version Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/upgrading-expo/SKILL.md Use this command to install a beta or preview version of Expo, identified by the '.preview' suffix. ```bash npx expo install expo@next --fix ``` -------------------------------- ### Install iOS Build on Device Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-dev-client/SKILL.md Install a locally built iOS development client on a physical device using ideviceinstaller. ```bash # Use Xcode Devices window or ideviceinstaller ideviceinstaller -i build.ipa ``` -------------------------------- ### Download Expo Example Locally Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-examples/SKILL.md Clone an entire Expo example into a local directory for free-form study using tools like Grep. This is recommended when multiple files need to be examined. ```bash npx degit expo/examples/with-stripe /tmp/expo-ref/with-stripe # clean copy, no git history ``` ```bash git clone --depth 1 --filter=blob:none --sparse https://github.com/expo/examples.git /tmp/expo-ref/examples \ && (cd /tmp/expo-ref/examples && git sparse-checkout set with-stripe) ``` -------------------------------- ### Install Expo Skills from Marketplace Source: https://github.com/expo/skills/blob/main/AGENTS.md Users can install the active plugin directly from the marketplace. This command adds the expo/skills plugin. ```bash /plugin marketplace add expo/skills /plugin install expo ``` -------------------------------- ### Install Pods Command Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-integrated.md Navigate to the 'ios' directory and run this command to install all necessary CocoaPods dependencies. ```sh cd ios && pod install ``` -------------------------------- ### Dynamic Route Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/route-structure.md Use square brackets in file names to define dynamic route segments. This example shows how to match routes like /users/123 or /users/abc. ```plaintext app/ users/ [id].tsx # Matches /users/123, /users/abc [id]/ posts.tsx # Matches /users/123/posts ``` -------------------------------- ### API Client with Environment Configuration Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/native-data-fetching/SKILL.md An example of an API client that uses environment variables for its base URL. It includes basic GET and POST methods and throws an error if the URL is not defined. ```tsx // api/client.ts const BASE_URL = process.env.EXPO_PUBLIC_API_URL; if (!BASE_URL) { throw new Error("EXPO_PUBLIC_API_URL is not defined"); } export const apiClient = { get: async (path: string): Promise => { const response = await fetch(`${BASE_URL}${path}`); if (!response.ok) throw new Error(`HTTP ${response.status}`); return response.json(); }, post: async (path: string, body: unknown): Promise => { const response = await fetch(`${BASE_URL}${path}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), }); if (!response.ok) throw new Error(`HTTP ${response.status}`); return response.json(); }, }; ``` -------------------------------- ### Install expo-brownfield Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-isolated.md Navigate to your project directory and install the expo-brownfield package. ```sh cd my-project npx expo install expo-brownfield ``` -------------------------------- ### Start Expo Development Server with API Routes Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-api-routes/SKILL.md Run this command to start a local development server with full API route support. It will be accessible at http://localhost:8081. ```bash npx expo serve ``` -------------------------------- ### Start Metro for Debug Builds Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-isolated.md Use this command to start the Metro bundler for development builds. Ensure your device or emulator can reach the dev machine. ```sh npx expo start ``` -------------------------------- ### Install expo-observe library Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-observe/references/setup.md Install the `expo-observe` library and any necessary dependencies. Ensure your project meets the prerequisites, including Expo SDK 55 or later and an EAS project. ```sh npx expo install --fix npx expo install expo-observe ``` -------------------------------- ### Skill File Frontmatter Example Source: https://github.com/expo/skills/blob/main/AGENTS.md An example of YAML frontmatter for a `SKILL.md` file. The 'name' and 'description' fields are required and have specific formatting and length constraints. ```markdown --- name: skill-name description: What the skill does and when to use it. version: 1.0.0 license: MIT --- # Skill Title Skill content goes here... ``` -------------------------------- ### Connect to Local Development Server Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-dev-client/SKILL.md Start the Metro bundler with the --dev-client flag and connect the development client by scanning a QR code or entering the URL. ```bash # Start Metro bundler npx expo start --dev-client # Scan QR code with dev client or enter URL manually ``` -------------------------------- ### Install and Login EAS CLI Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-deployment/SKILL.md Install the EAS CLI globally and log in to your Expo account. This is the first step before initializing EAS for your project. ```bash npm install -g eas-cli eas login ``` -------------------------------- ### Audio Playback: Before (expo-av) Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/upgrading-expo/references/expo-av-to-audio.md Example of setting up and playing audio using the older expo-av library. Requires manual sound object management and cleanup. ```tsx const [sound, setSound] = useState(); async function playSound() { const { sound } = await Audio.Sound.createAsync(require('./audio.mp3')); setSound(sound); await sound.playAsync(); } useEffect(() => { return sound ? () => { sound.unloadAsync(); } : undefined; }, [sound]); ``` -------------------------------- ### Icon Button Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/toolbar-and-headers.md An example of an icon button for a toolbar. Requires an 'icon' prop and an 'onPress' handler. ```tsx {}} /> ``` -------------------------------- ### Install All Expo Skills with Skills CLI Source: https://github.com/expo/skills/blob/main/README.md Use this command to install all available Expo skills for AI agents. Run from the project root and restart your agent session afterward. ```text npx skills@latest add expo/skills --skill '*' ``` -------------------------------- ### Install Expo UI Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-ui/SKILL.md Install the @expo/ui package using npm or yarn. This command is compatible with Expo Go on SDK 56+. ```bash npx expo install @expo/ui ``` -------------------------------- ### Text Button Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/toolbar-and-headers.md An example of a text button for a toolbar. Requires an 'onPress' handler and button text. ```tsx {}}>Done ``` -------------------------------- ### Install WebGPU Three.js Dependencies Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/webgpu-three.md Install the necessary packages for WebGPU and Three.js integration. The `--legacy-peer-deps` flag might be required for compatibility with certain Expo versions. ```bash npm install react-native-wgpu@^0.4.1 three@0.172.0 @react-three/fiber@^9.4.0 wgpu-matrix@^3.0.2 @types/three@0.172.0 --legacy-peer-deps ``` -------------------------------- ### Fetch Specific File Content from Expo Examples Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-examples/SKILL.md Download the content of a specific file from an Expo example. This can be done using the GitHub CLI or a direct curl command to the raw file URL. ```bash gh api repos/expo/examples/contents/with-stripe/utils/stripe-server.ts --jq '.content' | base64 -d ``` ```bash curl -s https://raw.githubusercontent.com/expo/examples/master/with-stripe/utils/stripe-server.ts ``` -------------------------------- ### Audio Recording: Before (expo-av) Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/upgrading-expo/references/expo-av-to-audio.md Example of setting up and managing audio recording with expo-av. Includes permission requests and manual stop/unload operations. ```tsx const [recording, setRecording] = useState(); async function startRecording() { await Audio.requestPermissionsAsync(); await Audio.setAudioModeAsync({ allowsRecordingIOS: true, playsInSilentModeIOS: true }); const { recording } = await Audio.Recording.createAsync(Audio.RecordingOptionsPresets.HIGH_QUALITY); setRecording(recording); } async function stopRecording() { await recording?.stopAndUnloadAsync(); const uri = recording?.getURI(); } ``` -------------------------------- ### Configure Plugin in app.json Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-module/references/config-plugin.md Example of how to include a custom plugin in your `app.json` configuration, specifying the plugin name and its parameters. ```json { "expo": { "plugins": [["my-module", { "apiKey": "secret_key" }]] } } ``` -------------------------------- ### Start Metro Bundler Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-integrated.md Start the Metro bundler from the Expo project directory to serve JS bundles during development. This is essential for hot reloading and debugging. ```shell yarn start ``` -------------------------------- ### Full Native Tabs Migration Example (Before SDK 55) Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/upgrading-expo/references/native-tabs.md Example of a TabLayout component using Native Tabs with separate imports for Icon, Label, and Badge, as used in SDK 53/54. ```tsx import { NativeTabs, Icon, Label, Badge, } from "expo-router/unstable-native-tabs"; export default function TabLayout() { return ( 3 ); } ``` -------------------------------- ### App Directory Structure Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/route-structure.md Illustrates a typical directory and file organization for an Expo Router application, showing how routes and components are structured. ```plaintext app/ _layout.tsx — (index,search)/ _layout.tsx — index.tsx — Main list search.tsx — Search view i/[id].tsx — Detail page components/ theme.tsx list.tsx utils/ storage.ts use-search.ts ``` -------------------------------- ### Full Native Tabs Migration Example (SDK 55+) Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/upgrading-expo/references/native-tabs.md Example of a TabLayout component using Native Tabs with updated syntax for SDK 55+, accessing Icon, Label, and Badge as static properties of NativeTabs.Trigger. ```tsx import { NativeTabs } from "expo-router/unstable-native-tabs"; export default function TabLayout() { return ( Home 3 Settings Search ); } ``` -------------------------------- ### Launch ReactActivity from Native Code Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-integrated.md Start the `MyReactActivity` from your existing native Android code using an Intent. ```kotlin startActivity(Intent(this, MyReactActivity::class.java)) ``` -------------------------------- ### Monorepo Setup with Expo Workspace Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-integrated.md Configure a monorepo structure by defining workspaces in the root `package.json` for Expo projects. ```json { "version": "1.0.0", "private": true, "workspaces": ["my-project"] } ``` -------------------------------- ### Catch-All Route Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/route-structure.md Employ `[...slug]` for catch-all routes to match any path segments. This is useful for nested or deeply hierarchical routes. ```plaintext app/ docs/ [...slug].tsx # Matches /docs/a, /docs/a/b, /docs/a/b/c ``` -------------------------------- ### Test API Routes with curl Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-api-routes/SKILL.md Use curl to send GET and POST requests to your locally running API routes. Ensure the server is started with `npx expo serve` before running these commands. ```bash curl http://localhost:8081/api/hello ``` ```bash curl -X POST http://localhost:8081/api/users -H "Content-Type: application/json" -d '{"name":"Test"}' ``` -------------------------------- ### Use useObserve in Expo Router Screens Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-observe/references/setup.md Call `useObserve()` inside each screen to get a `markInteractive` function scoped to the current route. This function should be called from a `useEffect` once the screen is interactive. Requires `expo-router` installed at runtime. ```tsx import { useObserve } from 'expo-observe'; import { useEffect } from 'react'; export default function Home() { const { markInteractive } = useObserve(); useEffect(() => { markInteractive(); }, [markInteractive]); return (/* screen content */); } ``` -------------------------------- ### Mail Inbox Example with Advanced Toolbars Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/toolbar-and-headers.md Create a complex toolbar setup for a mail inbox screen, featuring a transparent header, a right-aligned header toolbar with a menu, and a bottom toolbar with filter options and a search bar. ```tsx import { Color, Stack } from "expo-router"; import { useState } from "react"; import { ScrollView, Text, View } from "react-native"; export default function InboxScreen() { const [isFilterOpen, setIsFilterOpen] = useState(false); return ( <> {/* Screen content *} Inbox {}} /> {/* Header toolbar - right side *} {}}>Select Categories List About categories Show Contact Photos {/* Bottom toolbar *} setIsFilterOpen((prev) => !prev)} /> {}} separateBackground /> ); } ``` -------------------------------- ### Implementing CORS Headers for Web Clients in Expo API Routes Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-api-routes/SKILL.md Configure CORS headers to allow cross-origin requests from web clients. This example sets up headers for allowing all origins and common HTTP methods, and includes handlers for OPTIONS and GET requests. ```typescript const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization", }; export function OPTIONS() { return new Response(null, { headers: corsHeaders }); } export function GET() { return Response.json({ data: "value" }, { headers: corsHeaders }); } ``` -------------------------------- ### Fetch Renamed and Deprecated Examples Metadata Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-examples/SKILL.md Retrieve metadata about renamed (aliases) and deprecated examples from the `meta.json` file in the Expo examples repository. This is crucial for understanding the current status and recommended alternatives for examples. ```bash gh api repos/expo/examples/contents/meta.json --jq '.content' | base64 -d ``` -------------------------------- ### Install Expo Dependencies with npx expo install Source: https://github.com/expo/skills/blob/main/README.md This command is used to install compatible dependencies for an Expo project. It ensures that the correct versions are selected. ```bash npx expo install ``` -------------------------------- ### Update All Installed Skills Source: https://github.com/expo/skills/blob/main/README.md Run this command to update all skills installed via the skills CLI to their latest versions. Ensure you have the latest version of the skills CLI itself by running `npm install -g skills-cli` if needed. ```bash npx skills@latest update ``` -------------------------------- ### Submit to TestFlight Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-deployment/references/testflight.md Run this command to build and submit your app to TestFlight. Ensure you have configured your Apple credentials. ```bash npx testflight ``` -------------------------------- ### Query App Startup Times Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-observe/references/queries.md Retrieves a summary of app startup times, allowing filtering by date and statistics like median and p90. ```bash eas observe:metrics-summary --days 7 --stat median --stat p90 ``` -------------------------------- ### Create Production Builds Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-deployment/SKILL.md Commands to create production-ready builds for iOS and Android platforms. You can build for one or both platforms simultaneously. ```bash # iOS App Store build npx eas-cli@latest build -p ios --profile production # Android Play Store build npx eas-cli@latest build -p android --profile production # Both platforms npx eas-cli@latest build --profile production ``` -------------------------------- ### Build Development Client Locally Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-dev-client/SKILL.md Build a development client on your local machine for iOS (requires Xcode) or Android. ```bash # iOS (requires Xcode) eas build -p ios --profile development --local # Android eas build -p android --profile development --local ``` -------------------------------- ### Compare Adoption Between Channels Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/eas-update-insights/SKILL.md Compares user adoption metrics (embedded and OTA installs, top update) for 'production' and 'staging' channels for a specific runtime version. Useful for understanding channel performance differences. ```bash for channel in production staging; do echo "--- $channel ---" eas channel:insights --channel "$channel" --runtime-version 1.0.6 --json --non-interactive \ | jq '{ channel, embedded: .embeddedUpdateTotalUniqueUsers, ota: .otaTotalUniqueUsers, topUpdate: .mostPopularUpdates[0] }' done ``` -------------------------------- ### Build and Submit to Stores Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-deployment/SKILL.md Commands to build your application and directly submit it to the respective app stores. Includes a shortcut for iOS TestFlight submissions. ```bash # iOS: Build and submit to App Store Connect npx eas-cli@latest build -p ios --profile production --submit # Android: Build and submit to Play Store npx eas-cli@latest build -p android --profile production --submit # Shortcut for iOS TestFlight npx testflight ``` -------------------------------- ### Register Bundle IDs and Create App Store Entry Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/add-app-clip/SKILL.md Use this command to log in to your Apple Developer account, register your bundle ID, create the App Store Connect entry, and generate necessary starter files and IDs. ```sh bunx setup-safari ``` -------------------------------- ### Install react-native-worklets for Reanimated Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/upgrading-expo/references/new-architecture.md When using React Native Reanimated with SDK 54+, ensure `react-native-worklets` is installed. This is a prerequisite for Reanimated to function correctly with the New Architecture. ```bash npx expo install react-native-worklets ``` -------------------------------- ### Generate Native Projects for Debugging Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-isolated.md Run this command to create `android/` and `ios/` directories containing the brownfield wrappers for debugging native code. ```bash npx expo prebuild ``` -------------------------------- ### Configuring Fullscreen and PiP for VideoView Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/upgrading-expo/references/expo-av-to-video.md Demonstrates how to enable fullscreen and Picture-in-Picture (PiP) modes for the `VideoView` component and configure background playback and PiP support in `app.json`. ```tsx {}} onFullscreenExit={() => {}} /> ``` ```json { "expo": { "plugins": [ ["expo-video", { "supportsBackgroundPlayback": true, "supportsPictureInPicture": true }] ] } } ``` -------------------------------- ### Install Tailwind CSS and NativeWind Dependencies Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-tailwind-setup/SKILL.md Install the necessary packages for Tailwind CSS v4, NativeWind v5, and react-native-css using Expo's package manager. ```bash npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx ``` -------------------------------- ### Web PR Preview Workflow Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-deployment/references/workflows.md Set up a workflow to create web application previews for pull requests. This workflow triggers on pull request events and uses the 'deploy' job type with production disabled for previews. ```yaml name: Web PR Preview on: pull_request: types: [opened, synchronize] jobs: preview: type: deploy params: prod: false ``` -------------------------------- ### Installing Packages with Legacy Peer Dependencies Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/webgpu-three.md Use the '--legacy-peer-deps' flag during npm installation to resolve peer dependency conflicts, particularly when encountering ERESOLVE errors. ```bash npm install --legacy-peer-deps ``` -------------------------------- ### Add Platform Support Interactively Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-module/references/create-expo-module.md Run this command from your module's root directory to interactively add platform support. The CLI will prompt you for necessary information. ```bash npx create-expo-module@latest add-platform-support ``` -------------------------------- ### Present React Native View with Props and Launch Options Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-isolated.md Pass initial properties and launch options when creating a `ReactNativeViewController` to customize the React Native component's initial state. ```swift let rnViewController = ReactNativeViewController( moduleName: "main", initialProps: ["userId": "123"], launchOptions: [:] ) ``` -------------------------------- ### Native Tabs Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/tabs.md Example of configuring tabs using the newer Native Tabs API in Expo Router. This API uses a component-based approach for labels, icons, and badges. ```tsx import { NativeTabs } from "expo-router/unstable-native-tabs"; Home 3 ``` -------------------------------- ### Create ReactActivity for Hosting React Native Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-integrated.md Define a ReactActivity that will host your React Native screens. Ensure the `moduleName` matches your JS entry point registration. ```kotlin package com.example.myapp import com.facebook.react.ReactActivity import com.facebook.react.ReactActivityDelegate import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled import com.facebook.react.defaults.DefaultReactActivityDelegate import expo.modules.ReactActivityDelegateWrapper class MyReactActivity : ReactActivity() { override fun getMainComponentName(): String = "main" override fun createReactActivityDelegate(): ReactActivityDelegate { return ReactActivityDelegateWrapper( this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED, object : DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) {} ) } } ``` -------------------------------- ### JS Tabs Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/tabs.md Example of how to configure tabs using the older JS Tabs API in Expo Router. This includes setting titles, badges, and icons for tab screens. ```tsx import { Tabs } from "expo-router"; , tabBarBadge: 3, }} /> ``` -------------------------------- ### Build for Specific Platform Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-dev-client/SKILL.md Build a development client for a specific platform (iOS only, Android only) or for both platforms. ```bash # iOS only eas build -p ios --profile development # Android only eas build -p android --profile development # Both platforms eas build --profile development ``` -------------------------------- ### Basic GET Request with Fetch API Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/native-data-fetching/SKILL.md Implement a simple GET request to fetch data from a specified user ID. Handles basic HTTP errors by throwing an Error object. ```typescript const fetchUser = async (userId: string) => { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }; ``` -------------------------------- ### Environment-Specific Configuration Files Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/native-data-fetching/SKILL.md Shows how to define different environment variables for development and production environments using separate .env files. ```tsx // .env.development EXPO_PUBLIC_API_URL=http://localhost:3000 // .env.production EXPO_PUBLIC_API_URL=https://api.production.com ``` -------------------------------- ### Complete Game Scene Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/webgpu-three.md A full React Native component demonstrating a 3D game scene with a player, camera controls, and interactive elements using WebGPU and React Three Fiber. ```tsx import * as THREE from "three/webgpu"; import { View, Text, Pressable } from "react-native"; import { useRef, useState, useCallback } from "react"; import { useFrame, useThree } from "@react-three/fiber"; import { FiberCanvas } from "@/lib/fiber-canvas"; function Player({ position }: { position: THREE.Vector3 }) { const ref = useRef(null!); useFrame(() => { ref.current.position.copy(position); }); return ( ); } function GameScene({ playerX }: { playerX: number }) { const { camera } = useThree(); const playerPos = useRef(new THREE.Vector3(0, 0, 0)); playerPos.current.x = playerX; useEffect(() => { camera.position.set(0, 10, 15); camera.lookAt(0, 0, 0); }, [camera]); return ( <> ); } export default function Game() { const [playerX, setPlayerX] = useState(0); return ( setPlayerX((x) => x - 1)}> ◀ setPlayerX((x) => x + 1)}> ▶ ); } ``` -------------------------------- ### Install Expo Plugin for Claude Code Source: https://github.com/expo/skills/blob/main/README.md Install the Expo plugin for Claude Code via the official plugin marketplace. This command can also be run directly within Claude Code using a slash command. ```text claude plugin install expo@claude-plugins-official ``` -------------------------------- ### Initialize Turso Client for API Routes Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-api-routes/SKILL.md Example of initializing a Turso client within an API route file (`app/api/users+api.ts`). Ensure `TURSO_URL` and `TURSO_AUTH_TOKEN` are set as environment variables. ```typescript // app/api/users+api.ts import { createClient } from "@libsql/client/web"; const db = createClient({ url: process.env.TURSO_URL!, authToken: process.env.TURSO_AUTH_TOKEN!, }); export async function GET() { const result = await db.execute("SELECT * FROM users"); return Response.json(result.rows); } ``` -------------------------------- ### Install Expo Packages with Expo CLI Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/troubleshooting.md Use `expo install` instead of `yarn add` for Expo packages. This ensures compatibility with your current Expo SDK version and helps prevent 'Native module cannot be null' errors. ```bash npx expo install ``` -------------------------------- ### Launch ExpoActivity from Native Code Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-isolated.md Start the `ExpoActivity` from other native Android components using an `Intent`. ```kotlin startActivity(Intent(this, ExpoActivity::class.java)) ``` -------------------------------- ### Expo Module Configuration Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-module/references/module-config.md This JSON configuration file specifies the platforms a module supports and lists the module and delegate class names for Apple and Android platforms. It is used by Expo's autolinking system. ```json { "platforms": ["android", "apple", "web"], "apple": { "modules": ["MyModule"], "appDelegateSubscribers": ["MyAppDelegateSubscriber"] }, "android": { "modules": ["expo.modules.mymodule.MyModule"] } } ``` -------------------------------- ### Initialize React Native and Expo in MainApplication.kt Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-brownfield/references/brownfield-integrated.md Initialize React Native and Expo lifecycle dispatch within your Application class. This setup is crucial for the Expo environment to function correctly. ```kotlin package com.example.myapp import android.app.Application import android.content.res.Configuration import com.facebook.react.PackageList import com.facebook.react.ReactApplication import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative import com.facebook.react.ReactHost import com.facebook.react.common.ReleaseLevel import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint import expo.modules.ApplicationLifecycleDispatcher import expo.modules.ExpoReactHostFactory class MainApplication : Application(), ReactApplication { override val reactHost: ReactHost by lazy { ExpoReactHostFactory.getDefaultReactHost( context = applicationContext, packageList = PackageList(this).packages ) } override fun onCreate() { super.onCreate() DefaultNewArchitectureEntryPoint.releaseLevel = try { ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase()) } catch (_: IllegalArgumentException) { ReleaseLevel.STABLE } loadReactNative(this) ApplicationLifecycleDispatcher.onApplicationCreate(this) } override fun onConfigurationChanged(newConfig: Configuration) { super.onConfigurationChanged(newConfig) ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig) } } ``` -------------------------------- ### Basic Usage of Universal Expo UI Components Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-ui/references/universal.md Demonstrates the fundamental structure for using universal components. All UI trees must be wrapped in the `Host` component. ```tsx import { Host, Column, Button, Text } from '@expo/ui'; Hello ; ``` -------------------------------- ### Dynamic Routes Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/expo-api-routes/SKILL.md Shows how to create dynamic API routes by using bracketed parameters in the file name, allowing for variable path segments. ```APIDOC ## GET /api/users/[id] ### Description Retrieves information for a specific user based on their ID. ### Method GET ### Endpoint /api/users/[id] ### Parameters #### Path Parameters - **id** (string) - Required - The unique identifier of the user. ``` -------------------------------- ### Symbol Scales Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/icons.md Shows how to adjust the scale of SF Symbols, with options for small, medium (default), and large. ```tsx // default ``` -------------------------------- ### Symbol Weights Example Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/building-native-ui/references/icons.md Demonstrates how to set different font weights for SF Symbols, ranging from ultraLight to black. ```tsx // Lighter weights // Default // Heavier weights ``` -------------------------------- ### Basic Video Playback with expo-av Source: https://github.com/expo/skills/blob/main/plugins/expo/skills/upgrading-expo/references/expo-av-to-video.md Demonstrates how to set up and control video playback using the expo-av library, including setting the source, style, loop, and playback status updates. ```tsx const videoRef = useRef