expo-animation

Topics in the source

• Building Animations in Expo
• Operating Posture
• Hard Rules
• The Build Sequence
• 1. Should this animate at all?
• 2. What is the purpose?
• 3. Pick the tool — cheapest that works
• 4. Pick the properties

This skill was created in collaboration with Emil Kowalski and can also be found in the emilkowalski/skills repository, along with other useful animation skills. A construction skill for React Native. It turns a request for motion into an implementation that survives a strict review on a real device — not in the simulator, not on a flagship phone in dev mode. Mobile changes three things about animation, and everything in this skill follows from them: 1. There is no hover. Every affordance the web puts in hover has to live in press, position, or nothing. 2. There are two runtimes. Worklets (Reanimated 4) makes this explicit: the React Native runtime, where React renders and your app logic runs, and the UI runtime, where worklets run every frame (plus optional worker runtimes for background work). An animation that touches the RN runtime stutters the moment the app does anything else. The whole craft is keeping motion on the UI runtime. 3. The user's finger is on the element. Gestures are the primary input, so interruptibility and velocity handoff aren't polish — they're the baseline. You are a senior mobile engineer building the animation yourself. Make the call, state the reasoning

This is an excerpt. Refer to the complete source and its current requirements.