Expo Brownfield Integration
mweinbach/agent-coworker
Helps add Expo and React Native to an existing native iOS or Android app, and choose between a prebuilt AAR or XCFramework and a fully integrated build.
Upgrade the React Native fixture app to a new version. An agent skill from Shopify/flash-list.
Install Upgrade React Native
$ npx skills add Shopify/flash-list --skill upgrade-react-native -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Shopify/flash-list upgrade-react-native --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Shopify/flash-list.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/upgrade-react-native .claude/skills/upgrade-react-native && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "upgrade-react-native" agent skill from https://github.com/Shopify/flash-list/tree/main/.claude/skills/upgrade-react-native into .claude/skills/upgrade-react-native/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "upgrade-react-native", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Shopify/flash-list/tree/main/.claude/skills/upgrade-react-nativeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Shopify/flash-list --skill upgrade-react-native -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Shopify/flash-list upgrade-react-native --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Shopify/flash-list.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/upgrade-react-native .agents/skills/upgrade-react-native && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "upgrade-react-native" agent skill from https://github.com/Shopify/flash-list/tree/main/.claude/skills/upgrade-react-native into .agents/skills/upgrade-react-native/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "upgrade-react-native", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Shopify/flash-list --skill upgrade-react-native -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Shopify/flash-list upgrade-react-native --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Shopify/flash-list.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/upgrade-react-native .cursor/skills/upgrade-react-native && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "upgrade-react-native" agent skill from https://github.com/Shopify/flash-list/tree/main/.claude/skills/upgrade-react-native into .cursor/skills/upgrade-react-native/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "upgrade-react-native", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Shopify/flash-list.git --path .claude/skills/upgrade-react-native--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Shopify/flash-list --skill upgrade-react-native -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Shopify/flash-list upgrade-react-native --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Shopify/flash-list.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/upgrade-react-native .gemini/skills/upgrade-react-native && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "upgrade-react-native" agent skill from https://github.com/Shopify/flash-list/tree/main/.claude/skills/upgrade-react-native into .gemini/skills/upgrade-react-native/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "upgrade-react-native", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Shopify/flash-list upgrade-react-nativeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Shopify/flash-list --skill upgrade-react-native -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Shopify/flash-list.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/upgrade-react-native .github/skills/upgrade-react-native && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "upgrade-react-native" agent skill from https://github.com/Shopify/flash-list/tree/main/.claude/skills/upgrade-react-native into .github/skills/upgrade-react-native/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "upgrade-react-native", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Shopify/flash-list --skill upgrade-react-native -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Shopify/flash-list upgrade-react-native --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Shopify/flash-list.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/upgrade-react-native .opencode/skills/upgrade-react-native && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "upgrade-react-native" agent skill from https://github.com/Shopify/flash-list/tree/main/.claude/skills/upgrade-react-native into .opencode/skills/upgrade-react-native/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "upgrade-react-native", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
upgrade-react-native- GitHub stars
- 7.2k
- Token cost
- ~1.9k tokens
- SKILL.md length
- 706 words
- Files
- 1
- Skills in repo
- 7
- Repo updated
- First seen
- Licence
- MIT
At a glance
Upgrade the React Native fixture app to a new version. An agent skill from Shopify/flash-list.
- Works in 6 steps: Research the Target Version → Update Dependencies → Update Android → …
- Tasks that involve Cross-platform mobile apps
- SKILL.md covers Overview, Step 1 — Research the Target…, Step 2 — Update Dependencies and Step 3 — Update Android, plus 4 more sections
- Calls yarn, npm and xcodebuild; reaches raw.githubusercontent.com
What it does
Upgrade React Native is an agent skill from Shopify/flash-list, published by the product's own GitHub organization. Upgrade the React Native fixture app to a new version. Covers JS deps, Android (Gradle, Kotlin, SDK), iOS (Podfile, pbxproj), Metro config, and third-party libraries.
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Mobile, covering Cross-platform mobile apps and Android development. It works with React Native, Gradle, Android and iOS. The repository describes itself as: A better list for React Native. The licence is MIT.
When your agent uses it
- Tasks that involve Cross-platform mobile apps
- Tasks that involve Android development
Example prompts
- “/upgrade-react-native”
Requirements
- Node.js
Workflow steps
6 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 527d767. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
yarnnpmxcodebuildnpxnode
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
raw.githubusercontent.com
Also links to:
docs.swmansion.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Upgrade React Native loads about 1.9k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 706 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Shopify/flash-list at commit 527d767, republished under its MIT licence (© Shopify). 706 words, ~1,890 tokens.
Download SKILL.mdSave it as
.claude/skills/upgrade-react-native/SKILL.md (or your agent's skills folder).- name
- upgrade-react-native
- description
- Upgrade the React Native fixture app to a new version. Covers JS deps, Android (Gradle, Kotlin, SDK), iOS (Podfile, pbxproj), Metro config, and third-party libraries.
Upgrade React Native Fixture App
Overview
The fixture app lives in fixture/react-native/. It is the primary test vehicle for FlashList on iOS and Android. The web fixture (fixture/web/) uses Expo and is independent — check it builds after the upgrade but it does not need the same dependency changes.
Step 1 — Research the Target Version
Check the latest stable RN version:
bash npm view react-native@latest versionUse the rn-diff-purge repo to see the exact template diff between your current and target version:
https://raw.githubusercontent.com/react-native-community/rn-diff-purge/release/<version>/RnDiffApp/<file>Key files to fetch:
package.json— React version, CLI versions, dev dep versionsandroid/build.gradle— SDK versions, Kotlin versionandroid/app/build.gradle— plugin names, dependency patternsandroid/gradle.properties— feature flags (newArch, hermes, edgeToEdge)android/gradle/wrapper/gradle-wrapper.properties— Gradle versionandroid/settings.gradle— plugin management patternandroid/app/src/main/java/com/rndiffapp/MainApplication.kt— app initialization patternios/Podfile— pod configuration, post_install hooksios/RnDiffApp/AppDelegate.swift— app delegate patternmetro.config.js— Metro config API changes
Check third-party library compatibility with the target RN version:
react-native-reanimated— check compatibility tablereact-native-gesture-handler— supports 3 latest RN minorsreact-native-screens,react-native-safe-area-context— usually latest works@react-navigation/*— check for breaking changes- Any image library (
@d11/react-native-fast-image, etc.)
Step 2 — Update Dependencies
fixture/react-native/package.json
Update in this order:
reactandreact-native— match the template@react-native/*dev packages — must match the RN minor (e.g.,@react-native/babel-preset@0.84.1for RN 0.84.1)@react-native-community/cli*— match the template- Third-party native libraries — bump to versions compatible with the target RN
- Any new peer dependencies (e.g., reanimated 4 requires
react-native-worklets)
Babel config
Check if any Babel plugins moved packages. Example: reanimated 4 moved react-native-reanimated/plugin to react-native-worklets/plugin.
Metro config
Metro's internal module paths change between versions. Common breakage:
metro-config/src/defaults/exclusionList— in newer Metro this moved tometro-config/private/defaults/exclusionListand exports a.defaultinstead of a direct function- Always verify the import works:
node -e "console.log(typeof require('<path>'))"
Step 3 — Update Android
android/build.gradle
buildToolsVersion,compileSdkVersion,targetSdkVersion— match templatekotlinVersion— match templatendkVersion— match template (usually unchanged between minors)
android/gradle/wrapper/gradle-wrapper.properties
- Update Gradle distribution URL to match template
android/gradle.properties
- Remove deprecated flags (e.g.,
android.enableJetifier,FLIPPER_VERSION) - Add new flags (e.g.,
edgeToEdgeEnabled) - Update JVM args if template changed them
android/app/build.gradle
- Update plugin names if changed (e.g.,
kotlin-android→org.jetbrains.kotlin.android) - Remove unused imports (e.g.,
import com.android.build.OutputFile) - Check
autolinkLibrariesWithApp()is present
android/settings.gradle
- Match template structure
- Remove manual project includes for pure-JS libraries (flash-list has no native Android code)
MainApplication.kt
- This changes significantly between major RN versions. Always diff against the template.
- Preserve custom code:
AppPackage()registration andI18nUtil.allowRTL()for RTL support. - Key pattern changes across versions:
- 0.79:
SoLoader.init()+DefaultNewArchitectureEntryPoint.load()+ReactNativeHost - 0.84:
loadReactNative(this)+getDefaultReactHost()with lazy delegate (no ReactNativeHost)
- 0.79:
Step 4 — Update iOS
ios/Podfile
- Match template structure
- Remove deprecated env vars (e.g.,
ENV['RCT_NEW_ARCH_ENABLED']when new arch is the default) - Remove deprecated helper calls (e.g.,
get_default_flags()) - Keep project-specific customizations (
use_frameworks! :linkage => :staticif needed)
Show full SKILL.md (273 more words)Show less
ios/FlatListPro.xcodeproj/project.pbxproj
- Update
IPHONEOS_DEPLOYMENT_TARGETto match the RN minimum (e.g., 15.1 for RN 0.76+) - Pod install will update header search paths and build settings automatically
ios/FlatListPro/Info.plist
- Add any new required plist keys (e.g.,
RCTNewArchEnabled)
Clean install
cd fixture/react-native
rm -rf node_modules yarn.lock
yarn install
cd ios && rm -rf Pods Podfile.lock && pod install && cd ..Step 5 — Build and Verify
Build the flash-list library first
yarn build # from repo root — compiles src/ → dist/iOS
cd fixture/react-native
xcodebuild -workspace ios/FlatListPro.xcworkspace -scheme FlatListPro \
-configuration Debug -sdk iphonesimulator \
-destination 'platform=iOS Simulator,name=iPhone 16 Pro' buildAndroid
cd fixture/react-native
yarn react-native run-androidWeb
cd fixture/web && yarn install && npx expo export --platform webStep 6 — Run Tests
Unit tests
yarn test # from repo root — 181+ tests must passE2E tests (iOS)
cd fixture/react-native
yarn e2e:build:ios
yarn e2e:test:iosScreenshot reference updates: Visual diff tests (e.g., Carousel orientation) will fail after an RN upgrade because rendering changes slightly. To regenerate references:
- Delete the old reference directory (e.g.,
e2e/artifacts/ios/Carousel_landscape/) - Run the test — it creates a new reference and fails with "no reference present"
- Run again — it passes using the new reference
- Repeat for each failing screenshot (the test stops at the first missing reference per run)
Common Pitfalls
- Metro
exclusionListimport — Metro's internal API paths change between versions. Always verify the import resolves before starting Metro. - Stale Metro on wrong port — Kill ALL Metro instances before testing. Another project's Metro on a different port can cause "version mismatch" errors if the app connects to it.
react-native-reanimatedmajor version — Major bumps (3→4) require Babel plugin changes and may add new peer dependencies (react-native-worklets).- Gradle version jumps — RN upgrades often bump Gradle (e.g., 8.x→9.x). This can break custom Gradle scripts. Check build warnings for deprecations.
IPHONEOS_DEPLOYMENT_TARGET— Must match or exceed the RN minimum. Pod install updates most settings, but the project-level target in pbxproj must be set manually.Info.plistnew keys — Some RN versions require new plist entries (e.g.,RCTNewArchEnabled). Check the template's Info.plist diff.- Legacy arch removal — Starting with RN 0.82+, legacy architecture code is being removed. Ensure all dependencies support new arch.
© Shopify, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/upgrade-react-native of Shopify/flash-list.
Open the folder on GitHubat commit 527d767
Compare with similar skills
Upgrade React Native next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Upgrade React Native this skillShopify/flash-list | 7.2k | — | ~1.9k | Automated safety check: Pass | MIT | |
| Expo Brownfield Integrationmweinbach/agent-coworker | 156 | 2 repos | ~900 | Automated safety check: Notes | Custom licence | |
| Claude Android NinjaDrjacky/claude-android-ninja | 124 | — | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Simulator Audio E2Ehyochan/react-native-nitro-sound | 961 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Android Audio E2Ehyochan/react-native-nitro-sound | 961 | — | ~814 | Automated safety check: Pass | MIT | |
| Moq Kitsoftware-mansion-labs/skills | 291 | — | ~5k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Claude Android Ninja
Drjacky/claude-android-ninja
Build and migrate Android apps with Kotlin, Jetpack Compose, MVVM, Hilt, Room 3 (KSP, SQLiteDriver, Flow/suspend DAOs), Navigation3, and multi-module Gradle.
Simulator Audio E2E
hyochan/react-native-nitro-sound
Build and run repeatable react-native-nitro-sound recorder/player regression tests on an iOS Simulator or Android emulator, with explicit virtual-device selection, microphone permission, Maestro…
Android Audio E2E
hyochan/react-native-nitro-sound
Build and run device-backed Android end-to-end checks for react-native-nitro-sound permissions, recording, playback, listeners, pause/resume, seek, speed, audio focus, lifecycle behavior, and rapid…
Moq Kit
software-mansion-labs/skills
Software Mansion's moq-kit — native Swift (iOS) and Kotlin (Android) SDKs for Media over QUIC (moq-lite) live streaming: sub-second-latency playback, camera/microphone/screen publishing, and…
- Official
Expo Brownfield
expo/skills
Integrate Expo and React Native into an existing native iOS or Android app.
More from Shopify/flash-list
- Official
Agent Device
Shopify/flash-list
Interact with iOS simulator or Android emulator/device using snapshot-based coordinates.
- Official
Analyze Feedback
Shopify/flash-list
Analyze agent feedback artifacts from GitHub Actions workflow runs, extract actionable learnings, and incorporate them into skill files and CLAUDE.md.
- Official
Fix GitHub Issue
Shopify/flash-list
Full workflow for fixing a GitHub issue - understand the problem, reproduce, diagnose root cause, fix, test on iOS/Android simulators, review, and raise a PR
- Official
Raise PR
Shopify/flash-list
Create a GitHub PR for FlashList. An agent skill from Shopify/flash-list.
- Official
Review And Test
Shopify/flash-list
Review a FlashList PR or branch, run unit tests, test on iOS simulator, and verify RTL/LTR behavior.
- Official
Triage Issue
Shopify/flash-list
Triage a GitHub issue — classify priority (P0/P1/P2), search for duplicates, and apply labels.
Related
Categories
Questions about Upgrade React Native
What does Upgrade React Native do?
Upgrade the React Native fixture app to a new version. An agent skill from Shopify/flash-list. Upgrade React Native is an agent skill from Shopify/flash-list, published by the product's own GitHub organization. Upgrade the React Native fixture app to a new version.
When should I use Upgrade React Native?
Upgrade React Native fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve Android development.
How do I install Upgrade React Native in Claude Code?
Run `npx skills add Shopify/flash-list --skill upgrade-react-native -a claude-code`. Or copy the skill folder (.claude/skills/upgrade-react-native in Shopify/flash-list) into .claude/skills/upgrade-react-native in your project. Claude Code loads it when a task matches its description.
How do I install Upgrade React Native in Codex?
Run `npx skills add Shopify/flash-list --skill upgrade-react-native -a codex`. Or copy the skill folder (.claude/skills/upgrade-react-native in Shopify/flash-list) into .agents/skills/upgrade-react-native in your project. Codex loads it when a task matches its description.
Can I use Upgrade React Native in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Shopify/flash-list --skill upgrade-react-native -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/upgrade-react-native, .gemini/skills/upgrade-react-native, .github/skills/upgrade-react-native and .opencode/skills/upgrade-react-native in your project.
What does Upgrade React Native need to run?
Going by SKILL.md and its folder, Upgrade React Native needs the command-line tools its instructions call (yarn, npm, xcodebuild, npx and node). Our summary lists: Node.js.
Does Upgrade React Native access the network?
SKILL.md names 2 domains. In commands or code: raw.githubusercontent.com; the agent is likely to contact it when it follows the instructions. As links in the text: docs.swmansion.com. This is read from the text; nothing was executed.
Is Upgrade React Native safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Upgrade React Native use?
Upgrade React Native is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Upgrade React Native use?
About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Upgrade React Native?
Skills that share tags, products or a category with Upgrade React Native: Expo Brownfield Integration (mweinbach/agent-coworker, 156 stars), Claude Android Ninja (Drjacky/claude-android-ninja, 124 stars), Simulator Audio E2E (hyochan/react-native-nitro-sound, 961 stars) and Android Audio E2E (hyochan/react-native-nitro-sound, 961 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Upgrade React Native?
Shopify (a GitHub organization, an official publisher) maintains it in Shopify/flash-list, which has 7,245 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 1, 2026.
Source: Shopify/flash-list on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.