Liquid Swipe - “Can it be done in React Native?”

[@mefaba5363]

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]

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]

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

[@shortkeys73]

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

[@notjustdev]

Awesome video as always William. I learned a lot

[@wanjohi]

Aaaah!😂 I see you're here too!

[@avinashkumarsingh8492]

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

[@alexndreazevedo]

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 🚀

[@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]

Si soy!

[@simonswiss]

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

[@ben7226]

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.

[@skate211thrasher]

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 🤩

[@oguzhanturker8903]

now i can be able to build liquid swipe

[@charlielee3945]

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 🤦🏼‍♂️

[@bekroz]

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.

[@maxpop2802]

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

[@AbhishekSingh-rj2we]

Super! loved the simplicity of it

[@furkanuzun8910]

so it deserve more than a like.perfect!

[@GuilleAcosta124]

WOW! this is awesome, thanks for sharing!

[@bekroz]

Here before you hit MILLIONS! 💪😃

[@anatanieldiogo]

You're the best! Iam from Angola.

[@gldev8191]

nice feature but also damn editing is sooo good!

[@TyHudson]

that's really cool and fun

[@basirbaig2746]

Thankyou..for such a great content..

[@MrChrisk8er]

Great explanation :) Thank you

[@arpitbhalla]

Amazing tutorial!!!

[@umaralfaruq1304]

william you are is king

[@techienomadiso8970]

You are crazily intelligent 🤦🔥

[@abdulazizimamal-deen8984]

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

[@nro337]

Beautiful!

[@techdailyafrica]

you look alot like James Clear , great content

[@merveillevaneck5906]

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

[@lawful_neutral]

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?

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

[@tamjuh212]

You're the best, thank you!

[@codeVictor]

Nice intro!!!! And video

[@palachokrab5711]

Wow amazinggg 💚

[@lawful_neutral]

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

[@wcandillon]

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!

[@marcotas]

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]

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

[@marcotas]

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

[@szy0syz]

Good ux ! Great tutorial !

[@ShivanshBangar-b9m]

how did you create the animations in the explanations? 2:20

[@ayoubaitbahllou3719]

Thanks William

[@Archcorsair]

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

[@wcandillon]

I'm so happy you noticed ;-)

[@tho_norlha]

Super mec !

[@spillcode9462]

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?

[@ricardomejias7957]

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]

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]

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

@@ricardomejias7957 how you make the button at final screen

[@ricardomejias7957]

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

[@thedeveloper9896]

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

[@DutchLatinLars]

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

[@maxbranco7321]

3Blue1Brown vibes, I love it

[@monisankarnath]

Is there a SVG mask example available?

[@junioroga]

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!

[@minimatrix]

Loving the intro video! Let me guess, remotion?

[@wcandillon]

Is there another tool that exists? 🤔😉

[@jayg5123]

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

[@wcandillon]

@@jayg5123 is this tutorial helpful: kzbin.info/www/bejne/j6XGeoGFn5eqa8k I might make more content on this topic.

[@jayg5123]

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

[@techyvivekraj]

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]

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

[@hanifmohammad901]

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

[@truonggiangao4982]

Thanks i like it

[@reveriches1785]

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

[@wcandillon]

I'm a huge expo fan. Especially since they have more and more support for workflows where custom native code is needed: kzbin.info/www/bejne/npmycn5vh9Bkps0

[@PanStoyan]

It's awesome

[@QuebrandoParadigmas]

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]

vscode with tabnine extension

[@mohamedcherif1996]

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]

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]

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

[@MinhTechie]

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

[@salik619]

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

[@r1jsheth]

How smooth this will be on Android?

[@montaderali8656]

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

[@mrahamed5985]

Awesome

[@psyx]

What version of reanimated did you use in this video?

[@anythingeverything7088]

can you make this for ionic - angular??

[@testingchannel7312]

You’re Genius…..

[@adriatomas4972]

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

[@programming9615]

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

[@wcandillon]

Palenight operator

[@tamacroft]

awesome

[@olawaleakinbolawaakinro9777]

Cool RN gestures

[@nishitsarvaiya1474]

What is the font you are using?

[@mohamedosamakamel8402]

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

[@CyCoool]

Merci !!

[@nurkholis9920]

Diko should watch this

[@descode_id]

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

[@CrazyChikenOMG]

how to run this project??

[@dheerajy2344]

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

[@obc993]

🤯 🤯 🤯 🤯

[@tristanheilman3967]

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]

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'

[@vkepels]

гений

[@front-enddeveloper1812]

Tem curso na udemy?

[@akanakdeniz8914]

dont work upss ::( reanimated 2.14.4

[@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]

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

[@arupde6320]

upload videos on regular basis ..

[@MrJoker-ze6bb]

Would you make videos for beginners please

[@ajaykumaryadav6564]

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.

[@vsx8179]

please post to Odysee so I can watch your videos!

[@MrRamani]

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

[@ctoxyz]

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

[@wcandillon]

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)

[@josephorji8331]

its lagging on a real android device

[@wcandillon]

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

[@DanielNistrean]

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]

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]

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

[@wcandillon]

​@@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]

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

[@yashagrawal3367]

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

[@jonathanmutala8179]

Why you don't speak french ?

[@jasynwiener]

Such a great tutorial. Thanks!

[@ajaykumaryadav6564]

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]

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.