React Native Shared Element Transition
HTML-код
- Опубликовано: 4 сен 2024
- In this clip, we build a simple shared transition using react-native-shared-element (github.com/Ijz....
start-react-na...
Full episode and source code: Airbnb Shared Transition - “Can it be done in React Native?”
• Airbnb Shared Transiti...
Message from a brazilian friend. My name is Fernando Bosco and i'm so impressed with your work william! your are doing great! keep going. You inspired me creating this kind of work in my native language, portuguese. Looking forward to work in a open source project with you!
your accent is the reason why i flew thousands of miles to visit this dude i was talking to online with your same accent.... i have NO REGRETS..
That's what I was looking for today, awesome content bro thank you so much
Glad you enjoyed!
Thanks for sharing, William. Once the update for React Navigation 5 is released it’d be great if you made a short video showing that, too. I really like your way of teaching. Thanks again.
I'm gonna look into v5. integrating shared-element with v4 manually is A LOT of work but I feel like it might be much easier in v5 because of the way you can nest navigator with component. Stay tuned.
React Navigation 5 has been out for a month already. :)
@@TheBreezerFly They are talking about shared element navigation, not react navigation. Shared element navigation does not support react navigation V5 at the moment.
Amazing you did this in 6 minutes, William! Looks great man!
Fantastic content. These transitions look so good!
Amazing Video! God bless you bro! You're an underrated content creator. I wish you get a lot of subscribers!
Awesome bro. you are very creative. nice video.
Thank you so much 😀
wow this is short but amazing
Please, teach me your accent - I fken love it ;D
Thank You! However I should really try to make an effort to be more understandable. 😅
Hahaha 😂 👌
Keep in mind that this is a JS animation and not native, which makes it really unusable when you have an actual application which runs stuff on the JS thread.
Hi William,
Thanks for this tutorial.
This channel is amazing.
Can we use this library with react-navigation v5 for production??
yes, here is an example: ruclips.net/video/NJZfRXs7nZs/видео.html
You are a savior, thank you sir
Hi William, I absolutely love your videos and how you make these things look easy.
How long have you been working with React Native? I'm hoping one day I can be this good too :)
how did you configure your simulator to work in macOS fullscreen mode and display the "refreshed" react native bar at the bottom instead of the top?
Hi,
I'm trying to do transactions on android with a shared element but the screen is flickering. When open a new screen it blinks and then load instead of smoothing animation.
Hi, great content, i have a question about Cereal Font by AIRBNB, its font free to use or not?
SUSCRIBED! Dear Candillon, thanks for this explanation
Nice one. Thanks.
William please guide how to use "redash" package in Javascript project ?
I really love it 👍
that slide effect on navigation wont work on my android phone
How can we achieve such in React-Navigation v5?
Found this: github.com/IjzerenHein/react-navigation-shared-element/tree/navigation-v5
Excellent video! I'm sharing a Text element which has a different font size in the 2 screen and the resize effect is pretty bad. Is there any way to manage this effect problem? Thanks
You are awesome!!!!.
Thank You Sudhakar! You rock 🎸
Hi thanks for the awesome work. my animation is like toggling when i press the img stays for additional 1 more second and then suddenly disappers to new position instead of animating any idea why?
Does this work with react navigation 5?
Not yet, there is a in progress banch github.com/IjzerenHein/react-navigation-shared-element/tree/navigation-v5
Just waiting for this awesome release!!
Maybe William can update that code with RN5? Allez Willie! S'il te plait? :)
can we do this for pop ups as well? there is no need for navigator there right?
And if possible can u pls share a link to the source code for what u just taught in this tutorial.
here it is github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season3/src/Airbnb
how to handle the detail screen that need fetch detail data from API ? , is it possible to use shared element ?
Screen frozen with navigation v6, if use navigate goback()
Great work. Does it support react-navigation-v5? If not what is the alternative?
There is a branch that supports v5 that seems to work ok already. If not, the alternative is to build your own v5 integration using github.com/IjzerenHein/react-native-shared-element directly.
@@wcandillon Thanks I 'll look into it. But I also found an article which seems good to me ruclips.net/video/H7_yY3yr-jE/видео.html
Hi, React-navigation-fluid-transitions or Shared Element Transitions? which one to use and which one has less issues ?
Thanks for your detailed tutorials but it would be really nice if add your own subtitles, RUclips's genereted are just trash
im not sure this duplicate video or not
I've cut the original episode into highlights. Not sure what is the best practice regarding this yet.
Hello, Is there any alternative for this? Science reactnavition 5 is not yet supported.
it is supported now: ruclips.net/video/NJZfRXs7nZs/видео.html
How to do this RNRF?
Sir pls can u record a video on loading and using custom fonts other than the default in react native, I've been searching for so long, and most of the approaches described isn't working, so far I'm at a dead end. Thank you
Not sure if this helps but I have a video on icon font at ruclips.net/video/tJWZD3LNN5s/видео.html
@@wcandillon thank u sir
U r my fav.
Thank you Manoj!
Does it works with react native router flux?
Yo intenté pero no pude, tuve que migrar a react-navigation
@@TecnoRero hermano que tal? me puede ayudar a implementar eso en mi app?
Which version of react-navigation are you using?
This is version 4, support for version 5 is already underway.
Im having issues with Reanimated v2 alpha 5 :(
What kind of issue Roland?
m your 24 k subscriber lol
Haha awesome 🥳Thank you for the sub Navjyot 🙌🏻
please can you redo this in react-navigation v5 ?
here is it ruclips.net/video/NJZfRXs7nZs/видео.html
@@wcandillon yes but i get this error
Unable to resolve module react-navigation-stack from C:
eactNative\snaptchat
ode_modules
eact-navigation-shared-element\build\createSharedElementStackNavigator.js: react-navigation-stack could not be found within the project.
and I have all the dependencies installed
Why didn't you say hello react native developers,
This is just an highlight from a video where I do the proper greetings: ruclips.net/video/83GNiMp-qq0/видео.html :)
Hi Jonny sins
mine works on android and not on iphone real device
not as an ofense but i speak spanish and i dont unterstand you so well what makes me feel sad cause is harder to follow what you are coding :c