For me, your is the only video makes it clear on Reanimated, I have been struggling to understand Reanimated in React Native, both 1 and 2 none was clear to me until I found this. How explain every concept before using it is amazing. Keep it up sir
Hi Dan thanks for the feedback. Here's the info on my vscode theme setup: - vscode theme “Tokyo Night" ( marketplace.visualstudio.com/items?itemName=enkia.tokyo-night ); - palenight icons ( marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons ).
This is a great idea! I'm currently working on these videos related to the basic components of reanimated, but I'll soon start deepening animations by taking inspiration from existing apps. Stay tuned for more content on this channel!
@@Reactiive Highly appreciated! Great content. Maybe you can do a series on the reanimated 2 hooks and APIs as this is a region where I feel people struggle with the learning curve.
@@aditya_warrier I completely agree with you on this point. Currently I have already made an introductory video about the reanimated 2 APIs on my channel called "Introduction to Reanimated 2" and today I uploaded a video regarding the use of interpolate with the Animated.ScrollView. Thank you very much for your advice, I will definitely go in this direction!
Awesome! Thank you, this type of content is helping me a lot, I didn't know anything about animations in React Native and now I'm learning from you, thanks!
This is a great series of videos! I like the approach of going through step by step. It's the first time I feel like I'm developing a strong understanding of Reanimated's APIs.
I find typescript soo redudant..... Like if you are good with full-filling contracts then you know what to expect. I find this syntax so unreadable sometimes..
I use android emulator and it just worked if used by then errors appeared after a added in. Any help how to fix it. or maybe is there any other solution to replace
Can you please make a video about react-native-reanimated v2 installation? I am not sure where I did the mistake but this code is not working for me. I doubt any configuration mistakes in my code.
Hi ethio, thank you very much! I don't think there is unfortunately (but I'm not sure). Reanimated is a package that improves and changes very quickly and it's hard to have an always up-to-date pdf document
It isn't trivial at all! When you need to deal with multiple handlers it is usually needed to provide the waitFor and simultaneousHandlers props. Can you show me your specific use case where it is needed to handle multiple gestureHandlers?
Loved it, I have a question context.translationX is not set to zero in onEnd function but still when square goes back to its Origional position after releasing and then draging it again, it does not produce any issue with addition of old value context.tranationX, but why ?
Wow amazing explanation, i have coded react native for 2 years and I always failed to understand animated logics. And after watching your videos, it makes everything much more sense. Cant wait to apply these knowledge in my app. Thank you!
Your videos are really good. No jokes, most of the time, when I search for React Native tutorials, they are really shit and basically just copy the documentation in the worst way possible. You, however, cover everything that's really important when programming (I'm especially thankful that you include TypeScript) - Keep making those awesome videos. I'm a student so I can't donate money to you, but I'll keep like your videos, subscribed to you and will definitely recommend your channel! :)
Very good effect, but how can I give an initial coordinate to this square, such as the upper left corner or the lower right corner, I don't know how to give it an initial value
I copied the code from the github repository, I installed react native reanimated, the plugin, and react native gesture handler and it does not work. Any suggestions anyone?
I'm new here and searching for rotation animation and the way you try to teach is really appreciated . Going to subscribed. By the way I was looking for rotation of a circle, if you can help/guide me how can we rotate a circle anticlockwise/clockwise having 7 segments and change the text by rotating the circle and passing through each segment it would be great help for me.
Hello Sir great tutorial, i had one question how i can do to not let the square go outside of the screen ? should i use Dimension api from react-native module and in onActive event handle this ? or there is a better way ?
@@faikyesilyaprak8761 if you're using React Native CLI you must wrap the Root Component with the GestureHandlerRootView component (from react-native-gesture-handler)
Can you make the same tutorials without the use of hooks? They are so horrible, cant stand them and not sure why everyone started to use that shit. They make the code base look like a pile of crap
For me, your is the only video makes it clear on Reanimated, I have been struggling to understand Reanimated in React Native, both 1 and 2 none was clear to me until I found this. How explain every concept before using it is amazing. Keep it up sir
Thanks a lot! You have made my day 🥰
I can't agree more :)
Thank you, this is very useful
I want to save the location after moving. It will still be there when I open the APP next time. What should I do?
I like your teaching style. What theme (on vscode) are you using ? :)
Hi Dan thanks for the feedback.
Here's the info on my vscode theme setup:
- vscode theme “Tokyo Night" ( marketplace.visualstudio.com/items?itemName=enkia.tokyo-night );
- palenight icons ( marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons ).
great video... clear and understandable... actually could be better if you ve done a drag and drop delete system :) becouse its very similar to that
Thank you so much for this. My app keeps crashing when I use PanGestureHandler but otherwise it works just fine. Idk what to do :(
If you are using react-native-cli instead of expo make sure to wrap all the app with the GestureHandlerRootView.
@@Reactiive THANK YOU SO MUCH! I have been stuck at this for 4 hours lol
Great job please do scratch card like google pay
Interestingly it works if I run it in the web browser but not on my actually android phone or android simulator. Any suggestions anyone?
Hi, if you're using React Native CLI you must wrap the Root Component with the GestureHandlerRootView component (from react-native-gesture-handler)
@@Reactiive Thank you for the help! I got it!
You absolutely made my day!!!! Thank you so much!
Great video! Could you extend the same concept and do a tutorial on how we can build Tinder style cards?
This is a great idea! I'm currently working on these videos related to the basic components of reanimated, but I'll soon start deepening animations by taking inspiration from existing apps. Stay tuned for more content on this channel!
@@Reactiive Highly appreciated! Great content.
Maybe you can do a series on the reanimated 2 hooks and APIs as this is a region where I feel people struggle with the learning curve.
@@aditya_warrier I completely agree with you on this point. Currently I have already made an introductory video about the reanimated 2 APIs on my channel called "Introduction to Reanimated 2" and today I uploaded a video regarding the use of interpolate with the Animated.ScrollView. Thank you very much for your advice, I will definitely go in this direction!
Awesome! Thank you, this type of content is helping me a lot, I didn't know anything about animations in React Native and now I'm learning from you, thanks!
Thank you Jeliel, I'm glad you liked it 🚀
I'll continue to write thank you to your all videos when i finished to watch :D But really it helps so much, Thank you
This is a great series of videos! I like the approach of going through step by step. It's the first time I feel like I'm developing a strong understanding of Reanimated's APIs.
Update: You need to put the PanGestureHandler in a parent component for the pan gesture event to work on android devices.
Awesome, Just Awesome.
I find typescript soo redudant..... Like if you are good with full-filling contracts then you know what to expect. I find this syntax so unreadable sometimes..
I have been struggling in react native animation, Finally found perfect mentor for reanimated. Keep going
Thanks a lot for this video.
I use android emulator and it just worked if used by then errors appeared after a added in. Any help how to fix it. or maybe is there any other solution to replace
how to navigate to another screen
my code
if(distance>circle_size){
runonjs(navigation.navigate('New')}
super clear and clean explanations. Can you do a drag and drop image grid example?
Why not! Thanks for the inspiration (Can you share with me an app with this functionality?) 🚀
@@Reactiive google chrome app. The new tab has this
congratulation... bravo a vous, j'aime et grâce a vous vidéo je comprend de mieux en mieux
Can you please make a video about react-native-reanimated v2 installation? I am not sure where I did the mistake but this code is not working for me. I doubt any configuration mistakes in my code.
great Job thanks for this video
thank for everything. i want to ask if any Reanimated resource like PDF exist
Hi ethio, thank you very much! I don't think there is unfortunately (but I'm not sure). Reanimated is a package that improves and changes very quickly and it's hard to have an always up-to-date pdf document
I want to save the location after moving. It will still be there when I open the APP next time. What should I do?
Did the context change? Because I'm receiving "undefined" and its not working if I use it
very nice Sir
hey thank you.
how can I track multiple fingers momvnement?
Fantastic explanation and easy examples ❤ .👒 hats off
how to handle multiple panhandlers in usestyle and usegesturehandler with array
It isn't trivial at all! When you need to deal with multiple handlers it is usually needed to provide the waitFor and simultaneousHandlers props. Can you show me your specific use case where it is needed to handle multiple gestureHandlers?
Loved it,
I have a question context.translationX is not set to zero in onEnd function but still when square goes back to its Origional position after releasing and then draging it again, it does not produce any issue with addition of old value context.tranationX, but why ?
Very excellent work. Finally the UA-cam algorithm is recommending me good quality content
Awesome man. Why is there no new video coming .
Great tutorials !!!
Thank you so much for this top notch explanation
Wow amazing explanation, i have coded react native for 2 years and I always failed to understand animated logics. And after watching your videos, it makes everything much more sense. Cant wait to apply these knowledge in my app. Thank you!
thanks for tutorial very helpfull
In my result the context is returning undefined bro
Hi Umar, did you assign the translateX.value to the context.x in the onStart callback?
@@Reactiive ok solved thanks brother
very good thanks
Hi Pablo, thanks for your feedback 🤓
Grande tutorial (sei italiano vero?)
Excellent tutorial 👍👍
Your videos are really good. No jokes, most of the time, when I search for React Native tutorials, they are really shit and basically just copy the documentation in the worst way possible. You, however, cover everything that's really important when programming (I'm especially thankful that you include TypeScript) - Keep making those awesome videos. I'm a student so I can't donate money to you, but I'll keep like your videos, subscribed to you and will definitely recommend your channel! :)
Thank you for the detailed video. Please make more videos about reanimated2. BTW, where Can I learn more about ?
Very good effect, but how can I give an initial coordinate to this square, such as the upper left corner or the lower right corner, I don't know how to give it an initial value
I copied the code from the github repository, I installed react native reanimated, the plugin, and react native gesture handler and it does not work. Any suggestions anyone?
Finally. The Reactive Content
SOOOOO good thnks!
you explained things in really simple way. Thanks for these videos on animation
can you explain why expo cli not work for android reanimation , it only work in web view .I cannot see the cause.
I'm new here and searching for rotation animation and the way you try to teach is really appreciated . Going to subscribed.
By the way I was looking for rotation of a circle, if you can help/guide me how can we rotate a circle anticlockwise/clockwise having 7 segments and change the text by rotating the circle and passing through each segment
it would be great help for me.
Great video and great explanation! I learnt a lot from this.
Thank you very much! Super great profile picture by the way 😁
wao ماشاءاللہ great
only work in web view. not work in expo simulator. how can fix it?not work in javascript?
Very Nice!
Hello Sir great tutorial, i had one question how i can do to not let the square go outside of the screen ? should i use Dimension api from react-native module and in onActive event handle this ? or there is a better way ?
Awesome! I subscribed! => you deserve way more subscribers this is really great content!
Thank you so much! Grazie, facile da capire
Graziee! 🤓🍕
thanks!
Good tutorial! Thanks. I wonder whether there is any reason why do you use 100.0 for the size instead of 100 (without .0)?
I'm doing your tutorials one by one!
Im learning a lot!
Thx!!!!
Really amazing and intersting topic 🔥🔥
Thanks for the support. I really appreciate 🔥
Loved how you explain ! Please keep making such videos.
this is one of the best reanimated tutorials i have ever seen, thanks man
Best channel for React Native Animations
Clearest way to teach Reanimated I could find on internet. Tens of hours wasted in other channels, new subscriber here and please more content. Thanks
this is one of the best reanimated tutorials i have ever seen, thanks man
Bro, please make image zoom tutorial
Ho Kameal, search for the PinchGestureHandler tutorial on this channel and I believe you're going to find what you're searching
@@Reactiive but I need a zoom with pan and pinched combined + double tap and boundries not to outzoom too far ^^
The Pythagoras theorem part was really clever
This is really good stuff. Thank you.
This channel deserves more subscribers man!!!!
Thank you so much for these reanimated series, man.
how to make that square as touchable?
I have copied everything exactly up until minute 7 but i am unable to move the square horizontally. What could be the issue?
The same here, couldn't figure it out :(
@@faikyesilyaprak8761 if you're using React Native CLI you must wrap the Root Component with the GestureHandlerRootView component (from react-native-gesture-handler)
Enjoyed it.
Can you make the same tutorials without the use of hooks? They are so horrible, cant stand them and not sure why everyone started to use that shit. They make the code base look like a pile of crap