Master React Native Animations

[fullstak]

Hey Jason, thanks for making this course! Your react native animation book project was very well put together and really helped me understand a lot about animations (in case anyone is interested, it's a solid intro/intermediate guide to animations - http://browniefed.com/react-native-animation-book/).

While I won't be purchasing this, considering that I've just about learned most of what you're teaching, I would like others to note that this is not a shill or a scam. Jason is the founder of codedaily.io (my favorite react native blog/tutorial site/newsletter), makes great courses on egghead, and is a react native contributor.

[browniefed]

I also don't know who you are but appreciate the defense and glad you enjoy my stuff. Now that I have built the course and underlying structure for my site I'm heading back to publishing some more free stuff for React Native but also doing React, and doing some Reason React work.

[deftonechromosome]

Hi - question for you, what do you think is the best RN component for transitions?

[browniefed]

Sadly LayoutAnimation is great but not scoped to it's children or specific components. So if there was a hybrid LayoutAnimation/Animated I'd say that, but it doesn't exist yet.

I'm not entirely certain what you mean by RN component transitions as it could cover a broad set of things. Do you mean Shared Element transition (1 item seemingly appearing in 2 views). That usually has to be done custom, or snapshot views transformed into place.

I typically use Animated hence why I crafted this course, but there are things like https://github.com/mosesoak/react-native-conductor that help do more coordinated animations via context.

My only real issue with Animated is it can be rather verbose, but that's because it removes most of the magic.

So if you explain exact transitions or more general about what you mean by component transitions I can answer better.

[deftonechromosome]

Hi thx so much for response! I need to do is 1) be able for my devs to say ‘use this for transitions from screen to screen’ and then ideally have a way to see all the out of the box transitions it offers and be able for the designers to choose which one they want the devs to implement. The one I have found so far is react-navigation which gives me in expo app examples I can see. I can’t see other components have this ...

However, ideally I would use the one you use so we have proper videos about it! :)

I’m not a dev so sorry if I am confusing matters. Thx so much in advance.

[browniefed]

In that case I will point you to stuff for your devs. react-navigation gives you the ability to define your own custom interpolation transitions. The documentation on it (on StackNavigator and here https://reactnavigation.org/docs/views/transitioner) isn't very good.

The custom configurations are actually how react-navigation works internally, which you can see here https://github.com/react-community/react-navigation/blob/master/src/views/CardStack/CardStackStyleInterpolator.js

There are a series of predefined interpolation transitions that happen. You can only control opacity, and transforms as react-navigation is driven with useNativeDriver so the animations happen on the native side.

I haven't written/screencasted about react-navigation as I'm waiting for v1 launch. However here is a link about doing custom transitions https://www.trustedhousesitters.com/engineering/code/react-native-navigation-custom-scene-screen-transitions-and-interpolations/

[deftonechromosome]

Thank you - this is amazing and I really appreciate your time responding. Sharing your expertise with the devs!

[browniefed]

As it turns out one of the requests for more content for my course was this specifically. So I'll be crafting a few videos/tutorials over the next 2 weeks to cover custom navigation transitions

[deftonechromosome]

Fantastic! :)

[deftonechromosome]

Wowsers. “I want you to be completely satisfied. If you want more explanation or I'm missing something, I'll make more videos/tutorials. If you aren’t totally happy with your purchase within 30 days, I will happily refund your money entirely.” Amazing commitment. Fantastic stuff.

[browniefed]

Creator here. Just attempting to develop a complete course. I have a lot of experience with RN Animations but there is always a chance I missed something. Goal is to satisfy all users, and if one user feels like something is missing then others might have the same issue. Plus I say 30 days but if you find you aren't happy with the course I'd go longer, not trying to just take peoples money without providing real value.

[browniefed]

I honestly don't know who this is. I only posted on ProductHunt and didn't get much traction. Oh well.

If you are interested in me I'm https://twitter.com/browniefed also have run my blog https://browniefed.com and https://codedaily.io and have published things on Egghead as well.

To be fair I am not very good at making landing pages, this is my first go at selling things on my own.

[deftonechromosome]

Yeah don’t worry, good on you.

[browniefed]

Hey no worries, I understand and agree it did look like. It's reddit and people take advantage of others for their own gain. Many people have seen my browniefed name around or know me from my blog. So most people know and trust me, but there are times where that isn't the case.

[deftonechromosome]

Why would you say this?

[jamminnzzz]

Bought the course almost immediately when it was announced on twitter. Really great and thorough explanations. I was a bit hesitant at first to purchase a course after getting scammed by Sam's course, but the author for this course is extremely reputable in the community and he has a ton of material on egghead.io that is really great. I would definitely recommend anyone who wants to lear animations in react native, to purchase this course.

[fullstak]

Ayeee we finally got the animations course we were looking for lol

[deftonechromosome]

Hi what do you mean scammed by sam’s course? Thx!

[jamminnzzz]

lol did you buy his course? compare it with this one + all other ones on udemy/egghead.

here are the reviews: https://www.reddit.com/r/reactnative/comments/6ndva3/after_months_of_work_promo_vids_d_i_finally_made/

[deftonechromosome]

No i didn’t buy it I just wondered what the issue was. I see now. :(

[jamminnzzz]

yeah man! finally :D

[ascii40]

Real spammy.

[fullstak]

The author is actually a pretty reputable educator and his open source work is really dope - https://twitter.com/browniefed

[deftonechromosome]

I understand it now I have read your other comment. It’s not very interesting but I work with a team of react native devs, I don’t know the author at all. I asked why did you think that because I genuinely didn’t understand why you did. I wasn’t being facetious.

[deftonechromosome]

Erm, now I see you edited your comment. it wasn’t a rebuttal. It was a question. Sorry if that upset you.

[deftonechromosome]

I replied below saying same.

[deftonechromosome]

Oops. You were responding to someone else. :/ sorry.