Advanced React Native FlatList animations at 60fps with Animated API

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=yV-2HRzNX9o

I decided to make another advanced FlatList #ReactNative animation video tutorial this time. This is an animated carousel/animated slider with lots of animations going on. • In this video tutorial we'll learn how to create: • use the snapToInterval prop • how to display a portion from the prev and next item • how to align the active slide in the middle • how to use MaskedView • Built using @expo, vanilla React Native Animated API and FlatList. • This code works in plain React Native project as well since we are using only React Native APIs such as Animated and FlatList. • Inspiration: https://dribbble.com/shots/8257559-Mo... • GitHub: https://github.com/catalinmiron/react... • 👉👉👉 More react native animations: https://www.animatereactnative.com/ 👈👈👈 • -- • Expo: https://expo.io/ • TMDB: https://www.themoviedb.org/ • • ---- • 👉Join Discord: / discord . • Want to support me? • Patreon: / catalinmiron • BuyMeACoffee: https://www.buymeacoffee.com/catalinm... • Paypal: https://paypal.me/catalinmiron • ---- • • You can find me on: • • Github: http://github.com/catalinmiron • Twitter: / mironcatalin • Website: http://batman.codes • Timeline: • 00:00 Intro • 01:15 Project presentation • 04:09 snapToInterval / decelerationRate • 05:07 animate FlatList items • 07:30 how to display the item in the middle snapToInterval • 09:45 fix FlatList item animation • 10:33 Create the backdrop • 12:45 Backdrop FlatList • 14:15 LinearGradient to fade the Backdrop • 16:20 Animate Svg to create the parallax effect • 18:53 60fps demonstration • 19:26 Final words • #reactnative #animations #expo #tmdb

#############################

New on site