ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Advanced 3D Carousel Animation in React Native using FlatList & Animated API
ฝัง
- เผยแพร่เมื่อ 5 ม.ค. 2021
- 🔥 In this video tutorial we will create an advanced 3D carousel in React Native, using FlatList and Animated API from React Native.
We'll go through:
- How to create the UI
- How to create the horizontal carousel using FlatList
- How to use perspective to create the 3D effects
- How to animate the text based on active index or active slide of the FlatList
- How to get or calculate the active index of the FlatList using onMomentumScrollEnd
- How to call imperative methods on FlatList (scrollToOffset)
- How to create a navigation system for the FlatList carousel
----
⚠️ Access full source code: www.animatereactnative.com/po...
----
Starter code: gist.github.com/catalinmiron/...
👉👉 Have any questions? Join Discord: / discord .
Inspiration: dribbble.com/shots/3147975-Pr...
Want to support me?
- Patreon: / catalinmiron
- BuyMeACoffee: www.buymeacoffee.com/catalinm...
- Paypal: paypal.me/catalinmiron
----
You can find me on:
- Github: github.com/catalinmiron
- Twitter: / mironcatalin
- Website: batman.codes
---
Timeline:
TBD
#react-native-3d-carousel #react-native-advanced-flatlist #react-native-animation #react-native-animated-api #react-native-onscrolltooffset #react-native-flatlist #react-native-flatlist-navigation #react-native-advanced-animations
![[TH] GEN vs SEN | FPX vs TH - VALORANT Champions 2024 DAY 1](http://i.ytimg.com/vi/VcyH-0LAlhs/mqdefault.jpg)
I got the job! Your videos help me a lot thanks
Wow, this is amazing and congrats Oguzhan 👌 Great news for 2021!
Started following your tutorials last week.! They are a gem! The best tutor out here for RN.
Thank you so much Francis! I’m glad that you found my channel and you like my videos ✌️
I really like that you explain your code, keep it up!
Another nice tutorial! Thanks for that content and I look forward to the next one.. Happy new year man! 👊
Thanks a lot, I’m glad that you like it! Happy New Year and I’m wishing you all the best Luis✌️
Happy New Year, Catalin ~! You bring the sense of art into React Native. haha
Wow, thank you Farrukh. Happy New Year ✌️
It's impressive that you figure out how to make this :)
Thank you Pim! ✌️
awesome video way more useful than courses, thank you :D
Fantastic as usual
Thank you so much and I’m glad that you like it. Thanks Muhammad ✌️
Happy new year. This one is beautiful ❤️
I’m glad that you like it. Happy New Year Akshat ✌️
Thanks.
Great job.
I am waiting for next and previous button work after commenting on some previous videos
I’ve recorded it right after you mentioned! Cheers Muhammed ✌️
Thanks, Catalin for this nice tutorial. Probably u forgot to update the index when u click on the next and previous button.
I have run out of words .. Beautifully Awesome 😍😅 .. Thank you 😁
Uuu, thanks a lot Sujata ✌️
you are doing that good videos so im liking them without watching anymore :D
Thank you so much Bayram ✌️
happy new year to you too 🥳
Happy New Year Gorhom 🥂
Awesome! Your videos help me a lot! It would be great some videos with react-native-reanimated 1 or 2. Thanks!
Thank you! I’ll start doing Reanimated2 videos in the near future, I want to cover more using Animated API. Cheers Camilo ✌️
Awesome tutorial, Catalin! Is there a way to prevent swiping to a previous or next item until a certain prop is passed, without disabling scroll on whole list?
loved it catalin
I’m glad you liked it. Thanks Vipin ✌️
Happy new year mate, you are magicien React Native animation.
Wow, thanks a lot and Happy New Year Moez! ✌️
@@CatalinMironDev what is the font that you are using in VS Code ?
@@moezzineb6363 vscode theme: Palenight, font family: Operator Mono ✌️
@@CatalinMironDev Thank your so much !
Tks bro
Awesome
Thanks Amit! ✌️
Nice! i would like to learn how to create a multi steps form with react native, that would help me a lot! and happy new year!
Great suggestion! Thanks Mateo and Happy New Year!
Nice Tute. You Rock. only on Android i have to set next index manually on press like below:
{
ref?.current?.scrollToOffset({
offset: (currentIndex + 1) * width,
animated: true
})
setCurrentIndex(currentIndex + 1)
}}>
Awesome, Happy new year to u too 🥳
Any news about your Reanmated 2 Course? 🧐
I’m working on it, I had to take a break to rest a bit. Cheers Anas ✌️
god damn niceee
Thanks and I'm glad you like it! Thanks Mohammad! ✌️
Fantástico
Wow, thank you Helton ✌️
Awesome video as usual. But it seems that "onMomentumScrollEnd" is not working on android. Is there any way to make it work?
I am waiting for your video
This came after a short break! Thanks Praveen ✌️
rotateY does not work but when try only rotate it works fin any help???
Nice sorry back again still have not gotten the music title the second background music title please what the name
Please tell me at what minute you’d like to know the song name? Thanks ✌️
1:10 tnx thats it
Hello still waiting for your response
@@kymzTech Sorry for my late response, the song is "Empire Seasons - Dan Henig" th-cam.com/video/nEtpU-7BDLM/w-d-xo.html
@@CatalinMironDev tnx
It's impressive that you figure out how to make this :-D
It was a fun mini project. Thank you Shiro ✌️
Can this tutorial implementation in react native cli?
@@k.a6 yes, everything should work the same in both expo and RN cli projects. In case something is not working I’ll mention it in my video. But I’m using primitives that are the same on both “platforms”
Thanks 😁