Shared Elements Transition in React Native
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- Let's recreate the Facebook Marketplace shared transition in React Native!
Read the code: gist.github.com/eveningkid/bd...
React Native Shared Elements: github.com/IjzerenHein/react-...
React Navigation: reactnavigation.org
Twitter: / eveningkid
Medium: / eveningkid
#reactnative #tutorial #sharedelement
something that lacks in other tutorials out there is that they do not explain the library well, as well as how it works. And you nailed it perfectly explaining how and why things happen this way. Well fucking done.
From the bottom of my heart, thank you so much. I truly want to keep this simple and when I read this, I know it’s helping people. Thanks for still being around the channel, it always cheers me up to read this. Have a great day :)
So smoothly explained,thanks mate
Why doesn’t this channel have at least a million subscribers?
After many years, Finally a channel that REALLY knows how to do teach
You're back! I love how a simple fading animation can drastically change the user experience, adding fading text animation was a nice touch. Loved your video as always!
...you're still there, haha! I know right, it reminds me of padding actually. As in a block without white spacing looks odd, but turns great as soon as you add a small padding around. Little things...as always :) Thank you for supporting me for all this time, it really means a lot
@@eveningkid Yeah! exactly, small things matter.
Amazing, please keep doing these! 😄
This tutorials are amazing, thanks for it!! Keep doing !!
Thank you so much Alfonso, you've been around for 2 months already!! It really means a lot to get your support :)
I just gotta say it. The amount of time and effort you put into these lessons is outstanding. Thank you so much for your videos, which are both extremely educational and entertaining
Thank you so much for saying this, it means so a lot to me. I really do this for people like you, eager to learn new things. It makes me happy to know that it's being appreciated, thanks a lot :)
This is amazing. Great job!
Thanks a lot Dan, it is really cool you like the videos :) Hope you'll like the next ones
Love this tutorial, so simple to understand the flow
I was surprised myself actually, I thought it would be more complex. Happy this could help you out, always trying to keep things simple for the video :) Happy you're still around, it's been a month already!
Amazing tutorial, simple and well-explained.
Thank you Efkan, always trying to keep things simple. Glad you felt this way :)
You could be setting a really positive precedent in terms of quality and style with these narrated walkthrough-explainers. Keep up the grind and you'll surely be rewarded for it. The only upset I have is that you didn't start sooner!
Thank you so much John, truly. It can be difficult at times when it's just you behind the computer screen. I only hope this can have a positive impact on the community, for anyone who's eager to learn. Thanks again for your support, and I hope to see you around on the channel! Have a great day :)
Second this mate
Nice Explanation! Thank you so much!
Thanks a lot Ajay!! I’m very happy you found it interesting :)
Love your videos.
Thank you so much, this kind of message really keeps me going :)
It looks super cool
Thanks Roylan :)
Wow, brother you have made it very clear and easy
Thanks a lot, there’s a lot of work going into it! Very happy this found you well :)
Keep up the awesome work!
Thank you Jonas!! Will keep it coming and feel free to let me know if there's something you'd like to see
Simply amazing!!
Thanks a lot Saakshi, happy you liked it! :)
I`m still amazed of how you made something as frustrating as RN Animations that interesting to learn.
Great job. As always.
Wow thank you so much for the kind words! I like things to be simple for myself so I’m sure this transpires in the videos. Really happy you like it, thanks for being among us :)
Amazing!
Awesome video, thank you.
Thank you Erick for the kind words, very happy you liked it! Have a good day :)
Amazing job explaining
Thank you, very glad you liked it :) Just realised you've been on the channel for 3 months already, thanks for your support!
Wowwwww I can't believe it. I'm so amazed on how you interact with your audience and I'm so happy I can learn the shared elements transition, finally. I'm so happy, thank you for your time and for sharing your knowledge
You are very welcome Dan, anytime. Really happy this found you well and has been helpful! Hope to see you around, always a pleasure reading your comments :)
omg, thanks a lot. I love you
Haha, that’s just a video!
nice explanation
Amazing
Awesome content, super usefule. Quick querstion, is there a way to use this with a custom / complex component (like a video)
Nice tutorial i like it Thank You :)
Thanks Imad, my pleasure really :)
What do you use for animation?
I like your simple sleek animation implementation.
So good!
Thank you Saad for still being around! :)
Great tutorial.
Thanks, glad you liked it :)
Thank you .Thats very practical example but i can not find posts? Button? Icon? in your code
can you tell the dependencies that you used...
Anyone else having the issue of using bottom tabs with shared elements? Like, if I were to click on an image on my "Home Screen", right? That would do the custom animations normally, but let's say I want to navigate with my bottom tabs and go to the profile screen. Now if I were to go back to the home screen (Bottom tabs) and try clicking on the same image. The animation transition won't work anymore. Is there any workarounds to this problem? I have searched a lot of answers and none seem to work out for me so far.
Great content thanks
Thanks a lot, I hope this was helpful to you :)
i have a screen on which i dont want to add the shared element how i can do it
Will it work on expo go??
sir i have a project based on navigation v5 but they mentioning shared element does not support RN navigation v5 ? whats happening there !!
Flutter: Hero Animation...🔥🔥🔥
More videos please!
very crisp !
Thank you!! It's been a while you've been around, really nice of you man :)
I have done all the steps correctly and there is no error but it doesn't work. The transition is normal like before. Can you tell what could be the problem?
Wow that was awesome . Can u make video on svg animation in React Native
Can we do it without ShareElement library?
Implement the animation ourself hand by hand is enjoyable.
Great job... i like your content... i have a question tho... imagine your image is not showing directly in detail screen, but in another component in the detailscreen... in such a case in which component you need to recieve the postId ? We can use the same behavior in one of details child components or we need to wrap with sharedelement the one that inside in the detailscreen?
Thank you for the kind words Bayram! If I understand your question right, you can just pass post id down to your child component inside Detail screen I think. So your SharedElement would be inside the child component. This needs to be tested though, I'm not 100% sure!
@@eveningkid i tested its working
😓 I really need some help with this library please I'm at my limit. I keep getting "undefined is not an object (evaluating data.image)" but then everything checks out, I'm using expo and react navigation v6
did you figure out ?
whooo 🙌🏻
I thought I had lost you! It's been a while :)
@@eveningkid haha no always checking the vids, just been crazy times at work. Keep em coming! I'm always lurking in the crowd.
Can I use both shared element and react-native-screen at the same time?
For now I think it isn’t supported. It said that it was unlikely to be in the future (from what I remember)!
read now Imma go recreate this in flutter 🏃🏽♂️
Interesting, do you know a good library/core feature for shared transitions in Flutter? :)
Can you teach us how to configure flipper correctly? Since remote debbuging can't be used with reanimated v2, flipper + hermes integration would be great for all debugging, except I still have to rely on remote debugger or reactotron since my hermes stays disconnected in flipper and there is no way for me to make it connect properly. I dont want to use hermes and flipper as 2 separate programs. I'd really appriciate the help.
I second this. For past 2 days, i've been also searching for a good tutorial on flipper
I'll have a look, but not sure if I can get *that* specific. It would be interesting to make a guide to Flipper though, that's a really great idea. Can't tell you when exactly, I'll need to think about it. Stick around :)
@@eveningkid thanks a lot
Good tutorial! Although, you should have waited a few more weeks since RN is about to turn 6 (with params being handled differently). But no big deal. we'll all adjust! :)
That is a very fair point Vincent! I should have known...that'll teach me. Thank you for still being around, I really appreciate it :)
@@eveningkid Quoting from your last video, "Upgrading dependencies? Never had problem with that
", "Oh no come on, it's just a version upgrade. Shouldn't take too long
" 😂
Nice please what did u use for the presentation
Thank you! Just a regular video editing tool, I switched to Luma Fusion recently
@@eveningkid ok I do react native tutorials also mind if check my channel @kymztech
It's great for the community to have as many content as possible, good work :)
@@eveningkid tnx
Awesome video👍👏brother, Can u drag and sort the list using Pangature Animation?. Thanku.
Thank you for the kind words, I'll put it on the list (there's a lot of requests already!). Wait and see, but I'd like to do it too :) Stick around
are you capable of upgrading react-navigation-shared-elements to match react-navigation v6? I really want to use it !
Mmm, interesting...it isn't currently supported: github.com/IjzerenHein/react-navigation-shared-element/issues/159
@@eveningkid haha, that's me too. I just want to know if you can do this? I'm not capable.
Oh!! Ok, I don’t have much time for this right now. I do the channel, prepare materials and future big videos while also maintaining open source projects...maybe someone will :)
@@eveningkid lol was really hoping u would, but ok
Now in 2024 is not working anymore