React Native Reanimated

React Native's Animated library reimplemented. More info

Articles & Tutorials

Drag Callbacks with Reanimated in React Native (codeburst.io)
Aug 03, 2018
Reanimated is purely declarative and native. In order to communicate back you need to use call which is a declared method that you provide a list of animated values and a JavaScript function.
  • Jason Brown

Video Guides & Talks

Fluid Body Animation (youtube.com)
Sep 15, 2020
Fluid body animation using Bézier Curves and Reanimated 2.
Advanced React Native Animated FlatList Picker - Synchronised FlatLists (youtube.com)
Aug 19, 2020
In this tutorial I'm going to teach you how to synchronise two different FlatList and how to create a picker animation in React Native. This is a performant react native FlatList animation that will work on both iOS and Android at 60fps and there's no need for a Masked View to create this type of animation.
  • Catalin Miron
Measures with Reanimated 2 (youtube.com)
Aug 18, 2020
In this video, we are looking a making animations via the dbrand.com color selection.
React Native Charts with Reanimated 2 (youtube.com)
Jul 28, 2020
In this video, we are building an interactive Graph with Reanimated 2.
iOS-Style Picker with React Native (youtube.com)
Jul 21, 2020
In this video, we are building the iOS-Style Picker with React Native Gesture Handler and Reanimated.
Easy React Native Accordion Menu with Reanimated Transition API (youtube.com)
Jul 17, 2020
In this video tutorial we'll learn how to create an accordion animation in React Native using Transition API from React Native Reanimated library and flexbox styling without the need of layout measurements, just pure flexbox and Transition API from react native reanimated library.
  • Catalin Miron
Talking Reanimated 2 with Krzysztof Magiera (youtube.com)
Jul 07, 2020
In this video, we are talking with Krzysztof Magiera, director of engineering at Software Mansion, co-created of React Native Android and creator of Gesture Handler and Reanimated. Hope that you enjoy the discussion.
Ripple Effect with React Native (youtube.com)
Jun 30, 2020
In this video, we are building the Android Ripple Effect with React Native Gesture Handler and Reanimated
Reanimated 2 Transitions (youtube.com)
Jun 09, 2020
In this video, we look at transitions with Reanimated 2.
The 5-min Reanimated Worklet (youtube.com)
Jun 02, 2020
In this video, we get to know animation worklets from Reanimated 2.
React Native Pinch Gesture (youtube.com)
Apr 09, 2020
In this clip, we build a simple circular gesture using React Native Gesture Handler and Reanimated.
Airbnb Header Animation | React Native | Reanimated (youtube.com)
Aug 13, 2019
You'll learn how to create the header animation similar to the Airbnb App.
  • Varun Nath
Drag and Drop List in React Native with Reanimated and RecyclerListView (youtube.com)
Jul 30, 2019
I talk about the drag and drop list I created with Reanimated and RecyclerListView.
The 5 minutes React Native Tap Gesture (youtube.com)
Jul 29, 2019
In this video, we make some fancy tap gesture animation with React Native Reanimated and Gesture Handler.
The 5 minutes React Native Animation Loop (youtube.com)
Jul 23, 2019
In this video, we make some loop animations in React Native using Reanimated.

Podcast Episodes

Reanimated, React Native Screens & More feat. Krzysztof Magiera of Software Mansion (devchat.tv)
Oct 17, 2018
In today’s episode of the React Native Radio podcast, Nader Dabit, Peter Piekarczyk and Mike Grabowski speak with Krzysztof Magiera. Krzysztof talks about his recent libraries on Native Driver, Gesture Handler, Reanimated, React Native Screens. The panel and Krzysztof dive deep into Gesture Handler and give insight on the best use cases. This is a great episode to learn about Krzysztof and his most current company and projects.

Libraries

react-native-reanimated (github.com)954
v1.2.0
Aug 07, 2019
React Native's Animated library reimplemented
  • Krzysztof Magiera
  • Michał Osadnik