Great video Will! And yes, needs to be nested directly inside . This way the native layer can access the underlying image source and perform perfect reveal animations
This is awesome. Thanks for sharing, William. Typically, just today I finished updating my app to React Navigation 5 and, excited after seeing this video, just saw that the package doesn’t yet work with React Navigation 5. Haha. Oh well. Hopefully they’ll update soon. Thanks again. Subscribed.
This is awesome. Is it possible to then have a scrollable view in the fullscreen view? In the demo when you try to scroll it snaps back to the card view.
Hi William, great video. Can we have an updated version with react navigation v5? Looks like this one is v4 and I think there's a pre-release of shared elements already compatible with v5? Thank you so much
Great Great Work/Video William :-)! I've been working on something similar. I'd like to share my thoughts with you and others who may still be trying to implement this in their app: 1. It's working with React Navigation v5 now. 2. 'useValues' from R-N-Redash v14 docs needs an update for those who are using the latest version. 3. Have you thought of making another continuation video to complete the Airbnb example (Replica)? If so, how would it be done using Reanimated 2? PS: Replica meaning: adding some sort of force when dragging (like it is the case in Interactabble), shadow and scale transitions for Explore screen, haptic feedback on snap points, also, if you pay close attention to the Airbnb example, the spot for the pressed Listing in Explore screen is empty.. I'll appreciate your feedback
Great video Will! Did you have to do anything to get this to work with react-navigation? I believe expo sdk36 has react-navigation 5 but the shared element library only works with v4 right now. Trying to implement this in my project and getting a regular react-navigation transition so wondering if I have a dependency that is off or something.
Well done William! In position 0 (full screen, before you drag down an start the animation) image can be dragged up (-y axis) which doesn't seem ok to me. Does anyone know how can I block it?
Hello ! Thanks for this video ! I managed to make it works on a simple screen, but applied to my context, this is not working. I have a ScrollView so there's a conflict between the swipe on scrollView and the pan responder? Can it be done in season 5 maybe ?
Hi William, I have a question. Will the animation work if the screen you are navigating to has to make an api call to fetch some data meaning it has states like loading while waiting for data. e.g I have to pass an id to a detail screen so that some information has to be fetched using that id before displaying the data. Will the shared element transition work in such a case? I am trying and can't seem to get it to work
Hello ! First thanks a lot for this ! Is it working if we arrive on a screen that has a ScrollView ? How react make the difference between scrolling and the pan responder ? It will be great to have an exemple on season 5 maybe :)
Hi William, great video as usual. I have a problem with this technique, if the whole content is a scrollview then swiping down is no longer working. Any clue on how to address that? Thank you and keep doing these videos
nice bro..make something like that,house rental app where house owner post the room (if he have empty room) with price and location and student or couple search the house.and also include the payment system by students to house owner directly through app .including backend work
Hello Mr William. I have been following your videos. You're awesome. I have implemented the same thing in React Native but I am also implementing it in Vue-Native. How do I implement this part: Listing.sharedElements = (navigation: ReturnType) => { const listing = navigation.getParam("listing"); return [listing.id]; }; in vue-native? Thanks.
Sorry, I have a problem with this example, I try to replicate but I have the same error, the error is when you touch an element then close it, being by the X or by means of a gesture, after touching the image, at some point the touch event has not been fire and never displays the detail page again, you need to tap again in this case is success, In the case if I comment on the effect of shared element the tap works correctly, can you help me with that? Thank you
Hi, I am implementing Shared Element Transition using react-navigation-shared-element from Screen1 to Screen2 and from Screen2 to Screen3. When I go from Screen1 to Screen2 and come back from Screen2 to Screen1, Shared Element Transition works perfectly. When, I move from Screen2 to Screen3 then it also works but when I come back from Screen3 to Screen2 effect is not showing(transition is not happening). A help in this is really appreciated.
Getting this when importing createSharedElementStackNavigator from 'react-navigation-shared-element' undefined Unable to resolve module `react-native-shared-element` from `node_modules/react-navigation-shared-element/build/SharedElement.js`: react-native-shared-element could not be found within the project. Even though the package is installed, any suggestions please?
@@wcandillon Hi I think I should buy react-native-elements in your shop. So some animation on your youtube appear on your react-native-elements ? I love your Animation UI :)
It is indeed because it's another level of abstraction on top of JavaScript. I'll ask the question to Kryztof when he comes on but it is indeed a difficult library to grasp (for now)
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Great video Will!
And yes, needs to be nested directly inside . This way the native layer can access the underlying image source and perform perfect reveal animations
Thanks for building both an amazing API and implementation.
You are god of ReactNative animation.... love it......
Thanks for your support :)
Just leaving a comment here that you've been a great inspiration
Thank you for your support 🙌🏻
Great Video!
Very helpful! Thanks a lot!
Why does close (go back) button appears after delay?
Will Shared Element work with nested navigations?
THIS IS CRAZY GOOD, thankyou!
Thanks Jack. Any episode request for me?
Thank you William. I was hoping you'd do something around Airbnb
Thanks Apiut! Do you have any episode request for me?
This is awesome. Thanks for sharing, William. Typically, just today I finished updating my app to React Navigation 5 and, excited after seeing this video, just saw that the package doesn’t yet work with React Navigation 5. Haha. Oh well. Hopefully they’ll update soon. Thanks again. Subscribed.
Yes, you can do your own v5 integration for fun but you will see that it's actually a lot of work 😅
This is awesome. Is it possible to then have a scrollable view in the fullscreen view? In the demo when you try to scroll it snaps back to the card view.
Hi. Did you resolve above problem?
how would binding to navigation work if I am using NavigationService?
Amazing content !!! What's the name of the theme u using ?
Hi William, great video.
Can we have an updated version with react navigation v5? Looks like this one is v4 and I think there's a pre-release of shared elements already compatible with v5?
Thank you so much
Awesome Will, you're the best!
Question for Krzysztof Magiera: What is the future of react-native and animations after the bridge is gone?
great question! I wanna know too!
im watching this at work, while waiting for a few e2e tests to finish running 😂
That's the way to go, you are very disciplined Osama
Same but building some applications!
Great Great Work/Video William :-)! I've been working on something similar. I'd like to share my thoughts with you and others who may still be trying to implement this in their app:
1. It's working with React Navigation v5 now.
2. 'useValues' from R-N-Redash v14 docs needs an update for those who are using the latest version.
3. Have you thought of making another continuation video to complete the Airbnb example (Replica)? If so, how would it be done using Reanimated 2?
PS: Replica meaning: adding some sort of force when dragging (like it is the case in Interactabble), shadow and scale transitions for Explore screen, haptic feedback on snap points, also, if you pay close attention to the Airbnb example, the spot for the pressed Listing in Explore screen is empty..
I'll appreciate your feedback
The code that William did here in the video works with React Navigation v5? Thank you
Nelson Sousa sure
@@samuelwillerval2984 Any idea if we can use with React Native CLI or just Expo?
@@NelsonPRSousa I actually don't use Expo at all so Yes.
@@samuelwillerval2984 Thank you :)
Hey William, this is a great transition. Does it still work in React native 0.76? I had tried Shared Elements and it doesn't seem to work in 0.76.
amazing, thank you for your hard work and efforts
I'm having a blast doing it, thank you for your support!
Please make a tutorial eject expo bare workflow, I have trouble handling expo dependencies for android
Wow! Thank walliam, pleaae recode some lessons about react native back-end options , thank you again.
Nice! Looking forward to learn new stuff from you.
Yes cool to explore new libraries. Do you have an episode request for me?
I'm waiting
We're ready, let's do this 😎
Just thank you
Thank you for your support 🙌🏻
When we drag the airbnb Card around, the screen behind the card scales up and down. Is it possible to do that now?
Hi William, It's so great video... I'm new on this, so, why the files are *.ts and not *.js sorry, I'm lost.. :) from Panama!
The animation master!!
Good to see you here Pedro 🙋🏼♂️It's a good one today ☺️
@@wcandillon Another Pedro here to learn a bit more :D
So great, i will stay focous on you ! (i love your accent, i'm french ;)
Thanks man! I'm getting really valuable pronunciation feedback from you guys (developers, focus, gradient) but sometimes I forget 😅
Perfect 👌 well done 👍🏼
Thks man! Not the last shared transition we'll do ;-)
Thank you William for the best lessons, please remind me what color theme do you use in VSCode?
Palenight operator
Great video Will! Did you have to do anything to get this to work with react-navigation? I believe expo sdk36 has react-navigation 5 but the shared element library only works with v4 right now. Trying to implement this in my project and getting a regular react-navigation transition so wondering if I have a dependency that is off or something.
Well done William!
In position 0 (full screen, before you drag down an start the animation) image can be dragged up (-y axis) which doesn't seem ok to me. Does anyone know how can I block it?
Hey William, what mike are you using to record?
Thanks for the tutorial
Shure sm7b. I'm not making most of it yet unfortunately, my recording conditions are quite harsh (lots of background noise).
Thank you so much
Thank you for your support
Hey William, thanks for the great video...but do this work on Android too.?
My fav dev, love it
Woah thank you Patricio 🙌🏻
Hello ! Thanks for this video !
I managed to make it works on a simple screen, but applied to my context, this is not working. I have a ScrollView so there's a conflict between the swipe on scrollView and the pan responder? Can it be done in season 5 maybe ?
Hi William, I have a question. Will the animation work if the screen you are navigating to has to make an api call to fetch some data meaning it has states like loading while waiting for data. e.g I have to pass an id to a detail screen so that some information has to be fetched using that id before displaying the data. Will the shared element transition work in such a case? I am trying and can't seem to get it to work
Hello ! First thanks a lot for this !
Is it working if we arrive on a screen that has a ScrollView ? How react make the difference between scrolling and the pan responder ?
It will be great to have an exemple on season 5 maybe :)
Is it possibile to add a ScrollView inside the panGesture to scroll the content? How?
Hi William, great video as usual. I have a problem with this technique, if the whole content is a scrollview then swiping down is no longer working. Any clue on how to address that?
Thank you and keep doing these videos
nice bro..make something like that,house rental app where house owner post the room (if he have empty room) with price and location and student or couple search the house.and also include the payment system by students to house owner directly through app .including backend work
Thank you. Are you using EXPO or CLI?
Expo :)
Awsome tutorial again.
Thks Kamil!
Hello Mr William. I have been following your videos. You're awesome. I have implemented the same thing in React Native but I am also implementing it in Vue-Native. How do I implement this part: Listing.sharedElements = (navigation: ReturnType) => {
const listing = navigation.getParam("listing");
return [listing.id];
}; in vue-native? Thanks.
I eventually have to do everything in React Native
Sorry, I have a problem with this example, I try to replicate but I have the same error, the error is when you touch an element then close it, being by the X or by means of a gesture, after touching the image, at some point the touch event has not been fire and never displays the detail page again, you need to tap again in this case is success,
In the case if I comment on the effect of shared element the tap works correctly, can you help me with that? Thank you
Thank you for amazing content , love from india
Thank you for your support Adarsh 🙌🏻
Will it work with react-native-cached-image?
Should I use FlatList or just vanilla map when rendering list in React Native?
It depends I think, it's not my area of expertise unfortunately.
Hi, I am implementing Shared Element Transition using react-navigation-shared-element from Screen1 to Screen2 and from Screen2 to Screen3. When I go from Screen1 to Screen2 and come back from Screen2 to Screen1, Shared Element Transition works perfectly. When, I move from Screen2 to Screen3 then it also works but when I come back from Screen3 to Screen2 effect is not showing(transition is not happening). A help in this is really appreciated.
This is perfect!
Thanks Josh! Any episode request for me?
@@wcandillon new to the channel here, but once I've gone through the playlists i'll let you know. Thanks again for the brilliant content!
Getting this when importing createSharedElementStackNavigator from 'react-navigation-shared-element'
undefined Unable to resolve module `react-native-shared-element` from `node_modules/react-navigation-shared-element/build/SharedElement.js`: react-native-shared-element could not be found within the project.
Even though the package is installed, any suggestions please?
You can checkout the v5 version at ruclips.net/video/NJZfRXs7nZs/видео.html
Thanks@@wcandillon !,
But unfortunately, I'm using react-navigation v4, any other suggestions please?
What's the theme name of vs code?
For me it's not working on iOS but working fine on Android, any idea.?
I love it
It's a great one :)
@@wcandillon Hi I think I should buy react-native-elements in your shop. So some animation on your youtube appear on your react-native-elements ? I love your Animation UI :)
Let's goooo
Let's do this 🙌🏻
Is there not a way to do this from a Flatlist?
Should work fine in a flat list
actionhero w/ react native :)
Thanks Gerardo!
Tu toh apna Johnny bhaiya lgta h 😂
Anyone wanna make the js version of this
The "modal backdrop" didn't animate ;)
Why does Reanimated confuse me soo much????
Yeah, maybe because it's declarative
It is indeed because it's another level of abstraction on top of JavaScript. I'll ask the question to Kryztof when he comes on but it is indeed a difficult library to grasp (for now)
why typescript instead of javascript?
you're insane...
Thanks Caspar :)
crack