React Native Shared Element Transition
ฝัง
- เผยแพร่เมื่อ 8 เม.ย. 2020
- In this clip, we build a simple shared transition using react-native-shared-element (github.com/IjzerenHein/react-....
start-react-native.dev/
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!
Fantastic content. These transitions look so good!
Amazing you did this in 6 minutes, William! Looks great man!
That's what I was looking for today, awesome content bro thank you so much
Glad you enjoyed!
Amazing Video! God bless you bro! You're an underrated content creator. I wish you get a lot of subscribers!
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..
You are a savior, thank you sir
I really love it 👍
Hi William,
Thanks for this tutorial.
wow this is short but amazing
Nice one. Thanks.
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 :)
Awesome bro. you are very creative. nice video.
Thank you so much 😀
SUSCRIBED! Dear Candillon, thanks for this explanation
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.
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
Hi, React-navigation-fluid-transitions or Shared Element Transitions? which one to use and which one has less issues ?
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?
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?
how to handle the detail screen that need fetch detail data from API ? , is it possible to use shared element ?
can we do this for pop ups as well? there is no need for navigator there right?
William please guide how to use "redash" package in Javascript project ?
Hi, great content, i have a question about Cereal Font by AIRBNB, its font free to use or not?
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 😂 👌
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.
This channel is amazing.
Can we use this library with react-navigation v5 for production??
yes, here is an example: th-cam.com/video/NJZfRXs7nZs/w-d-xo.html
How can we achieve such in React-Navigation v5?
Found this: github.com/IjzerenHein/react-navigation-shared-element/tree/navigation-v5
How to do this RNRF?
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
that slide effect on navigation wont work on my android phone
U r my fav.
Thank you Manoj!
Which version of react-navigation are you using?
This is version 4, support for version 5 is already underway.
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.
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 th-cam.com/video/H7_yY3yr-jE/w-d-xo.html
Screen frozen with navigation v6, if use navigate goback()
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? :)
Hello, Is there any alternative for this? Science reactnavition 5 is not yet supported.
it is supported now: th-cam.com/video/NJZfRXs7nZs/w-d-xo.html
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 th-cam.com/video/tJWZD3LNN5s/w-d-xo.html
@@wcandillon thank u sir
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?
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 🙌🏻
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.
please can you redo this in react-navigation v5 ?
here is it th-cam.com/video/NJZfRXs7nZs/w-d-xo.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
Thanks for your detailed tutorials but it would be really nice if add your own subtitles, TH-cam's genereted are just trash
Why didn't you say hello react native developers,
This is just an highlight from a video where I do the proper greetings: th-cam.com/video/83GNiMp-qq0/w-d-xo.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