React Native FlatList Animations

[kimbrandwijk]

Just wanted to hop back in and say thanks. I was just watching this video the other week, and today, I ran into a situation where I had to add a static element to my scrollview and I suddenly remembered your neat little trick of 'cancelling out' the translation during scroll. Worked like a charm, in less than a minute. Absolute lifesaver trick I would never, ever have come up with if it wasn't for your video. Keep 'm coming!

[PVideos]

Please do more of these tutorials with the animated api.

[whowhatwhyhow]

The content on this channel is pure gold!!
The only thing though is that you don't give a clear explanation on why every decision was made and what each value actually means.

But then it's not on you to explain every concept, that's were being an autodidact comes handy.

Either way, love the content

[tamishkhurana]

Just wow, you motivated me more for animations after this, thanks🙏

[wolfromkev]

If anyone is following along to add this to their own project, a good way to get the exact height of your element is to use the onLayout props, which will automatically calculate the height of your component.

const [itemHeight, setItemHeight] = useState(0);

const onLayout = (e) => {

};

<View onLayout={onLayout}>
...content
</View>

[yaltharullist]

I already fell in love with your accent

[waroulolz]

Line 35 should be "outputRange: [0, -index * (CARD_HEIGHT + 2 * MARGIN)]" right ? With a bigger list, margins add up and you would see cards disappearing before hitting the top of the screen

[christianparra]

Great as always! back to the basics, will be great something like this with the "hide/show header on scroll" on android is kinda tricky and almost all examples are outdated

[DUO_QUEST]

so jhonny sins is also a developer i am impressed

[mrst]

Looks awesome, thanks for your example!

[_maksime]

Really interesting as usual ! Congrats

[droidmakk]

It's the end of June 2020 already and I'm all gearing up for React Native animations and transitions 😇

[lucaslaurens]

Really cool and fun to watch video. It's a great animation to copy. Thank you !!

[Jorsfel]

Excellent tutorial, thank you! Also love your accent haha, you sound more French than Swiss to me but I'm Australian so am hardly qualified to tell the difference. :p

[rein]

You are insane. Please more with Animated api

[guillaumeRean]

Great great great :D
I'm going to implement that immediatly (in left to right..) !! But do you think it can work with the snapToInterval prop of the scrollview ?

[fam]

hello Sir. There is one problem with animations. if I have a list of dynamic items it depends on paggination, then the animation is not good.Initially it's working fine but after some item it somewhat lower than the top. experience some blank space on the top of the screen.

[akhiljain]

Can you update and explain the same animation for a two column flat list ?

[codigosimple]

you don't provide starter files to follow through the tutorial so in my case I couldn't follow through, I tried to run your source code but is filled with errors in my text editor and versioning problems

[excalibur]

Its perfect. Atleast not that complicated as like your other videos :) ... btw, do you planning to make this instagram textbox background effect in direct messages that i sent to you ? is it possible in react native?