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

  • @mefaba5363
    @mefaba53633 жыл бұрын

    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

    @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

    @bigbadcatbigbcy2933

    8 ай бұрын

    That's goes for every technology. They can only teach you beginner stuff rest is up to your skills and intelligence@@samidebayroune3478

  • @shortkeys73
    @shortkeys733 жыл бұрын

    Damn this intro gave me the shivers. So baller, with the sweet animation and Ratatat rocking out. Awesome job!

  • @ben7226
    @ben72263 жыл бұрын

    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.

  • @alexndreazevedo
    @alexndreazevedo2 жыл бұрын

    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 🚀

  • @avinashkumarsingh8492
    @avinashkumarsingh84923 жыл бұрын

    I like your videos before it's started. Because I know I will learn something new. Thank you very much for making awesome content.

  • @skate211thrasher
    @skate211thrasher2 жыл бұрын

    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 🤩

  • @notjustdev
    @notjustdev3 жыл бұрын

    Awesome video as always William. I learned a lot

  • @wanjohi

    @wanjohi

    3 жыл бұрын

    Aaaah!😂 I see you're here too!

  • @Robin_sogeking
    @Robin_sogeking Жыл бұрын

    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

    @jdnichollsc

    9 ай бұрын

    Si soy!

  • @simonswiss
    @simonswiss3 жыл бұрын

    Elles sont vraiment bien faites tes videos, William. Et joli appart a Zurich! Salutation Suisse Romandes (1800 Vevey) depuis... Sydney en Australie 😅

  • @AbhishekSingh-rj2we
    @AbhishekSingh-rj2we3 жыл бұрын

    Super! loved the simplicity of it

  • @GuilleAcosta124
    @GuilleAcosta1243 жыл бұрын

    WOW! this is awesome, thanks for sharing!

  • @jasynwiener
    @jasynwiener2 жыл бұрын

    Such a great tutorial. Thanks!

  • @oguzhanturker8903
    @oguzhanturker89033 жыл бұрын

    now i can be able to build liquid swipe

  • @MrChrisk8er
    @MrChrisk8er3 жыл бұрын

    Great explanation :) Thank you

  • @maxpop2802
    @maxpop28022 жыл бұрын

    Wow i have now so much interest in learning these stufffsss cool af!!!

  • @bekroz
    @bekroz2 жыл бұрын

    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.

  • @anatanieldiogo
    @anatanieldiogo3 жыл бұрын

    You're the best! Iam from Angola.

  • @arpitbhalla
    @arpitbhalla3 жыл бұрын

    Amazing tutorial!!!

  • @tamjuh212
    @tamjuh2123 жыл бұрын

    You're the best, thank you!

  • @bekroz
    @bekroz2 жыл бұрын

    Here before you hit MILLIONS! 💪😃

  • @abdulazizimamal-deen8984
    @abdulazizimamal-deen89843 жыл бұрын

    thank you very much, for this great video God bless you

  • @gldev8191
    @gldev81913 жыл бұрын

    nice feature but also damn editing is sooo good!

  • @furkanuzun8910
    @furkanuzun89103 жыл бұрын

    so it deserve more than a like.perfect!

  • @basirbaig2746
    @basirbaig27462 жыл бұрын

    Thankyou..for such a great content..

  • @nro337
    @nro3373 жыл бұрын

    Beautiful!

  • @szy0syz
    @szy0syz3 жыл бұрын

    Good ux ! Great tutorial !

  • @palachokrab5711
    @palachokrab57113 жыл бұрын

    Wow amazinggg 💚

  • @TyHudson
    @TyHudson2 жыл бұрын

    that's really cool and fun

  • @tho_norlha
    @tho_norlha2 жыл бұрын

    Super mec !

  • @codeVictor
    @codeVictor3 жыл бұрын

    Nice intro!!!! And video

  • @charlielee3945
    @charlielee3945 Жыл бұрын

    Thank you for bringing Ratatat back into my life :DDDD

  • @wcandillon

    @wcandillon

    Жыл бұрын

    I would really really love to be able to license the song for my videos but it's hard 🤦🏼‍♂️

  • @techdailyafrica
    @techdailyafrica3 жыл бұрын

    you look alot like James Clear , great content

  • @junioroga
    @junioroga3 жыл бұрын

    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!

  • @ayoubaitbahllou3719
    @ayoubaitbahllou37192 жыл бұрын

    Thanks William

  • @PanStoyan
    @PanStoyan3 жыл бұрын

    It's awesome

  • @merveillevaneck5906
    @merveillevaneck59063 ай бұрын

    "how easily" ---- aahhhh yes, very easy mr senior engineer man xP

  • @techienomadiso8970
    @techienomadiso89702 жыл бұрын

    You are crazily intelligent 🤦🔥

  • @CyCoool
    @CyCoool3 жыл бұрын

    Merci !!

  • @truonggiangao4982
    @truonggiangao49823 жыл бұрын

    Thanks i like it

  • @umaralfaruq1304
    @umaralfaruq13043 жыл бұрын

    william you are is king

  • @tamacroft
    @tamacroft3 жыл бұрын

    awesome

  • @salik619
    @salik6192 жыл бұрын

    Hey William, a Kanban board with Reanimated would be a great idea since it's almost used in all productivity apps.

  • @testingchannel7312
    @testingchannel73123 жыл бұрын

    You’re Genius…..

  • @mrahamed5985
    @mrahamed59853 жыл бұрын

    Awesome

  • @maxbranco7321
    @maxbranco73213 жыл бұрын

    3Blue1Brown vibes, I love it

  • @spillcode9462
    @spillcode94623 жыл бұрын

    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?

  • @adriatomas4972
    @adriatomas49723 жыл бұрын

    i think will be cleaner to set the login of lines 55 and 56 into function like prevSlide() and nextSlide()

  • @olawaleakinbolawaakinro9777
    @olawaleakinbolawaakinro97773 жыл бұрын

    Cool RN gestures

  • @QuebrandoParadigmas
    @QuebrandoParadigmas3 жыл бұрын

    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

    @shaunbeh8293

    3 жыл бұрын

    vscode with tabnine extension

  • @AngeloSanfilippo
    @AngeloSanfilippo Жыл бұрын

    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

  • @nurkholis9920
    @nurkholis99203 жыл бұрын

    Diko should watch this

  • @hanifmohammad901
    @hanifmohammad9013 жыл бұрын

    Hello sir How to set video as splash screen in react native app ? Please reply me

  • @marcotas
    @marcotas3 жыл бұрын

    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

    @wcandillon

    3 жыл бұрын

    Hey Marco, I was a longtime screenflow user, I now use Davinci Resolve.

  • @marcotas

    @marcotas

    3 жыл бұрын

    @@wcandillon thank you for your quick reply! Appreciate it! 🙏🏻👍🏻

  • @minimatrix
    @minimatrix3 жыл бұрын

    Loving the intro video! Let me guess, remotion?

  • @wcandillon

    @wcandillon

    3 жыл бұрын

    Is there another tool that exists? 🤔😉

  • @jayg5123

    @jayg5123

    3 жыл бұрын

    @@wcandillon how did you implemented this with remotion ? Its looks very much complex. I am curious to know.

  • @wcandillon

    @wcandillon

    3 жыл бұрын

    @@jayg5123 is this tutorial helpful: kzread.info/dash/bejne/i6iXq7CImpXdZco.html I might make more content on this topic.

  • @jayg5123

    @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🙌.

  • @obc993
    @obc9932 жыл бұрын

    🤯 🤯 🤯 🤯

  • @lawful_neutral
    @lawful_neutral2 жыл бұрын

    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?

  • @dheerajy2344
    @dheerajy23443 жыл бұрын

    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

  • @techyvivekraj
    @techyvivekraj3 жыл бұрын

    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

    @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

  • @psyx
    @psyx3 жыл бұрын

    What version of reanimated did you use in this video?

  • @vkepels
    @vkepels3 жыл бұрын

    гений

  • @Archcorsair
    @Archcorsair3 жыл бұрын

    I see you used the noise3d background dots in the slides :)

  • @wcandillon

    @wcandillon

    3 жыл бұрын

    I'm so happy you noticed ;-)

  • @montaderali8656
    @montaderali86563 жыл бұрын

    Could this be done with expo ? I'm just starting to learn it

  • @MinhTechie
    @MinhTechie2 жыл бұрын

    Hi William. How do you make such a cool intro?

  • @mohamedcherif1996
    @mohamedcherif19963 жыл бұрын

    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

    @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

    @karlmikko

    3 жыл бұрын

    William has some tutorials already on how to do the filters.

  • @DutchLatinLars
    @DutchLatinLars3 жыл бұрын

    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

  • @reveriches1785
    @reveriches17853 жыл бұрын

    Hai sir, i have question about your opinion, so do you think it's better to use expo or react native cli/default?

  • @wcandillon

    @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

  • @r1jsheth
    @r1jsheth3 жыл бұрын

    How smooth this will be on Android?

  • @anythingeverything7088
    @anythingeverything70882 жыл бұрын

    can you make this for ionic - angular??

  • @ricardomejias7957
    @ricardomejias79573 жыл бұрын

    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

    @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

    @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

    @thedeveloper9896

    3 жыл бұрын

    @@ricardomejias7957 how you make the button at final screen

  • @ricardomejias7957

    @ricardomejias7957

    3 жыл бұрын

    @@thedeveloper9896 just pass the current index prop to the Slide component and conditionally render the button

  • @thedeveloper9896

    @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 :(

  • @programming9615
    @programming96153 жыл бұрын

    What is the name of this VSC-theme? I like it!

  • @wcandillon

    @wcandillon

    3 жыл бұрын

    Palenight operator

  • @monisankarnath
    @monisankarnath Жыл бұрын

    Is there a SVG mask example available?

  • @nishitsarvaiya1474
    @nishitsarvaiya14743 жыл бұрын

    What is the font you are using?

  • @mohamedosamakamel8402
    @mohamedosamakamel84022 жыл бұрын

    can we do something instead of going to js thread to update state?!!!

  • @tristanheilman3967
    @tristanheilman39672 жыл бұрын

    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

    @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'

  • @lawful_neutral
    @lawful_neutral2 жыл бұрын

    Any news on updating this example to use the Svg Mask to improve performance on Android?

  • @wcandillon

    @wcandillon

    2 жыл бұрын

    yes now we have react native skia and we will rebuild this demo with Skia to improve performance on Android

  • @zachariaslevander8108

    @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!

  • @front-enddeveloper1812
    @front-enddeveloper18123 жыл бұрын

    Tem curso na udemy?

  • @descode_id
    @descode_id3 жыл бұрын

    I want to join your course. But only a month. Can I?

  • @arupde6320
    @arupde63203 жыл бұрын

    upload videos on regular basis ..

  • @CrazyChikenOMG
    @CrazyChikenOMG2 жыл бұрын

    how to run this project??

  • @MrJoker-ze6bb
    @MrJoker-ze6bb3 жыл бұрын

    Would you make videos for beginners please

  • @akanakdeniz8914
    @akanakdeniz8914 Жыл бұрын

    dont work upss ::( reanimated 2.14.4

  • @MrRamani
    @MrRamani3 жыл бұрын

    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

  • @vsx8179
    @vsx81793 жыл бұрын

    please post to Odysee so I can watch your videos!

  • @FunwithBlender
    @FunwithBlender Жыл бұрын

    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

    @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

    @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

    @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

    @FunwithBlender

    Жыл бұрын

    im not down voting the video because I like you but my comments remains and i hope it helps

  • @ajaykumaryadav6564
    @ajaykumaryadav65643 жыл бұрын

    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.

  • @josephorji8331
    @josephorji83313 жыл бұрын

    its lagging on a real android device

  • @wcandillon

    @wcandillon

    3 жыл бұрын

    The example on Github has been updated for Android, let me know what you think.

  • @ctoxyz
    @ctoxyz2 жыл бұрын

    was stoked until i saw a paywall to code.. NOTHING makes me more sick, than charging for something like this

  • @wcandillon

    @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)

  • @jonathanmutala8179
    @jonathanmutala81793 жыл бұрын

    Why you don't speak french ?

  • @DanielNistrean
    @DanielNistrean3 жыл бұрын

    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

    @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

    @williammendonca9975

    3 жыл бұрын

    @@wcandillon On android it was really slow. What solution to improve on android?

  • @wcandillon

    @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

    @williammendonca9975

    3 жыл бұрын

    @@wcandillon Many thanks William for the incredible work and for the simplicity and elegance of the code. Brazilian William thanks

  • @yashagrawal3367

    @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?

  • @ajaykumaryadav6564
    @ajaykumaryadav65643 жыл бұрын

    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.

  • @ajaykumaryadav6564
    @ajaykumaryadav65643 жыл бұрын

    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.