React Native Shared Element Transitions with Reanimated 3

Рет қаралды 16,761

Күн бұрын

In this tutorial, we will go through every step of the process to build amazing animations in React Native using Shared Element Transitions with Reanimated 3.
🔥 Learn React Native FAST: galaxies.dev/reactnative
👨‍💻 Full tutorial: galaxies.dev/react-native-sha...
#############################
❤️ You can also find me on:
Twitter: / schlimmson
Instagram: / simongrimm_
TikTok: / simongrimm_
#############################
Chapters:
00:00 Intro
00:43 Setting up Reanimated 3 with Expo
04:40 Adding Expo Routing and Modal
09:20 Styling the Modal with BlurView and Fade
13:24 Adding Reanimated Shared Element Transitions
17:37 Outro
#reactnative #reanimated #reactjs

Пікірлер: 50

@galaxies_dev 11 ай бұрын

Learn React Native FAST by becoming a member of Galaxies.dev today [FREE] galaxies.dev/reactnative

@ShawnChristopher10101 11 ай бұрын

Thanks for the concise example...this was probably the most direct example I've seen, thanks again.

@galaxies_dev 11 ай бұрын

Glad you enjoyed it Shawn!

@Rekoide 2 ай бұрын

I love React Native, but watching you explain so fast and easy, makes me like React Native even more 😂

@galaxies_dev Ай бұрын

Haha thanks :D

@davidadokuru8139 Жыл бұрын

Loved this Always giving what I need right now

@galaxies_dev Жыл бұрын

Love to see the new features working so awesome 🔥

@nmiz1987 Жыл бұрын

WOW! Thank you!

@dericbytes 3 ай бұрын

Really helpful. Nice compact tutorial. Thanks

@kwesikayofficial3078 Жыл бұрын

love it

@green_pole5153 5 ай бұрын

Great video! Really easy to follow. What extension do you use for auto import while typing btw? Extension that is available called Auto Import doesn't work for some reason.

@cecece775 Жыл бұрын

Really impressive

@galaxies_dev Жыл бұрын

Thank you 🙌

@Howleyy13 9 ай бұрын

Fantastic video

@galaxies_dev 9 ай бұрын

Thank you mate 🙌

@ferrad1 8 ай бұрын

great video BOSS ! i'm sharing !

@galaxies_dev 8 ай бұрын

Thanks for sharing!!

@bilelrahmouni01 11 ай бұрын

thank you

@galaxies_dev 10 ай бұрын

You're welcome

@zerozero334 Жыл бұрын

great day!

@galaxies_dev Жыл бұрын

Yes it was!

@IMADABOULHOUDA7 11 ай бұрын

Hey simon can you do it with ionic or html and css

@hds6857 5 ай бұрын

Hi. I follow the tutorial and it works but when I use it into a tab, it doesn't make the animation. Do you know how to show the animation transition inside a tab?

@kwesikayofficial3078 Жыл бұрын

i like u to do a full course on reanimated 3

@galaxies_dev Жыл бұрын

Sounds like a plan!

@juliocesarcosta8168 23 күн бұрын

this present="modal" from react router only work in ios right? I can't make this on android

@Bharath_Murugan Жыл бұрын

Will this work on React native CLI

@rasikar4216 Жыл бұрын

Hey Simon...is NFC supported in ionic 5? If so, can you please post videos of reading and writing NFC in ionic with amgular

@galaxies_dev Жыл бұрын

There should be an according Capacitor plugin but I haven't tried yet.

@joingather 10 ай бұрын

First, thank you!! Super helpful. Do you know if Shared Element Transitions work with Expo Dev Client builds? I got this all working w/ Expo Go no problem but doesn't seem to work in my dev client. Any thoughts?

@galaxies_dev 10 ай бұрын

They definitely should! Did you see any errors or notice something strange?

@joingather 10 ай бұрын

No errors that I saw at that point - according to their team it should work no problem, so now that I know that it should work, I'm going to dig in a bit more & try to get to the bottom of it. Thanks - maybe i'll reach out if I have any specific lorgs/breadcrumbs to follow@@galaxies_dev

@Yukiixs 11 ай бұрын

I can’t make it work with solito / tamagui on both web & mobile 😢

@Matheus_1582 Жыл бұрын

Simon faz um video do Astro...

@jasim17 5 ай бұрын

hi thanks for the video can you make a video on google and facebook login/signup integration or phone pay and gpay integration this type videos are not available on youtube as a beginner we need more videos on this type topics react native cli...

@dancristian3673 10 ай бұрын

does it works for expo projects react native?.. is there a reference for your whole project demo to download and test it ?

@galaxies_dev 10 ай бұрын

Yes the link is below the video!

@mehedihasansony Жыл бұрын

does ionic with angular have something like this?

@galaxies_dev Жыл бұрын

I don't think Reanimated works with Angular yet..

@adelashour3253 4 ай бұрын

It is experimental as the documentation says and not recommended, and it is buggy in real apps that fetches data from server

@galaxies_dev 4 ай бұрын

Yeah it's not yet production ready, agree!

@jerryjohnthomas4908 9 ай бұрын

Hi Simon, I was following your tutorial on android, all works well till the sharedTransitionTag then on clicking from index to model, no animation occurs, but on going back it crashes with an error, Attempt to invoke virtual method 'java....renanimated. Any help would be greatly apprciated, as I have been trying for some time.

@galaxies_dev 9 ай бұрын

It's still in beta and I also experienced issues now with Expo Router.. No problems with just React Navigation though!

@AlbertoVasquez1 7 ай бұрын

Getting the same thing