animation-with-worklets

Name: animation-with-worklets
Availability: InStock
Author: Sovran

Schedule cross-thread function execution in React Native using Worklets.

23|2|Updated Dec 5, 2024

Search Tags:#animation #react-native #worklets #scheduleOnRN #scheduleOnUI #cross-thread #animated-reaction

Ready to run

npx skills add https://github.com/SovranBitcoin/Sovran --skill animation-with-worklets-sovranbitcoin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: animation-with-worklets
Source: https://github.com/SovranBitcoin/Sovran/tree/main/.agents/skills/animation-with-worklets
Command: npx skills add https://github.com/SovranBitcoin/Sovran --skill animation-with-worklets-sovranbitcoin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridges the gap between JavaScript and UI threads by providing guidelines for using React Native Worklets, preventing unnecessary directive usage, and ensuring predictable cross-thread scheduling for animations and gestures.

Core Features & Use Cases

Clear rules for when to apply scheduleOnRN and scheduleOnUI in animations, gestures, and shared-value updates.
Best practices to define functions outside render with useCallback and pass references rather than inline callbacks.
Practical patterns for cross-thread communication in React Native apps.

Quick Start

Follow these guidelines to schedule cross-thread worklets in React Native animations.

Frequently Asked Questions about animation-with-worklets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I schedule cross-thread worklet execution in React Native animations?▼

To schedule cross-thread worklet execution in React Native, use scheduleOnUI for UI thread tasks and scheduleOnRN for JS thread tasks, ensuring deterministic updates for animations and gestures without unnecessary worklet directives.

When should I use scheduleOnUI versus scheduleOnRN in React Native?▼

Use scheduleOnUI for UI thread animations and gesture updates, and scheduleOnRN for JavaScript thread logic. This separation ensures safe cross-thread communication and predictable shared-value updates in React Native.

Do I need the worklet directive on every function in React Native?▼

No, you should avoid unnecessary worklet directives in React Native. Instead, define functions outside the render using useCallback and pass references rather than inline callbacks to ensure proper cross-thread scheduling.

How do I use useAnimatedReaction with cross-thread worklets safely?▼

To use useAnimatedReaction with cross-thread worklets safely, follow specified API patterns for shared-value updates and coordinate JS and UI threads using scheduleOnUI and scheduleOnRN for deterministic gesture handler responses.

What is the best way to handle cross-thread communication in React Native gestures?▼

The best way to handle cross-thread communication in React Native gestures is using worklets to coordinate JS and UI threads, applying scheduleOnUI for gesture updates and defining callbacks with useCallback to prevent unnecessary directive usage.

Why are my React Native worklet updates unpredictable across threads?▼

Worklet updates become unpredictable when inline callbacks or unnecessary directives are used. Define functions outside render with useCallback, pass references, and use scheduleOnRN or scheduleOnUI to ensure correct cross-thread communication.