React Native Gesture Handler and Reanimated Tutorial

Learn React Native Gestures and Animations at start-react-native.dev/
This tutorial was inspired by an example built by Paul Henschel: codesandbox.io/embed/j0y0vpz59
Source code: github.com/wcandillon/can-it-...
For the boilerplate, simply use the tarot-starter2 branch.
Two videos to dig further:
The Heart of React Native Transform - • The Heart of React Nat...
How to calculate the width of the tilted card - • The Math behind Animat...
Chapters
0:00 Intro
3:44 Build
22:10 Credits

[@martinbalke1843]

This is the highest quality tutorial I've ever seen. Been subscribed for a few years and you have seriously leveled up over that time.

[@Archcorsair]

For real, was thinking the same thing. I am glad William takes the extra time because WE DO NOTICE!

[@bapimajhi7991]

Yeah

[@access2emma]

i'm 100% in agreement with you. I like how he breaks down the whole process from the word go before he started coding. Great work :D

[@aprilmintacpineda2713]

Wow this is so good! Perfect approach to teaching! 👏👏

[@karlmikko]

The little preview at the begining of the key code required is super good!

[@hieudaongoc2680]

Incredible work as always! Im trying to build a graphic design app and this is the best tutorial I need on animations and interactive components in RN

[@MarcoScapelitte]

Amazing work as usual, William. Thanks for another great video.

[@exary37]

This is really awesome ! I was really inexperienced with react native gesture handler and I understood everything! Thank you :)

[@simple-belge]

Perfect work as usual William, hurray !

[@dibayuin7859]

I was following you from 500 subs, right now the video quality is extremly good ♥️

[@wcandillon]

Woah thank you for being on this journey with me :) Any tutorial request for me?

[@hoihoanginh452]

you are the best react-native coder

[@codingmaster5224]

O MY God the quality is amazing!!!!! ❤️

[@oguzhanturker8903]

It's amazing to see how easy is it to build with reaniamted2.

[@HeightAboveSeaLevel]

Nicely done.

[@saheelsapovadia2354]

Awesome, I guess few changes in the library have been made. Check the final version of this code in the master branch of the repository given by him. 🚀🚀

[@kyawsoehein3075]

Hi, I am new to react native animation and just started to learn by watching tutorials. May I know how did you practice yourself to be able to build these kind of animations? Can you make a video about your experience and the things you have done to reach this level?

[@ToniLiem]

Video tutorial that is on another level..

[@caliwolf7150]

love it!

[@thienvan5940]

Love it, Thank you for beautiful animation. At 24:04 , I see the animation that looked really special. Do you have a video on how to do this?

[@wcandillon]

This is done using triogometry (kzbin.info/www/bejne/Y52paKaJicqfhck). I might do a dedicated tutorial on that.

[@amindusaputhanthri]

Amazing 👏

[@niklasgrewe]

thank you for your awesome content for react native 👍 could you also make a video about the discord swipe navigation? Could it be done using react-navigation and reanimated?

[@sviatvetrov6594]

Fantastic, love you videos, I have top app in astrology sphere, will play with your example

[@jasminfajkic6946]

Nicely done. How hard would it be when we swipe card that it goes to the end and we have loop instead of shuffle?

[@ngoclong7121]

Love it 👏

[@SochetraNOV]

I just have an idea about making card animation an hour ago then you posted the video, 😂😂. Anyway can't wait for your amazing next content .

[@chrislloyd1734]

I am currently writing an App for Tarot. Sorry to say I have already done all of this king of stuff and lots more using just Animated. Laying out cards, turning them over and shuffling. Just one question that maybe you could help with.... When I rotateX the cards in perspective and flip them over the back card seems to skew slightly and become visible in the corners. For the life of me I cannot figure out why? I do not use a 'rotateZ'. What is that?

[@lorkfongbot4683]

Awesome as always. William, would you please make a video of how to make the circular theme color change like on Telegram please?

[@wcandillon]

this one is 💯 on my radar ☺️

[@sreek91]

That intro so sliccc!!

[@alexsirenko9580]

Brilliant, as usual, have a question, have you ever use react native wix navigation? What is the cons?

[@wcandillon]

I just love react-native-navigation 🤷🏼‍♂️

[@arjuno7058]

what kind of set up installment I should prepare here? I'm using expo

[@user-op6fk9zg2y]

thank you

[@applearcade5332]

Amazing video, please make a video about animation like google photos and apple photos, if you pinch and zoom the grid layout will change

[@jacobcole1271]

Nice!

[@sourabhsoni148]

Hi, I need some help with my expo project,I want to use the Glass Morph effect for Card in my app but the BlurView in expo don't work on android, also I can't use the react-nave BlurView with expo , I love to use expo for all my project and don't want eject out of it. Help🙃

[@codewithalade5399]

Fabulous

[@marjomedved5318]

Hello I have a problem where elevation does not wrap around Image element when rotateX is used. I am using android.

[@aimenyaseen853]

Hey! these are the awesome that I have ever seen about react native. Would you please make a video on how to make flat list behave like game levels, like candy crush. Also to generate dynamic path for game levels in react native???

[@wcandillon]

could you share small screen recording to showcase these behaviours?

[@aimenyaseen853]

@@wcandillon Any other platform where we can connect???

[@phuocantd]

How to optimize code to work well on Android? Thanks

[@user-fn4go1ie1k]

at 6:40 when I move the block, I get this error `onGestureHandlerEvent' listener to be a function, instead got a value of 'object' type. (((

[@novaria]

Love your accent! Oh, and content :)

[@r.h.u.k.a]

William, that's a really nice tutorial, thanks a lot. May I ask you, what are the VSCode plugins that you use?

[@wcandillon]

which one exactly?

[@r.h.u.k.a]

@@wcandillon the VsCode extensions that you use, I got really interested in the one providing the auto-complete xD

[@wanjohi]

@@wcandillon me too... It's seems really cool, and efficient. could you share, please?

[@wcandillon]

@@r.h.u.k.a it's github copilot

[@wcandillon]

@@wanjohi it's github copilot

[@Dancarter8888]

I'm looking for a way in React Native to pull off a 3D spin animation on swipe (simiilar to the way spinning a pokestop in Pokemon Go interacts on swipe). Does anyone know where I can find a way to do this?

[@wcandillon]

could you share a small screen recording of this? I would like to love to take a look

[@Dancarter8888]

Here is an example. When the player swipes left or right it spins the circle with velocity. The circle keeps spinning with decreasing velocity until it comes to a stop. Thanks so much! kzbin.info/www/bejne/qqPSmHt4eZyBrck

[@Dancarter8888]

@@wcandillon ^

[@n_dudin]

Need more openGL/webGL challenges!

[@wcandillon]

We're about to have a full focus on Skia, so it's one level up OpenGL but there are also shaders and stuff ;-)

[@minhtringuyen242]

Can u share to me name extention suggest syntax, pleases

[@mixai7]

When I try with expo react native , card cannot move .only work in web view const x = useSharedValue(0); const y = useSharedValue(0); const cardStyle = useAnimatedStyle( () =>( { transform:[ { translateX : x.value }, { translateY : y.value } ] }) ) const gestureHandler = useAnimatedGestureHandler({ onActive: ({ translationX, translationY }) => { x.value = translationX; y.value = translationY; }, }) what are missing

[@saheelsapovadia2354]

Facing the same issue

[@Tay74514]

In a past life he was himself. If opportunity knocks and he’s not home, opportunity waits. He gave his father…the talk. He is, the most interesting man in the world.

[@atultiwaree6023]

Vs Code theme ???

[@r_alisher]

react native best

[@hwanNaNe]

와 이형 개쩌네. :)

[@ggousier]

Hi ! I'm discovering your channel. Are you French ? Or French native speaker ?

[@wcandillon]

I'm french originally but now live in Zürich

[@ggousier]

@@wcandillon Je me doutais bien que tu étais français. Nous avons un accent à nul autre pareil 😆. Je ne moque pas, j'ai un mal fou à me faire comprendre en anglais. Mais je ne désespère pas 😀

[@wcandillon]

@@ggousier pareil peut etre pour 2022 je met un focus pour ameliorer l'accent :)

[@ggousier]

@@wcandillon Garde ton accent buddy. Les gens te comprennent c'est le principal. Et puis peut-être que c'est le petit truc en plus de ta chaîne. Le frenchy accent. 😀 La fameuse French Touch ! .

[@mohdsajidshaikh4291]

I am searching a way for crd on deck like 1st one in intro

[@wcandillon]

I might do a dedicated tutorial on that. In the meantime, here is a video on trigonometry which will give clues on how to do it: kzbin.info/www/bejne/Y52paKaJicqfhck

[@mohdsajidshaikh4291]

@@wcandillon thanks. You are nice man. Btw when will be tutorial for reaxt native skia. I see in Twitter about that

[@wcandillon]

@@mohdsajidshaikh4291 hopefully before the end of year holidays, but please keep it a secret 😉

[@mohdsajidshaikh4291]

@@wcandillon ok sir

[@kamildoan]

wuhuuu programming show

[@DevendraYadav-sf6ry]

can somebody plz explain me snapPoint

[@marjomedved5318]

what is there to explain? it is a helper function which works like clamp. according to velocityX and drag direction it retuns a value you set as clamp.

[@DevendraYadav-sf6ry]

@@marjomedved5318 tysm

[@saisrivanth1536]

please do past bottom tab navigators with JavaScript and Reactnative...

[@MuditSen1234]

Video Request: Can it be done in React Native? "Google Lens Android App"

[@stackclever]

First 😎

[@trungslayer5802]

Can it be done in react native ? Hey Siri button

[@codingwithdidem]

second :p