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
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
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?
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
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
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?
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.
@@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)
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.
Just leaving a comment here that you've been a great inspiration
Thank you for your support 🙌🏻
Why does close (go back) button appears after delay?
Will Shared Element work with nested navigations?
You are god of ReactNative animation.... love it......
Thanks for your support :)
Great Video!
Very helpful! Thanks a lot!
THIS IS CRAZY GOOD, thankyou!
Thanks Jack. 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 😅
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!
Thank you William. I was hoping you'd do something around Airbnb
Thanks Apiut! Do you have any episode request for me?
how would binding to navigation work if I am using NavigationService?
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?
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!
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?
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
When we drag the airbnb Card around, the screen behind the card scales up and down. Is it possible to do that now?
Please make a tutorial eject expo bare workflow, I have trouble handling expo dependencies for android
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
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 😅
I'm waiting
We're ready, let's do this 😎
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 :)
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?
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
amazing, thank you for your hard work and efforts
I'm having a blast doing it, thank you for your support!
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
Amazing content !!! What's the name of the theme u using ?
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
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!
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
My fav dev, love it
Woah thank you Patricio 🙌🏻
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.
Is it possibile to add a ScrollView inside the panGesture to scroll the content? How?
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).
Hey William, thanks for the great video...but do this work on Android too.?
Just thank you
Thank you for your support 🙌🏻
Thank you William for the best lessons, please remind me what color theme do you use in VSCode?
Palenight operator
Perfect 👌 well done 👍🏼
Thks man! Not the last shared transition we'll do ;-)
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 th-cam.com/video/NJZfRXs7nZs/w-d-xo.html
Thanks@@wcandillon !,
But unfortunately, I'm using react-navigation v4, any other suggestions please?
For me it's not working on iOS but working fine on Android, any idea.?
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
Let's goooo
Let's do this 🙌🏻
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.
Will it work with react-native-cached-image?
Thank you. Are you using EXPO or CLI?
Expo :)
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!
Thank you for amazing content , love from india
Thank you for your support Adarsh 🙌🏻
Thank you so much
Thank you for your support
What's the theme name of vs code?
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 :)
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 😂
The "modal backdrop" didn't animate ;)
why typescript instead of javascript?
Anyone wanna make the js version of this
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)
you're insane...
Thanks Caspar :)
crack