React Native Gesture Handler and Reanimated Tutorial
HTML-код
- Опубликовано: 19 июн 2024
- 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 
Наука
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.
For real, was thinking the same thing. I am glad William takes the extra time because WE DO NOTICE!
Yeah
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
Wow this is so good! Perfect approach to teaching! 👏👏
The little preview at the begining of the key code required is super good!
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
Amazing work as usual, William. Thanks for another great video.
This is really awesome ! I was really inexperienced with react native gesture handler and I understood everything! Thank you :)
Perfect work as usual William, hurray !
I was following you from 500 subs, right now the video quality is extremly good ♥️
Woah thank you for being on this journey with me :) Any tutorial request for me?
O MY God the quality is amazing!!!!! ❤️
you are the best react-native coder
It's amazing to see how easy is it to build with reaniamted2.
Nicely done.
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. 🚀🚀
Video tutorial that is on another level..
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 .
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?
Fantastic, love you videos, I have top app in astrology sphere, will play with your example
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?
This is done using triogometry (ruclips.net/video/-lF7sSTelOg/видео.html). I might do a dedicated tutorial on that.
love it!
Amazing 👏
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?
Awesome as always. William, would you please make a video of how to make the circular theme color change like on Telegram please?
this one is 💯 on my radar ☺️
Love it 👏
That intro so sliccc!!
Nicely done. How hard would it be when we swipe card that it goes to the end and we have loop instead of shuffle?
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?
Brilliant, as usual, have a question, have you ever use react native wix navigation? What is the cons?
I just love react-native-navigation 🤷🏼♂️
Nice!
Amazing video, please make a video about animation like google photos and apple photos, if you pinch and zoom the grid layout will change
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🙃
thank you
Love your accent! Oh, and content :)
Fabulous
Need more openGL/webGL challenges!
We're about to have a full focus on Skia, so it's one level up OpenGL but there are also shaders and stuff ;-)
what kind of set up installment I should prepare here? I'm using expo
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???
could you share small screen recording to showcase these behaviours?
@@wcandillon Any other platform where we can connect???
William, that's a really nice tutorial, thanks a lot. May I ask you, what are the VSCode plugins that you use?
which one exactly?
@@wcandillon the VsCode extensions that you use, I got really interested in the one providing the auto-complete xD
@@wcandillon me too... It's seems really cool, and efficient.
could you share, please?
@@r.h.u.k.a it's github copilot
@@wanjohi it's github copilot
Hello I have a problem where elevation does not wrap around Image element when rotateX is used. I am using android.
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?
could you share a small screen recording of this? I would like to love to take a look
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! ruclips.net/video/trogHBD7Nwg/видео.html
@@wcandillon ^
How to optimize code to work well on Android? Thanks
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. (((
react native best
Can u share to me name extention suggest syntax, pleases
와 이형 개쩌네. :)
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.
Vs Code theme ???
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
Facing the same issue
wuhuuu programming show
Hi ! I'm discovering your channel. Are you French ? Or French native speaker ?
I'm french originally but now live in Zürich
@@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 😀
@@ggousier pareil peut etre pour 2022 je met un focus pour ameliorer l'accent :)
@@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 ! .
I am searching a way for crd on deck like 1st one in intro
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: ruclips.net/video/-lF7sSTelOg/видео.html
@@wcandillon thanks.
You are nice man.
Btw when will be tutorial for reaxt native skia. I see in Twitter about that
@@mohdsajidshaikh4291 hopefully before the end of year holidays, but please keep it a secret 😉
@@wcandillon ok sir
Video Request: Can it be done in React Native? "Google Lens Android App"
First 😎
please do past bottom tab navigators with JavaScript and Reactnative...
second :p
can somebody plz explain me snapPoint
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.
@@marjomedved5318 tysm
Can it be done in react native ? Hey Siri button