All skills
tristanmanchester avatar

/animating-react-native-expo

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

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.

SKILL.md

≈78 tokens for metadata: the name and description. ≈1.2k when used: this file. ≈4.2k more on demand in 7 files.

Description uses 3.9% of example budget

Before choosing a Skill, your Agent reads its name and description. All available Skills share that space.

  • A shorter description leaves more room for other Skills. This entry exceeds our 1% size suggestion.

In our Claude Code example, all Skill names and descriptions share 8,000 characters. This Skill uses ≈311 characters, or 3.9%.

The 1% threshold is a size suggestion. Longer descriptions can still fit.

Your model, settings, and other Skills decide how much text your Agent can read.

Example settings and source

The example uses a 200k-token context and default Claude Code settings. The count includes the name, description, separators, and when_to_use when present. Codex also counts local file paths.

Skit's source and limits: Codex 0.160.1, Claude Code 2.1.292.

React Native motion

Choose by the driver: state changes use CSS transitions, mount/reflow uses layout animations, and gestures/scroll/physics use shared values and worklets. Keep business state in React/application state and per-frame values out of React renders. Do not impose animation on an interaction that works better without it.

Inspect the actual stack

Read package and lockfiles, native architecture/configuration, and relevant components before installing anything. Use the package manager's dependency-tree command and the current compatibility guide. A declared package is not proof that its native binary or Babel plugin matches.

This skill targets Reanimated 4 and RNGH 3. If the app is not on that stack, choose a deliberate supported upgrade or stay within its installed API; do not mix API generations or add compatibility wrappers. For Expo, use its SDK-specific install resolution rather than independently upgrading every native package to latest. See setup. The old string-matching setup checker is removed; use actual dependency/build evidence instead of an 'OK' printout.

Implement one complete interaction

Define initial, active, completed, cancelled, interrupted, disabled, and reduced- motion states. Include layout bounds, orientation/size changes, multiple touches, and navigation/unmount. Choose a clear target state rather than toggling by whether an in-flight animation value happens to be nonzero.

Gesture Handler 3's onDeactivate receives an event with canceled, not the old second success argument. Perform committed actions only after a successful gesture, and handle cleanup even if activation never happened. A completed animation is not proof of a successful backend mutation. Prevent duplicate submissions while an action is pending and reflect actual failure/recovery in application state.

Keep worklet closures small. Use scheduleOnRN only for a function defined in the React Native runtime, such as navigation or an application callback. Do not pass a function created inside a worklet and assume it belongs to JS. A UI worklet still uses the UI thread: expensive computation can block rendering.

Use gesture contracts for composition and current v3 semantics, and recipes for deliberate starting patterns. Paths under scripts/references/assets belong to the installed skill directory, not the app's own similarly named directories.

Accessible motion and lifecycle

Respect the system reduced-motion policy in timing, spring, layout, and CSS paths. Reanimated's useReducedMotion() reports the startup setting; it is not a live subscription. Where changes must apply while running, use the app's reactive AccessibilityInfo subscription and remove the listener on cleanup. Provide a non-gesture action for drag/swipe operations and preserve labels, focus, disabled state, and hit targets. A visually translated view still needs correct interaction and accessibility geometry.

Stop decorative loops/frame callbacks when unmounted, off-screen, backgrounded, or reduced motion disables them. Reset to a meaningful static state. Do not make accessibility depend on a particular frame rate or the completion of an exit effect.

Verify

Type-check the actual component against the locked stack. Exercise success, cancellation, interruption, repeat activation, pending/error outcomes, reduced motion, screen-reader alternatives, and supported platforms. Profile a release- like build on representative hardware; UI-thread execution is not a 60/120 fps guarantee. Use Hermes-compatible debugging, not JSC Remote JS Debugging.

Report the patch, chosen driver/API, tests actually run, and remaining device checks. Do not use dependency strings or mocked animations as native-runtime proof.

Targeted references

  • Setup: dependency or native build mismatch.
  • Gestures: v3 lifecycle, composition, or hierarchy.
  • Worklets: cross-runtime callbacks.
  • CSS: style transitions/loops.
  • Layout: entering/exiting/reflow.
  • Recipes: adapting an interaction.
  • Performance: measured frame problems.

Sources reviewed 2026-09-13: upstream Reanimated compatibility and reduced motion, RNGH 3 migration, and Expo integration.

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 warning22d5 checks · Risk SAFE
  • Gen Agent Trust Hub22d

    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.

  • Socket22d

    No alerts

  • Snyk22d

    Risk: LOW · No issues

  • Runlayer7mo

    9/9 files flagged

  • ZeroLeaks5mo

    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 yesterday.

Activeupdated 4 weeks ago

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