React-native-reanimated: Is there any documentation?

[spyshower]

I am aware of the existing site but let's be serious, that's not documentation.

Are there any real resources?

[likern]

If you want to grasp some material the best resource I could find is this animation course https://start-react-native.dev

[Natteke]

This is the first library in RN that piss me off so much with it's documentation, that i really think to pay for that course :DD

And this is not funny actually.

One of the best libs in performance that is so crushial for RN, but withc such a uncommon API and almost without documentation...

I sitting with it already 3rd day, and every day there are more and more unanswered questions.

I event think that this comment is symbolizes my despair...

I think that the set of examples from easy to hard could help with learning curve.
(BTW I didn’t even manage to run the project with examples, metro crashes on some js module, xcode runs native modules fine...)

[sgrishanin]

Thanks god, I thought I was the only person here who feels dumb and lost after reading the docs. The documentation is just ridiculous because it throws some random pieces of information at you without much context (even as an API reference it's soo dry). The example code is also pretty inconsistent and redundant imo.
This is such an important library yet for some reason nobody cares to explain how to use it. Take a look at React Navigation, for example, to get a perspective on how to create good documentation, please.

[terrysahaidak]

Hi there. Unfortunately, Reanimated really has pretty odd documentation, but those concepts used in Reanimated isn't really easy to explain through some readings. That's because all of you are seeking not for the documentation but for some guides on how to use all of these primitives.

I recommend take a loot at that course which explained in depth the basics of Reanimated and animations in RN:
start-react-native.dev

But also the author of that course made lots of free YouTube videos explaining some of the concepts and patterns widely used in different mobile applications:
https://www.youtube.com/user/wcandill/videos

Those are the best resources to learn from.

[Sargnec]

Not a documentation but this guide can help a little bit

[aminify]

This is an amazing getting-started guide by the author and specially the first two parts are really good to understand how to use this library correctly.
It would be good if the link could be included on the readme of the repo.

[AndrewMorsillo]

Thanks for all the helpful links! I found this one useful as well https://engineering.shopify.com/blogs/engineering/building-arrives-confetti-in-react-native-with-reanimated

Reanimated looks super powerful but I'm having quite a difficult time figuring out how to use it properly. I'm evaluating it because I've run into a situation where the vanilla Animated API is stuttering due to JS work and I have no good way to get around that.

Here are a couple docs related improvement suggestions based on my difficulties understanding the API so far:

1. While there are some examples I'm finding that most of them don't map well to real world apps making them hard to apply. Some examples with more real-world context around them would be useful.
2. More explanation of core concepts is needed. I'm still unclear about how/why animation code gets run and what exactly is the role of clocks.
3. More clarification around the "Backward compatible API", it appears to differ in quite significant ways and seems more of a "similar API" than backward compatible.
4. A list of common patterns with examples such as
5. How to reuse animation code
6. How to compose animations
7. How to clean up after animations
8. How to build the equivalent of Animated API builtins (stagger, delay, parallel, etc)

[aminify]

Thank you for the link you referred @AndrewMorsillo
Actually something really weird happened for this link to me. I have an android phone and tried to open it in google go app to get it read the text for me and then when I switched to chrome I realized that there was no code snippet embeded in between texts which I have no clue about the reason!?
It might not be proper to discuss such a problem here but do you know why this would have happened? Which version did you see when you were reading it?

[terrysahaidak]

More explanation of core concepts is needed. I'm still unclear about how/why animation code gets run and what exactly is the role of clocks.

Clocks are clocks. They are just timestamps of the current frame. Think of them as just Date.now(). Knowing the previous frame time and this frame time allows you to calculate the next value.

In the Web, we have requestAnimationFrame. The callback accepts the timestamp of the frame – it's the same thing.

You can learn more here:
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Also, here is ported Reanimated timing function to web:
https://codepen.io/tasssik/pen/XWmRrBP?editors=0110

[kmagiera]

We recently launched new documentation website that I think is much better in terms of providing a helpful resources. However, the documentation covers only reanimated 2, whereas reanimated 1 docs are only moved to the new doc website but not upgraded as far as the content goes. There are many useful resources and I'd be happy to merge changes that adds sopme useful links to the documentation. Atm we do not plan to work on expanding reanimated 1 docs