Index of every page on this site: llms.txt
All skills
tristanmanchester avatar

/animating-react-native-expo

@3323bc9
by Tristan Manchestertristanmanchester/agent-skills3 stars
2
Run it yourself

Implement and debug React Native or Expo motion with Reanimated 4 and Gesture Handler 3: state transitions, layout, gestures, scroll, worklets, cancellation, and accessible alternatives. Use for native UI motion, not web Motion or a reason to add canvas graphics to ordinary views.

Use this Skill: https://skilld.dev/gh/tristanmanchester/agent-skills/animating-react-native-expo

Nothing lands on disk. Nothing to clean up.

Fork this Skill

Edit a local copy. It keeps the author and licence.

referencessetup-and-compat.md

≈535 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Setup and compatibility

Read the app's lockfile, Expo SDK, React Native version, architecture, and native build configuration first. Resolve exact Reanimated/Worklets compatibility from upstream tables and the installed package's compatibility.json: minor-version tables assume the latest patch, which can differ from the app's actual patch.

For an authorised current Expo installation:

npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler

This chooses packages for that SDK, not necessarily the newest versions. Verify that Gesture Handler resolves to the API generation used in the implementation. Do not copy RNGH 3 hooks into a v2 binary or force a mismatched dependency just to make imports resolve. A supported stack upgrade includes the native build.

Current Expo's babel-preset-expo configures the worklets integration; inspect existing configuration before adding another plugin. Bare Reanimated 4 uses react-native-worklets/plugin, ordered as upstream requires. Do not call redundant or mixed plugins harmless. Rebuild the development client/native app after native package changes; clearing Metro cache cannot repair a binary/JS version mismatch.

Reanimated 4 requires New Architecture. Reanimated 3 is not actively maintained and cannot simply be combined with react-native-worklets. This skill does not ship a legacy path; select an explicit compatible project strategy.

Inspect GestureHandlerRootView around the real native root, including Android modal roots as required. Keep flex/layout sizing correct. Relations must share the appropriate gesture root. Do not add redundant roots mechanically or confuse a root view with the v3 hook/builder interoperability boundary.

Use Hermes-compatible inspector tooling. A package-tree read, TypeScript build, Jest mock, and a successful native interaction are distinct checks.

Reviewed 2026-09-13:

Source: SKILL.md on GitHub

Skill behaviors

No rule matched.

skilld matched fixed text patterns in SKILL.md and file names. Patterns miss obfuscated code.

skilld run checks every file with the same patterns. It asks for approval before it loads a Skill with a behavior marked Needs approval.

Third-party checks

1 warning1mo5 checks · Risk SAFE
  • Gen Agent Trust Hub1mo

    This skill provides documentation, code examples, and a diagnostic script for implementing animations in React Native (Expo) apps using Reanimated v4 and Gesture Handler. No malicious patterns or security risks were detected.

  • Socket1mo

    No alerts

  • Snyk1mo

    Risk: LOW · No issues

  • Runlayer8mo

    9/9 files flagged

  • ZeroLeaks6mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 3323bc9. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 weeks ago.

Steadyupdated last month

Capability

metadata
{
  "version": "2.0.0",
  "reviewed": "2026-09-13"
}
Other metadata
compatibility
Requires a compatible React Native New Architecture, Reanimated 4, Worklets, and Gesture Handler 3 stack. Resolve versions through the app's Expo SDK or upstream compatibility tables; native verification needs a device or simulator build.

README badge

README badge for tristanmanchester/agent-skills/animating-react-native-expo