William, I have to say this is your best video so far. Yes, it's experimental / proof of concept, but these kind of experiments push a framework forward. Thanks a lot for all the effort you put into researching and making these videos
Thanks a lot! And now having some distance with this problem we could remove the view masking out of the equation and also add some pagination. Maybe in future videos!
Simply Brilliant . I also saw this animation on my instagram but was struggling to understand how it worked and failed , But you did a great Job . Simply Awesome , Adding such advanced content to community is very Good , keep this up
Surprise!! I can't believe that kind of these animations can be crafted in RN. I'm using RN for many years and your channel is best place to farming new skills. Thanks for sharing your knowledge. recommended for everyones. keep up good vdo bro.
@@wcandillon Can you help me out? I watch a lot of your videos already and have done react native for a year (still not full expert), but all of your videos I have huge difficulty following and it seems you are already in the middle of each project. Am I missing something important? How can I learn the entire project?
@Space Elevator 2020 If you dont mind, this is my path: first, you need to familiar with Animated api in react-native (timing, spring, decay, event, interpolation, loop, sequence, parallel, stagger and pan responder). but built-in Animated api is not 100% native supported. Then, its a time for 'react-native-gesture-handler' (native version of PanResponder) and 'react-native-reanimated' (the syntax look like an assembly version of traditional Animated but fully native supported). Personally, at this point I understand around 80% of the vdo tutorials. the rest 20% is a Mathematics part which is blow my mind.
Wow that was great. can i request sir? Can you make a tutorial of swipe list of delete or edit button with animation? I hope you nitice this comment😂😊😊😊
Hi Willian, you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
I have tried as you show, for iOS it works as it should be, but for android I could see the black arrow, but the white liquid swipe is missing. Why is it?
Same with me, I cloned his code and get this result (a red thin border over the screen also appears istead of the white liquid swipe). Also tried to add this to my own project without expo and typescript, but in this case there is no interaction at all
@@wcandillon, you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
Had anyone tested it on iOS with react-native-cli? I gives me an error with invalid svg path (screen: prnt.sc/pkn5t5). On Android it works. react-native: 0.60.5; react-native-svg: 9.11.1
Hi William you are awesome, I have one doubt now the WhatsApp and Messenger changed their audio slider or seek bar to a wave format can we do the same in react native?
for anyone interested i did a version for running the android my self based on this example that can run on both platforms. You can find the changes here github.com/panvourtsis/RNLiquidAnimation
Thanks for all the react native videos. When it comes to your course, would you add subtitle for the videos? It would be much easier to follow the lecture then.
There is an animation done in Cuberto at github.com/Cuberto/gooey-cell Can this be done in react native,i liked it very much and like to implement it, but i have no idea where to start
i recently see your videos. i am also a react native developer but i did not work on Animation. i request you to make a playlist of animation video from scratch to professional level. waiting for your response.
In your case, you have just 2 slides, what about more then 2? I tried add more slides, but when I drag the liquid swipe, all the rest of the slides come together. How can I indentify/trigger just one slide at a time?
If you want to do more than two slides, things get pretty hard, I've tried it myself. I were to do it now I would use the technic described at exyte.com/blog/swiftui-tutorial-slider-control
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
I mean do you have any tutorials which include a react native component with gradient and box shadow together it is hard to find any example, also perhaps animated scale of box shadow
Hi! You're amazing! This is incredible. I'm a Graphic Designer, but also I start studing about animations inside apps. I start using tools like adobe muse, lottie and after effects too, but I want to learn a little more. I know, my knowledge never gonna be like someone who studied code. If you know about something little easier for a designer begginer in animation and code, I'll be grateful
Thank you! In this particular example, we take a design tool (bezier curve) and try to do something programmatically with it by animating it. To learn react native, I've been recommended this course: www.leveluptutorials.com/tutorials/react-native-for-everyone/react-native-for-everyone (didn't try it personally). For learning RN animations, I've made a course at start-react-native.dev/. I hope this helps :)
@@wcandillon Looking forward to it. Whats your opinion on Mobx/MST in the realm of react native? In my experience it's been way more elegant than the other options.
Thank you so much for the turoial!!! I am struggling with have a text input behind the panhandler is it possible as the focus is always on the handler.. If you could have some insight on this would be much appeeciated!!!
Nice videos, I love this series. Can you try to do the animation on the header of Facebook’s app that when you scroll down the header hides and when you scroll up it shows again, but when you scroll down on the top a refresh control appears
@@wcandillon, you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
William, what tutorials/blogs/resources can you suggest for someone getting started with animating? I have no clue what the interpolating and clock things are and when to use them, and the reanimated docs are not really that helpful for new animators I feel
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
Looks amazing, good job! regarding the SVG tradeoffs due to layouting, i just got an idea, in theory you could use the yoga layout engine (which has a js binding) and create a wrapper for the svg elements that would convert flex styling using yoga to regular positioning. But anyway I guess getting it to work with native animations you would need to use yoga on the native side and that could be a bit more tricky I imagine.
@@wcandillon Hi i managed to run it after upgrading expo to v37 using expo update 37.0.0. But the liquid swipe is not working when used with masked view. Any idea how to fix that?
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
Here's the updated version of this tutorial: ua-cam.com/video/6jxy5wfNpk0/v-deo.html
Awesome!
William, I have to say this is your best video so far. Yes, it's experimental / proof of concept, but these kind of experiments push a framework forward. Thanks a lot for all the effort you put into researching and making these videos
Thanks a lot! And now having some distance with this problem we could remove the view masking out of the equation and also add some pagination. Maybe in future videos!
Simply Brilliant . I also saw this animation on my instagram but was struggling to understand how it worked and failed , But you did a great Job . Simply Awesome , Adding such advanced content to community is very Good , keep this up
Thank you for your support man :)
Ok this is outstanding!
Surprise!! I can't believe that kind of these animations can be crafted in RN. I'm using RN for many years and your channel is best place to farming new skills. Thanks for sharing your knowledge. recommended for everyones. keep up good vdo bro.
Thank you for your support 🙌🏻
@@wcandillon Can you help me out? I watch a lot of your videos already and have done react native for a year (still not full expert), but all of your videos I have huge difficulty following and it seems you are already in the middle of each project. Am I missing something important? How can I learn the entire project?
@@RatmanSays I've made a course at start-react-native.dev that I hope you'll find useful
@Space Elevator 2020 If you dont mind, this is my path: first, you need to familiar with Animated api in react-native (timing, spring, decay, event, interpolation, loop, sequence, parallel, stagger and pan responder). but built-in Animated api is not 100% native supported. Then, its a time for 'react-native-gesture-handler' (native version of PanResponder) and 'react-native-reanimated' (the syntax look like an assembly version of traditional Animated but fully native supported). Personally, at this point I understand around 80% of the vdo tutorials. the rest 20% is a Mathematics part which is blow my mind.
You are a React Native Prophet and Master!
Wow that was great. can i request sir? Can you make a tutorial of swipe list of delete or edit button with animation? I hope you nitice this comment😂😊😊😊
How to do it in Android studio?
You're amazing, I'm so glad I have found this channel. Keep it up!
Thank you for your support 🙌🏻
No prior reanimated experience is required for this course.
Quality content here, def subbed.
Can I make this without using Expo and Typescript? Or can I use both javacript and typescript in my project?
Hi Willian, you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
Can we find the android version code anywhere?
Blur efect for android like on iOS! like who want see this tutorial
You mean Wave? :) Weave is something else, hehe
autosubscribe !!!
I have tried as you show, for iOS it works as it should be, but for android I could see the black arrow, but the white liquid swipe is missing. Why is it?
Same with me, I cloned his code and get this result (a red thin border over the screen also appears istead of the white liquid swipe). Also tried to add this to my own project without expo and typescript, but in this case there is no interaction at all
@@guilhermepereira7924 can you help on how to clone this code? Or if possible can you share this with me?. Syam.yandamuri@gmail.com. Thank you.
can you help on how to clone this code? Or if possible can you share this with me?. Syam.yandamuri@gmail.com. Thank you.
is it possible to get multiple pages with this instead of just the two?
Best react native animation tutorials by far! Keep up the good work! I'm always waiting for your new content
Thank you so much for your support 🙌🏻Stay tuned for some great stuff ;-)
@@wcandillon, you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
ibb.co/nb5dJsZ
Why i get this kind of view..i have downloaded the boiler plate!! Help
My device is pixel 2 Android 10
Man you're amazing. Love your videos! keep up the good work.
Thank you man! It keeps me super motived :) The video was unlisted but it sounds like you were able to access maybe via its playlist? Interesting 😉
Had anyone tested it on iOS with react-native-cli? I gives me an error with invalid svg path (screen: prnt.sc/pkn5t5). On Android it works. react-native: 0.60.5; react-native-svg: 9.11.1
amazing video william thank you but can you do more of your video in js not tsx?
Awesome video, as usual. Where can I find the code for Android, I am not able to run the project also after replacing code in Weave.tsx as you said
Hi, the animation is great on ios but on android it isn't working
Reanimated 2 (with JSI) will probably solve this problem too! RN is just getting better and better
Hi William you are awesome, I have one doubt now the WhatsApp and Messenger changed their audio slider or seek bar to a wave format can we do the same in react native?
Thanks. Thanks for motivating me.. YOU ARE AWESOME
It don't work on android device with ejected project :( only on iOS
Same, I guess it's related to MaskViewIOS
@@guilhermepereira7924 Is there an implementation for android?
for anyone interested i did a version for running the android my self based on this example that can run on both platforms. You can find the changes here github.com/panvourtsis/RNLiquidAnimation
This is so cool, no material bullshit, real, innovative design!
William are you from earth? you gotta tell us!!!!
Thank you for your support, it means a lot!
@@wcandillon your content and fan engagement is awesome and you help a lot!
How do you start the project? I tried to go into the example folder and pod install. but it does not start
Thanks for all the react native videos. When it comes to your course, would you add subtitle for the videos? It would be much easier to follow the lecture then.
Yes, I plan to add captions indeed.
There is an animation done in Cuberto at github.com/Cuberto/gooey-cell
Can this be done in react native,i liked it very much and like to implement it, but i have no idea where to start
Oh, one flutter guy disliked this.
😂
i recently see your videos. i am also a react native developer but i did not work on Animation. i request you to make a playlist of animation video from scratch to professional level. waiting for your response.
This would be my online course at start-react-native.dev/
In your case, you have just 2 slides, what about more then 2? I tried add more slides, but when I drag the liquid swipe, all the rest of the slides come together. How can I indentify/trigger just one slide at a time?
If you want to do more than two slides, things get pretty hard, I've tried it myself. I were to do it now I would use the technic described at exyte.com/blog/swiftui-tutorial-slider-control
@@wcandillon
fantastic work. Do you have the github of what you did with the 2 slides?
I'm Brazilian and my name is William
did figure out how to do it yet?
cant it be used in framer?
Hello Dear William, Could you learn how to use music notation (load and visualization) in React native please !! ,Thank Youuuuuuuuuuuuuuuuuuuuu
Is there an example you could provide me with?
@@wcandillon kind of abcjs www.abcjs.net/#what
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
Even though i known destructuring
Whats happing in that syntax
He's passing props to the component... If I'm not wrong
do you have any code with an example of react native gradient with box shadow? its driving me crazy not being able to find an example
What do you mean exactly?
I mean do you have any tutorials which include a react native component with gradient and box shadow together it is hard to find any example, also perhaps animated scale of box shadow
@@codebee3050 Can you send me a visual example that would be using the technic you are describing?
😍
Jhonny Sins codes as well??????
Hi! You're amazing! This is incredible. I'm a Graphic Designer, but also I start studing about animations inside apps. I start using tools like adobe muse, lottie and after effects too, but I want to learn a little more. I know, my
knowledge never gonna be like someone who studied code. If you know about something little easier for a designer begginer in animation and code, I'll be grateful
Thank you! In this particular example, we take a design tool (bezier curve) and try to do something programmatically with it by animating it. To learn react native, I've been recommended this course: www.leveluptutorials.com/tutorials/react-native-for-everyone/react-native-for-everyone (didn't try it personally). For learning RN animations, I've made a course at start-react-native.dev/. I hope this helps :)
having trouble expo starting the file, have npm'ed installed, do you have docs to your source code?
It's not an expo project, you can't start it with expo
Would be nice to see you saying about redux, redux saga etc. Btw, you are a god! thx for teaching us
I'm gonna start to talk about these topics as well, please bare with me ;-)
@@wcandillon Looking forward to it. Whats your opinion on Mobx/MST in the realm of react native? In my experience it's been way more elegant than the other options.
pelado sos mi ídolo
Wooowww tried react native but did Not used animated it seems amazing. Your video is great and well explained.
Thanks man, really appreciate it!
Thanks for the awesome tutorial. How do we add more than two slides?
For more than 2 slides, I would really refer to this tutorial: exyte.com/blog/swiftui-tutorial-slider-control
Very great, thanks
Very great, thanks
Thank you so much for the turoial!!!
I am struggling with have a text input behind the panhandler is it possible as the focus is always on the handler..
If you could have some insight on this would be much appeeciated!!!
I love all!!! Can you post the code for work on android for me, Im learning too many and would to know how to implement on android too.
awesome !!
Nice videos, I love this series. Can you try to do the animation on the header of Facebook’s app that when you scroll down the header hides and when you scroll up it shows again, but when you scroll down on the top a refresh control appears
I'll look into it thks :)
@@wcandillon, you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
amazing
few days ago, I integrate this animation as pod to the project. and then thought it is impossible in React Native. but you implemented. Awesome!!!
With Reanimated 2 (coming this year) it will be even easier (and faster!!). Thanks for sharing
Hi. Is there any way to create an android vpn app with react native? I didn't get any official doc please help me out.
William, what tutorials/blogs/resources can you suggest for someone getting started with animating? I have no clue what the interpolating and clock things are and when to use them, and the reanimated docs are not really that helpful for new animators I feel
Shameless plug: start-react-native.dev :)
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
@@guilhermepereira7924 masked view of the community now works with the animated svg
Awesome ! You done a very great job ! That's a beautiful result, really appreciate that. Thanks for the vid.
You're amazing, but iwant know the name of software you are used to record videos like that :)
Thanks man! I use screenflow :)
amazing job! Keep the good work William
Thank you for your support!
This is AWESOME! Got me excited about RN animations again
Thank you 🙌🏻So glad to read that!
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
Looks amazing, good job! regarding the SVG tradeoffs due to layouting, i just got an idea, in theory you could use the yoga layout engine (which has a js binding) and create a wrapper for the svg elements that would convert flex styling using yoga to regular positioning. But anyway I guess getting it to work with native animations you would need to use yoga on the native side and that could be a bit more tricky I imagine.
super video . j'ai bcp appris . l'accent par contre on dirait un ch'tit qui parles Anglais hahaha :D
oui je suis ch'ti :)
@@wcandillon moi aussi bilouuute mdr
awesome!! this what i have been looking for.
yes 🙌🏻
You just got a new subscriber.. Great content.. Keep coming
This is really awesome. Can we get the source code for react-native?
Cool！
Which plug in is that 10:30 where you click on a function and get redirected into the path brother?
Hi, is there a way to make this work on android? it only works in ios :(
I've been contacted by some people that managed to make it work on Android. I pinged them to see how we can modify the example to work out of the box.
@@wcandillon thank you so much william 😊. I tried with RNC Maskedview.but to make it work we have to eject from expo.so i didn't try it to that extent
Can you connect me with someone who did it on android? kasunforweb@gmail.com is my email
@@kasunthilina9655 You need reanimated 1.8.0 and the latest version of masked view it looks like
@@wcandillon Hi i managed to run it after upgrading expo to v37 using expo update 37.0.0. But the liquid swipe is not working when used with masked view. Any idea how to fix that?
This is GOLD!! I WISH I FOUND THIS CHANNEL EARLIER
You are awsome
Can you please make a cool calendar with hours time line?
ok this is actually amazing ! Really hard but amazing ! Keep up the good work!
This is awesome I'm subbing
Thank you for your support!
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
thanks for your efforts man we really appreciate it
Thank you for your support!
Is the start react native in JSX ot TSX?
Both! We use TSX but since we use babel directly, it's just JS + some type annotations which you can ignore.
what all plugins you use in visual studio code?
This is great!
Like your French accent ✌️
The code in android PLEASE
He just did again.
🙌🏻
Doing awesome job!
Thank you Oleg 🙌🏻
What is that VS Code theme?
Palenight operator
Dracula is awesome too
Impressive to see! Keep up the great work 👍
Thank you for your support
@@wcandillon , you explain the Android part in the end, but it wasn't clear, and i couldn't read all the code (you didn't coded showing us, you just showed the code done and explained a bit about it). By the way, the code in your git is incomplete :(
That's brilliant
Thank you :)
Wow! You're amazing
been waiting for this !
you had me hooked at "oooked"
je t adore mec !
punaise merci mec, ca fait plaisir!
Thanks William Candillon ❤
as always, lesson of quality!
Thank you :)
what emulator do you use.?
Cristhian Tito He was using XCode/iPhone Simulator. It’s Mac only. In terms of CLI he was using Expo.
yes been waiting for the react native version of this for ages!!!!
Is there a web/React Js version that you're aware of?
@@eternalog1c I have one as .jsx to reactjs workling 100% send me msg on instagram instagram.com/thomas_reolon/