React Native Shared Element Transition React Navigation V5 - Episode 1
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- Getting started with React Navigation v5 and Shared Element transition in React Native + create an advanced carousel animation using React Native Animated API.
This video is the ground work for a series about react native shared element transition using react navigation v5 and react-navigation-shared-element package.
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 change the Card interpolation to create the fade in and fade out animation while doing the shared element transition
- how to use reactive type of animation from React Native Animated API in order to create a two way binding carousel that will also animate from the header and viceversa. This is an advanced carousel animation done really easy with just a few lines on code.
👉👉👉 GitHub Source Code access: www.animatereactnative.com/ 👈👈👈
---
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...
---
For this tutorial we'll use:
👉 Join Discord: / discord
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:
00:00 Intro
01:34 Discord channel announcement
02:00 Project description
05:35 Packages used for shared elements transition and install dependencies
07:57 Create the Navigation using react-navigation v5
11:23 Navigate to Details list
12:35 How SharedElement actually works
14:10 SharedElementConfig
16:58 Initial shared element (PREVIEW)
17:30 Change navigation default transition
18:20 cardStyleInterpolator react navigation v5
19:20 transitionSpec for custom animation config
20:28 working on the details slider
22:31 Mounted animation when transitioning to details
26:25 Animated FlatList at mount
28:00 Animate in reverse before navigation
30:10 Sync FlatList with the view from above
33:10 Showcase the FlatList and View sync
36:00 Output of the sync
36:10 Sync FlatList from the View (scrollToIndex)
38:05 Final thoughts and final words
#react-native #react-navigation-v5 #shared-element-transition #react-navigation-shared-element #animated-api #advanced-carousel-animation
This video actually is my startup video approaching to RN , and now I watching it again ..
OMG - this is the next level of tutorials - You are a genius. Thank you so much
I’m glad you like it, thanks a lot Khalid! ✌️
Man this is so amazing. I’m working on react native for 6 month now, but there were no time for animations yet. Your tutorials are extremely helpful 😃👌
Glad I could help! If you need any help please join Discord, I'm there to help you out: discord.gg/vg7hUDU ✌️
It's just amazing man, keep sharing and we will keep supporting you.
Thanks Ravi, I’ll do my best ✌️
Just here to say that your tutorials are *EXCELLENT* !!!
I'm actually learning React Native at school right now.
Your vids helped a lot.
Keep up the good work 👍.
AND GO BE TEACHER !!! ☝️😠
Thanks a lot Jax, I’m glad that you like my way of teaching and find my tutorials useful. Good luck ✌️
you made like its so simple like you talking an english language , my mind blown up , shiitt i have alot to learn to get to this level !!!
keep up the work !
Happy to hear that!
Um video mais top que o outro, como pode.
i'm glad i found this channel
Me 2
woahhh this channel is a GEM in youtube, subscribed!
Thank a lot, I'm glad that you like my videos. Cheers! ✌️
This was awesome.. Man all your videos are awesome! Thank you
Glad you like them and thanks for watching Hadi! ✌️
Thank you. That was soooooo fantastic
Once again great lectures, keep it up.
Thanks, will do!
This is awesome man, learnt a lot👍🏼👍🏼👍🏼
I am glad that this was helpful. Thanks Shriganesh! ✌️
Thanks as always Catalin 🙏
You're welcome 😊Thanks Graeme ✌️
Good job man! Thanks all.
super amazing!
You're the best on Animation
Wow, thanks a ton 🙌
you're really good man!
Very nice tutorial as always 👏
Thanks Tiago ✌️
Really really good. Awesome stuff here thank you !!
Thanks Emanuel ✌️
wow man really awesome animation you created so helpful in my new project
Thanks you Abdul, I’m glad that my videos are useful. Thanks ✌️
Looks good, thanks!!
Thanks a lot, I'm really happy that you find it good! ✌️
Just one word for you....
U are fantabulous👌
Wow, it means a lot to me Piyush, thanks a ton ✌️
Thanks for sharing!
You're welcome Jack! ✌️
very beautiful, very interesting and cool way of teaching something, and you are also very cool bro.
Thanks Nadeem ✌️ You're awesome too and thanks for sharing your thoughts!
Just Amazing
Thanks Vineet ✌️
Amazing, thanks
Thank you Laila 🤗
Amazing !
Thanks a lot Sandesh! ✌️
Awesome 👏
Thanks Alexander, I'm glad that you liked it! ✌️
Thanks!!!!
You are a god.
hello bro. thanks for your time and efforts. its much appreciated. is it possible to implement personal card in slider where you can integrate content full in it, this really would be helpful.
it was amazing
Thanks Edris! I'm glad that you liked it! ✌️
that script font is a real flex
Hi. Love your videos. Very helpful.
I have a question. Im trying to implement shared element transition in an app with right to left layout. In iOs it works perfectly. but in android there is a flickering of the image along with stretching. its not smooth at all. Have you ever tried shared element transition with rtl layout? Can anyone please help out if they know how to fix this issue.
Please create a tutorial on how to make an image animated in the shared elements. for example, make them rotate two times in 360deg and scale them up during transitions. I have done these but they are scale-up and animate after the transition end. mean when the next screen rendered fully.
Hi Catalin, Thank you so much for this. My problem is I have a stack (created using createSharedElementStackNavigator) in a tab screen (created using createBottomTabNavigator).. I want the tab bar to show on the first screen but want to hide the tabbar once I transition to a detail screen (to emulate a modal).. I can't figure out how to hide the tabbar from a nested stack screen.
Thanks Catalin for the video. Please do a video on notifications with rnfirebase v6.
I'm considering adding RN Firebase to this channel, it's a great suggestion, thanks Ravi! ✌️
amazing content man!! Really I found your channel. I ll get you a coffee shortly ;)
I first like the video and start to watch.
Wow, that pretty awesome. Thanks Niraj! ✌️
Most underrated channel ever, sub from me!
thank you
Thank you too Edris ✌️
Salut Catalin,
Fix un tutorial de genul cautam, thanks!
Keep up the good work!
Multumesc Adrian, ma bucur ca te-am putut ajuta!
Thanks Adrian, I'm glad that I could help you!
It would be useful if you provide the project getting started git link so that we can follow along with the tutorial
Great tuts mate really appreciate your work! but in android after navigation it flickers for a second. any solution for that?
I've wrapped the icons inside SharedElement component in List component and in Detail screen, defined the sharedElements function on Detail screen, and am returning the list of ids exactly as you have specified. But I'm still unable to achieve the shared item animation as seen on 17:02. Could you please help me out? Awesome tutorial btw :)
You make it look so simple! I'm sharing a Text element which has a different font size in the 2 screens and the resize effect is pretty bad. Is there any way to manage this effect problem? I tried the transictionSpec and cardStyleInterpolator as you suggested but it doesn't look like to be working with the Text element. Thanks
You either position it absolute or apply resize: ‘none’ to sharedElement config. Thanks Max ✌️
Catalin fantastic job on this series. you mentioned Ahmed's example that inspired you. where can I find that example?
Thanks Garry! I forgot to add the link to the inspiration, I’ll do it now. Thanks for the reminder ✌️
Nice tutorial.
I learned too much from you.
If increase font size it will be good to see in Mobile
Thank you Muhammed. Next time I’ll increase the font size ✌️
how did you do a horizontal scroll without scroll view or fltalist?
i wonder what if i pass only a ID to the detailscreen and make a request in it to get the data. in such case what can i do to make it work ?
Thank you sir for your effort. ..... please go with full functional app with good UI... good animation.. with database... so we could understand all from ground level..
That's a great suggestion Suman! Once I'll finish the shared element transition series I'll create a full-stack app from scratch. Thanks! ✌️
@@CatalinMironDev thank you for positive response......and thank you for giving tons of knowledge. ..
Great video. Please, could you share the starter code?
can anyone please explain me this code
const translateX = activeIndexAnimation.interpolate({
inputRange:[-1,0,1],
outputRange:[size,0,-size]
})
i am confuse because when we click some icon for ex. icon of index 2 then the activeIndexAnimation will be to how we are interpolating this ? to translate icon ?
Awesome!!
I’m glad that you like it. Thanks Rennan ✌️
Hello Sir, i get Error while updating property 'endNode' of a view managed by: RNSharedElementTransition, is there any way for by passing it. Huge Respect for what you have done.But due to this i cant actually implement this feature in production, looking forward for your fix
What font and theme color VSCode are you using?
Hello, I hope you could help me. Shared elements doesn't return to its original position when back button is pressed. All icons just squeezed at the top-left corner of the screen.
i want to learn animation from scratch can you explain me which tutorial i see first
which font family do have use in vscode not in coddig
RAWR
RAWR to you Danny! 🦁
Can we use this in our own projects? In other words do you have permission from the designer to do so?
so this ain't reanimated2? can I use reanimated2 with this tutorial? what changes will Ive to make for that?
good
Thanks Rovis ✌️
Is this library working with React Navigation v5 right now? I'm having issues, it doesn't transition correctly, it makes a strange shift in the original screen
im having issues too, when change my screens doesnt looks any animation or rezising transition
Can we blur whole image accept small portion of image not to be blurred
How to interpolate svg path using reanimated 2 ? please
What can the reason be for this to not work properly in android? I have done everything as told in toturial and it does work as it should in ios but in android the scroll is disordered.
Can we blur whole image accept small portion of image not to be blurred in react native
what kind of font you are using with vs code
Does this work with react navigation v6?
Hi Nice work!! The tier 1 of patrón had access to this code?
Yes it does! Thanks Carlos!
Please need tutorial about uber eat menu,,,, when click on pizza the app scroll to piza, ...etc
Hi Can you please put biolerplate for every it really help full
Hi, may I know which extension or what do you do to make the code auto-format? Like the spacing, from {fontSize:10} to { fontSize: 10 } on save. Thank you in advance.
Hi Jimmy, I'm using prettier for that (marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) You enable it for every save of the file and it will automatically format the code. Thanks ✌️
@@CatalinMironDev thanks for making all these tutorials. Understand the usage of react native animated much better now and also usage of react hooks. Well done and looking forward to learn more things from your channel. 🙏
This does not work in projects with Nested Navigation Architecture 😩
Hi, why the shared elements doesn't return original position when back from another screen when I applied SCENE_NAME.sharedElements. All icons squeezed at top. May I know why this happened?
hello, did you already resolve this issue? If yes, can share on how you fixed it. Thank you :D
hie.. bro.. i faciing issue with.. Navigation V5 can you plz. help ....
How do we buy a personalized session for help with a project?
Hi, you can check my Patreon, I have a tier for exclusive help. Unfortunately this week I am full, but I can do it next week. Thanks ✌️
on detail page, my touchable opacity only pressable on first 3 icon, do you why this happened?
problem solved, use TouchableOpacity from gesture-handler instead of react-native
@@artmosphereID thank you king
you are amazing man
if you could put the code you start with it will be pleased
It’s hard to do it now but on the future videos I’ll do it so. The code is available for Patreons. Thanks Momen ✌️
Hello react native enablescreens() method gives a blank screen, how to solve this?
I am using react navigation v5 with the last updates
thanks
if you're not using expo, it doesn't need enablescreens()
@@nicathidayetzade1482 so I can follow this guide skipping this step?
thank you
I am confused where to start when following this tutorial ..
I didn't use the expo and in the video already started with the theme template ... I hope there is a tutorial that starts from scratch or before the template is installed ..
Good video. Can you make video on image defaultSource
Please tell me more because I couldn’t understand your ask. Thanks ✌️
@@CatalinMironDev in react native while fetching image from server in list of images, it take some time to load image. In react native image has props defaultSource, it will act as image placeholder, but it doesn't have proper documentation.
Subramanian K oh, now I see what you’re trying to say. I will try to include this into on of my next tutorials. Thanks ✌️
@@CatalinMironDev thank you
hai, sir,
I have one question, what font you used?
Hi Rayhan, I'm using
VSCode theme: Palenight
Font: Operator Mono.
Thanks!
@@CatalinMironDev thank you sir
react navigation v5 [ latest version ] not working ? im using a react-native-cli too
Hi Pachara, what’s the error? Please join the discord server. I can hep you there. Thanks!
@@CatalinMironDev thanks , Now its solved
i'm facing same issue... can you help...plz.
Someone have start code?
I love your content, but I can’t understand how you stay sane coding in cursive
hey bro why it is not working in android ????
still not working??
@@hamzaeleimat4297 for me only the opacity is working. and the transition is not working
not working for me in android :(
Have you finished it ? probably link the repo here. for help.!
transition is not working
working on both android and ios. great tutorils
@@aftabamin8508 where u get the starter code ?
@@anislarguet9151 I wrote it from scratch.
Hello, good morning, I did not understand normal, but the person to access and know about this GIT HUB, will you have to pay? Can't find the open source for this project?
In
dribbble.com/shots/3435714-Salon-category-discovery-exploration
Note, I referred to git with data.js files, Details.js to be able to understand step by step, a little bit of animation in transition, I only know how to make animations in the medium term, but I am deficient in making animations with Stack components. Navigation and changes of other screens with animations, is that I use the google translator to understand your words in English, but the google translator is not perfect, and uses different nouns or words in the sense you say. But thank you very much for your humble teaching gestures, I'm your fan
Hi Leo, yes, in order to have access to the source code you need to become a Patreon, learn more why here:www.patreon.com/posts/41446571. I’m going to push the code for the whole 10 video series about shared element transition before the videos is public.