React Native Shared Element Transition React Navigation V5 - Episode 9
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- 🔥 React Navigation v5 and Shared Element transition in React Native + create a slick carousel animation using React Native Animated API and FlingGesture handler.
This is the 9th video tutorial from a series about react native shared element transition using react navigation v5 and react-navigation-shared-element package and other animation libraries.
In this tutorial we're going to create the navigation system using react navigation v5 and shared-element transition.
I'll teach you
👉 how to use SharedElement component to properly animation or transition between the screen
👉 how to use React Native Animatable in order to create an on-mount animations after transitioning to a different screen.
👉 create a stack style carousel
👉 how to create a reactive animated value
👉 how to do infinite scrolling and fetch new data
👉 how to create a flicker type animation when changing the active slide
👉👉👉 GitHub Source Code access: www.animatereactnative.com/ 👈👈👈
Inspiration: dribbble.com/shots/3731362-Ev...
GitHub: github.com/catalinmiron/react...
Slider implementation video: • Advanced React Native ...
---
Video series:
🎥 Episode 1️⃣ : • React Native Shared El...
🎥 Episode 2️⃣: • React Native Shared El...
🎥 Episode 3️⃣: • React Native Shared El...
🎥 Episode 4️⃣: • React Native Shared El...
🎥 Episode 5️⃣: • React Native Shared El...
🎥 Episode 6️⃣: • React Native Shared El...
🎥 Episode 7️⃣: • React Native Shared El...
🎥 Episode 8️⃣: • React Native Shared El...
🎥 Episode 9️⃣: • React Native Shared El...
---
👉Join Discord: discord.gg/vg7hUDU
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 #react-navigation-v5 #shared-element-transition #react-navigation-shared-element #animated-api #advanced-carousel-animation #react-native-flatlist-parallax-animation
This channel is amazing
Briliant ,big thanks
😊 juste perfect... i love so much ..i can't explain
Thanks Catalin, very useful videos. Could you give animation example of more than 2-screens in stack navigator? and explaining how to pass params
amazing,, subs automaticly
Thanks for these great videos :)
You’re welcome Dileepa, I’m glad you liked them ✌️
Thanks Catalin for these great videos, they are very creative but I have one hope if you can redoing them using React Native Reanimated 2.
Great suggestion! I'm working on Reanimated2 course! Stay tuned for that! Thanks Rafil! ✌️
U r the best!
Always amazing lit
Thanks Mirza, I’m glad you liked it. ✌️
Thank you very much for this tutorial series. Your way of teaching is awesome. I love how you actually explain things. Do you already know what you will do after this series? Could you do more on animations from real world apps like sticky searchbar from instagram or Facebook header (hide on scroll or whatever this effect is called)? I would also love a course on animations "from beginner to expert" or anything like that, because there is not much quality content out there, not even paid. Anyway, I hope you keep up the good work. Thank you very much.
dmm
Hello Dear, I just came across your channel and I wanted to learn animations at this moment so I am very happy
Also can you please make videos on backend connected with react native
Loving you Bro
✌️
I challenge you to make this same animated flatlist with videos instead of pictures!!!
Hi Catalin, can you make bottom sheet, become pull up to fullscreen and pull down to close, thanks
Great tutorial! What is your vs code theme?
Hi Hritik, VSCode theme: Palenight, font: Operator Mono ✌️
Hi, could you please put the link of the previous video that's you are talking about ? Nice job ...
Thanks, check my main channel page, there should be a playlist for all shared element transition videos or all my animations.
I have a problem when add scroll view or flat list in same page
Does this kind of animations works well with both android and ios?
is There any possibility of sharing the initial EventListDetails.js before modification? because I'm following the tuto and i'm stuck! Amazing videos like always btw!
You must not have installed the vector icon package'
Hey ! Your content is really awesome.. You deserve more subs.. I need to ask one thing.. Can we make complex screens like INSTAGRAM STORY CREATION SCREEN... Is it convenient in react native ?
What is an Instagram story creation? Please give me an example, I'm not an Instagram user. Thanks Akshat! ✌️
@@CatalinMironDev that's strange who doesn't use instagram..
story creation screen like snapchat story where we can click picture edit add stickers, texts , draw and all then we can post the resultant image
@@AkshatKumawat Unfortunately I'm not a Snapchat user either. I think that I know what you're talking about.
amazing video. thanks a lot!
My shared element transition in android is not smooth. In iOs it works perfectly. any idea why?
What problems do you encounter exactly? Thanks Rayaa✌️
if you using react native cli. You need updating file MainActivity.java. You can following docs docs.swmansion.com/react-native-gesture-handler/docs/#installation
yea mine are not smooth at all on android phone. going back from detail screen to the page where the flatlist is, causing the images to disappear and the shared element animation is very laggy. on ios it works very good. Im using react-navigation v5 with the react-navigation-shared-element package and it seems like it's not really maintained anymore and its not really refined. thats really sad, because as workaround i'm only using the shared transitions in ios and keep android navigations as it is.
Please make for v6
hi, wrong github url in your description