Liquid Swipe - “Can it be done in React Native?”
Ғылым және технология
Learn React Native Gestures and Animations at start-react-native.dev/
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season4/src/LiquidSwipe
Boilerplate: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season4/assets/boilerplates
Approximate a circle with cubic Bézier curves: spencermortensen.com/articles/bezier-circle/
Chapters:
0:00 Intro
04:08 Masking
8:33 Gestures
26:14 Wave animations
42:48 Closing notes
Пікірлер: 138
This channel is one of the only places that you can continue to learn new things. So many other channels focusing beginner level tutorials, but I want this! We need this! Thanks William.
@samidebayroune3478
2 жыл бұрын
That’s the bad thing about The community all the courses and and the tutorials are basic I mean in some point you need to go to the next level but no one is doing advanced features in react
@bigbadcatbigbcy2933
8 ай бұрын
That's goes for every technology. They can only teach you beginner stuff rest is up to your skills and intelligence@@samidebayroune3478
Damn this intro gave me the shivers. So baller, with the sweet animation and Ratatat rocking out. Awesome job!
you are amazing, you are one of the channels that i can never imagine to be discontinued, you are doing very well and your videos are super helpful, so keep it up 😉 thank you.
I got used to watch this series from beautiful Zurich on bed time. In the next day, I always start very productive working on animations while speaking with French accent 😁 I really appreciate your work, William! Thanks for all the tutorials 🚀
I like your videos before it's started. Because I know I will learn something new. Thank you very much for making awesome content.
Man, i really like your work and I am always excited for new videos I would really love to support you through Patreon or any other platform so that you can continue doing awesome work 🤩
Awesome video as always William. I learned a lot
@wanjohi
3 жыл бұрын
Aaaah!😂 I see you're here too!
It's amazing, incredible, how much talent in one person, congratulations, don't stop making these types of videos, one day I would like to do even half of what you do
@jdnichollsc
9 ай бұрын
Si soy!
Elles sont vraiment bien faites tes videos, William. Et joli appart a Zurich! Salutation Suisse Romandes (1800 Vevey) depuis... Sydney en Australie 😅
Super! loved the simplicity of it
WOW! this is awesome, thanks for sharing!
Such a great tutorial. Thanks!
now i can be able to build liquid swipe
Great explanation :) Thank you
Wow i have now so much interest in learning these stufffsss cool af!!!
I fall in love with French developers. William Candillion, Bruno Simon. 😁😍😍😍 You explained great, though I didn't fully understand it yet. I'll come back to this topic later in the future. Thank you.
You're the best! Iam from Angola.
Amazing tutorial!!!
You're the best, thank you!
Here before you hit MILLIONS! 💪😃
thank you very much, for this great video God bless you
nice feature but also damn editing is sooo good!
so it deserve more than a like.perfect!
Thankyou..for such a great content..
Beautiful!
Good ux ! Great tutorial !
Wow amazinggg 💚
that's really cool and fun
Super mec !
Nice intro!!!! And video
Thank you for bringing Ratatat back into my life :DDDD
@wcandillon
Жыл бұрын
I would really really love to be able to license the song for my videos but it's hard 🤦🏼♂️
you look alot like James Clear , great content
Wonderful! I did it in my application and it was top! I would like to clarify a doubt, if I were going to make the "next" and "previous" buttons to set the index simulating the gesture handler animation, how would I do it? Thank you in advance, your videos have taught me a lot!
Thanks William
It's awesome
"how easily" ---- aahhhh yes, very easy mr senior engineer man xP
You are crazily intelligent 🤦🔥
Merci !!
Thanks i like it
william you are is king
awesome
Hey William, a Kanban board with Reanimated would be a great idea since it's almost used in all productivity apps.
You’re Genius…..
Awesome
3Blue1Brown vibes, I love it
Nice content. Having trouble adding a button though. When I add a button to a screen, it's not clickable. Any way to avoid this?
i think will be cleaner to set the login of lines 55 and 56 into function like prevSlide() and nextSlide()
Cool RN gestures
Awesome video !!! What does is the extension that draws those red and yellow lines on the code indicating that something is wrong or not used?
@shaunbeh8293
3 жыл бұрын
vscode with tabnine extension
Hi, thanks for your videos, I was able to replicate the liquid but I can't get the skip button to work which refers to the login page. I'm just starting to program. Thanks in advance for your reply
Diko should watch this
Hello sir How to set video as splash screen in react native app ? Please reply me
What program did you use to record your screen with your cam in this video? I also record vídeos for Brazilian people and I liked the disposition of your cam with fancy rounded corners and your iPhone screen along with your computer screen. I would appreciate if you could share which program you use! And congrats for the amazing video! Do you know how to do it with Flutter as well?
@wcandillon
3 жыл бұрын
Hey Marco, I was a longtime screenflow user, I now use Davinci Resolve.
@marcotas
3 жыл бұрын
@@wcandillon thank you for your quick reply! Appreciate it! 🙏🏻👍🏻
Loving the intro video! Let me guess, remotion?
@wcandillon
3 жыл бұрын
Is there another tool that exists? 🤔😉
@jayg5123
3 жыл бұрын
@@wcandillon how did you implemented this with remotion ? Its looks very much complex. I am curious to know.
@wcandillon
3 жыл бұрын
@@jayg5123 is this tutorial helpful: kzread.info/dash/bejne/i6iXq7CImpXdZco.html I might make more content on this topic.
@jayg5123
3 жыл бұрын
@@wcandillon yes it was helpful, I loved the way you use figma and remotion, So did you use interpolation for that curves? and svg masking for swiping colors? I am so much amazed with your intro 🙌. Video was fabulous💫.I am gonna definitly try remotion...and i am gonna see this how can i implement this on flutter. Thank you so much for this legit content🙌.
🤯 🤯 🤯 🤯
I can't seem to get a ScrollView to scroll from within the Slide of the LiquidSwipe. Has anyone come across and solved this issue?
Not only RN animation look smooth but editing also looks too good what tool or how to achieve bezier curve animation like at 3:14
Hi There, Can u help me that how to use Two Flatlist in React Native. BCZ When I m using it, it gives me separate Scrolling for each Flatlist and I have data in different Tables of Firebase. Pls help 😊
@Lixaned
2 жыл бұрын
What did you want to achieve with two FlatList? Will the second FlatList be rendered inside the first FlatList? If so, maybe you can wrap the second FlatList inside the ListHeaderComponent props of the first FlatList
What version of reanimated did you use in this video?
гений
I see you used the noise3d background dots in the slides :)
@wcandillon
3 жыл бұрын
I'm so happy you noticed ;-)
Could this be done with expo ? I'm just starting to learn it
Hi William. How do you make such a cool intro?
Hello William, that's a great video, i have a question about React native, it's possible to create app like Snapchat ( filters and face swap, ...exc ) using react native?
@wanjohi
3 жыл бұрын
Hi, I am not a pro developer, but this is possible with open-gl shaders or subscribe to third-party API, where you can get the filters from...✌🏾
@karlmikko
3 жыл бұрын
William has some tutorials already on how to do the filters.
I don't get it to work. I am getting this error message and I don't know why. Any help would be appreciated: > 33 | export enum Side { | ^ 34 | LEFT, 35 | RIGHT, 36 | NONE, Failed building JavaScript bundle. SyntaxError: D:\React_Native\metricvsimperial\App\Wave.jsx: Unexpected token, expected "{" (33:7) I copied the files from github directly to avoid typo's
Hai sir, i have question about your opinion, so do you think it's better to use expo or react native cli/default?
@wcandillon
3 жыл бұрын
I'm a huge expo fan. Especially since they have more and more support for workflows where custom native code is needed: kzread.info/dash/bejne/mpyDo61ygs6XoM4.html
How smooth this will be on Android?
can you make this for ionic - angular??
This is great, thanks! Although, I added a button to the final screen, and it´s not clickable, any idea how to solve this issue? Thanks !!!
@wcandillon
3 жыл бұрын
You need to use pointerEvents="none" for the left and right slide or just for the children to be clickable (if the button is on the left or right)
@ricardomejias7957
3 жыл бұрын
@@wcandillon I tried pointerEvents="none" everywhere, except right there where you just told me. It works like a charm now, thanks! I replaced the images with animations from the Lottie library and it looks amazing! Keep on the good work man, you´re a genius
@thedeveloper9896
3 жыл бұрын
@@ricardomejias7957 how you make the button at final screen
@ricardomejias7957
3 жыл бұрын
@@thedeveloper9896 just pass the current index prop to the Slide component and conditionally render the button
@thedeveloper9896
3 жыл бұрын
@@ricardomejias7957 im new to react im sorry but i dont know where to put the button can you give me some code pls. IM SO SORRY :(
What is the name of this VSC-theme? I like it!
@wcandillon
3 жыл бұрын
Palenight operator
Is there a SVG mask example available?
What is the font you are using?
can we do something instead of going to js thread to update state?!!!
Is there anyway to add inputs to these views? I've made my attempts but with the Stylesheet.absoluteFIll styles on the previous/next slides is giving me issues. I cannot get the input box on the current slide to update, only inputs on previous/next slides are clickable and editable because of being positioned above the current slide
@mohammedalhaddar2182
2 жыл бұрын
I'm kinda rusty on react native, but i think there is a way to propagate 'pointer' clicks to reach the components below the clicked component. I remember the property key/value contained something that has to do with the word 'pointer'
Any news on updating this example to use the Svg Mask to improve performance on Android?
@wcandillon
2 жыл бұрын
yes now we have react native skia and we will rebuild this demo with Skia to improve performance on Android
@zachariaslevander8108
Жыл бұрын
@@wcandillon Hi, thanks for the video, I just wanted to ask if you have had the chance to revisit this example using Skia, or if you have any guides/pointers on how it could be done using Skia? Thanks again for the great video!
Tem curso na udemy?
I want to join your course. But only a month. Can I?
upload videos on regular basis ..
how to run this project??
Would you make videos for beginners please
dont work upss ::( reanimated 2.14.4
hi hello we are great fan of you sir we want a small guide that if possible to create 2.5D Game like TOP war in react native?? and if possible then please share us pipeline to this hope you reply us thank YOu
please post to Odysee so I can watch your videos!
the file provided is not setup great for this tutorial, it has all your courses in and this is not even in an expo starter project just random files. The content you are zoomed in so i cant see the file structure.
@FunwithBlender
Жыл бұрын
there is no package.json or app.json file, no expo project, no explanation, if this is what 9 dollars a motnh gets you then it is under whelming as I spend more time doing guess work than following along I am 5 minutes in and i literally cant even start with you....i like you, as a fellow Swiss I wish you the best at this criticism is meant to be constructive.....also perhaps provide a repo to this project not all your stuff. Earn my trust by providing great content and then i will open my wallet with oyu but dont leave out stuff leaving me stuck
@FunwithBlender
Жыл бұрын
if you need th e file to follow a long and you dont really provide it...this tutorial is pointless ....lots of people will praise you for your great work but are they praising you for your teaching...were they able to follow along? If so how much teaching did they need, they must of been super experienced. whereas the vast majority wants to follow along but its not setup right
@FunwithBlender
Жыл бұрын
its literally not an expo cli or react native cli app, super demotivating not knowing what I am working with, what type of app i need to build etc....
@FunwithBlender
Жыл бұрын
im not down voting the video because I like you but my comments remains and i hope it helps
HELP NEEDED.....Brother I learn a lot form you. That's why when I got this problem and unable to solve it even after trying for 4 days so I come over here. Actually I am working on a small project alarm in react-cli, using react-native-push-notificaiton. The app works fine in foreground and background state. But when I close the app then there is no notification. Please HELP me brother , I really need to complete this project. And I already search about it a lot. but none of them working.
its lagging on a real android device
@wcandillon
3 жыл бұрын
The example on Github has been updated for Android, let me know what you think.
was stoked until i saw a paywall to code.. NOTHING makes me more sick, than charging for something like this
@wcandillon
2 жыл бұрын
you might be mistaken, not only this is open source but we are also open sourcing a new library that enables to build such example with much better perfomances (especially on android)
Why you don't speak french ?
Please run it on a real device. These animations could slowdown and worsen user experience. I want to see the real life performance. Thanks.
@wcandillon
3 жыл бұрын
The iphone you see on the screen is a real device. On Android the mask animation is slow because it is done by the CPU, I will update the example to fix it.
@williammendonca9975
3 жыл бұрын
@@wcandillon On android it was really slow. What solution to improve on android?
@wcandillon
3 жыл бұрын
@@williammendonca9975 the solution is to not use the mask on Android (which what the Cuberto agency did for they Android prototype) or use an svg mask. I will update the repo tomorrow to make the Android version blazing fast.
@williammendonca9975
3 жыл бұрын
@@wcandillon Many thanks William for the incredible work and for the simplicity and elegance of the code. Brazilian William thanks
@yashagrawal3367
3 жыл бұрын
@@wcandillon hey william!! if using svg mask will give better performance on android, then why not use them for ios too? Are their some benefit of using Mask on ios?
HELP NEEDED.....Brother I learn a lot form you. That's why when I got this problem and unable to solve it even after trying for 4 days so I come over here. Actually I am working on a small project alarm in react-cli, using react-native-push-notificaiton. The app works fine in foreground and background state. But when I close the app then there is no notification. Please HELP me brother , I really need to complete this project. And I already search about it a lot. but none of them working.
HELP NEEDED.....Brother I learn a lot form you. That's why when I got this problem and unable to solve it even after trying for 4 days so I come over here. Actually I am working on a small project alarm in react-cli, using react-native-push-notificaiton. The app works fine in foreground and background state. But when I close the app then there is no notification. Please HELP me brother , I really need to complete this project. And I already search about it a lot. but none of them working.