Why React Native Gesture Handler & Reanimated ?
ฝัง
- เผยแพร่เมื่อ 27 มิ.ย. 2019
- Learn how and why you should use the React Native Gesture Handler and Reanimated Libraries
Krzysztof Magiera Talk - • Declarative future of ...
Project Files : github.com/nathvarun/React-Na...
New To React Native?
React Native Foundation + Firebase + Redux :
www.udemy.com/course/react-na...
Affiliate links:
Love Reading but have no time to read?
Checkout Blinkist: jump.blinkist.com/aff_c?offer_...
Twitter / nathvarun
Instagram / nathvarun25
Facebook / nathvarun
You should post more content. Thanks for taking the time to teach this. You're awesome!
I have been trying to understand the reanimated API, and the various methods it exposes. This video was so clear and concise, I feel like I can build out even more complex animations from the knowledge I gained here. Don't stop posting more content. You do a great job of explaining things!! Thanks a bunch for this video. It was really helpful
Superb... In my previous app i was facing the animation lag issue, you cleared my doubts of those issues... Many Many Thanks....
Thanks so much. I've been looking for this
And you are back.... You are amazing
Great tutorial. Thanks a lot.
Your voice is amazing for tutorials.
I really appreciated this video. Thanks a lot.
Great content. Thank you.
Well done! Thank you.
I really like your content... I would be glad if you teach us how to build custom react native swiper/slider (without plugin). like we see in quiz app. If we answer correctly the slide will go up and next question will appear.
This is really amazing video. Great work!!!
I have one question. It works in React Native Cli as well?
thank you so much
Thx! can u upload a new updated redux proyect plss
Is there a way to make the whole screen move with gesture? This video teaches us how we can move a specific shape only when we touch and drag the shape. I want to know whether there is a way to enable touch and drag for the whole screen(I mean like dragging a map)
This was amazingly clear and helpful. Thank you for taking the time to show why you would want to use reanimated, as well as discussing in some depth what different parts of reanimated actually do.
I have never seen someone format their code the way you do (before auto-formatting) which occasionally made things a touch harder to follow, but overall this was an excellent walk through.
Hey i need an answer pleasee ASAP..
I try to make it also translate to Y direction, so you can move the box freely through x and y axis. After i release the box it run spring animation very smoothly..
BUT after seconds i released my touch, it start to moving by it self to x and y axis randomly, do you know why is this happen???
How i can move box on new position of touch point on screen rather than drag or drop.....
what is the code theme you are using looks nice ?
Notification squad. Liked without watching full.
same for every video i click on this channel)
Verbose is an understatement
tnks for the video. I'm trying to replicated, but I want to move all around screen. I did, but, when I start moving again, the block starts moving from the initial value. I'm stucked. But thank you any way. Your videos are great.
When we use more than 2 gestures.. Ex pinch and pan.. Only one gesture works.. The nearest one gesture from the animated view.. Why ? Is there a way to make them work simultaneously ?
How to reduce the size of apk file using expo
What editor tool did you use for this ?
any functional component for this tutorial?
Good explaination, bit fase for beginners i think. Can we use this method to animate sprites? Maybe a nice subject for the next video: sprites in react native
Yes, but it would require preloading and caching assets. The problem would be the size of the application since node_modules that come packaged with React is a large file. I would advise against it unless it's an SVG and low frame count.
For those who wondering why gestures this tutorial doesn't work in 2022, you need to replace the container with
you de king man upvote this guy
Why you need use legacy class components, i can't understand
react-native-reanimated code is more verbose because we are required to write our animations in s-expressions form that is converted into native executable code
I did same but not working on Android device
same here..the box is rendered but its not moving.
did you managed to fix it? i have the same problem :/
@@davidlozada6114 For those who wondering why gestures this tutorial doesn't work in 2022, you need to replace the container with
a commenter said that^
in my application i am getting this warning : cant perform a react state update on an unmounted component
this warning is not occurring all time , i will show some parts of my code please tell me it is ok or not
1) i use a function while calling that it will navigate to another page
beerSearch=()=>{
this.props.navigation.navigate('RoductLivesearch2',{
NaeOJ: cc })
}
--------------------------------------
2 )
this.props.navigation.navigate('DoScreen', {
ImageOBJ:item.image_url, ProductnameOBJ: item.productname, OfferOBJ: item.offer, BrandOBJ: item.brandname, CataOBJ: item.cata, MrpOBJ:item.mrp, OffermrpOBJ: item.offermrp, ExpirOBJ:item.offexpiredon, CityOBJ: item.city,
PcolorOBJ: item.pcolor, SpeOBJ: item.spe, AddOBJ: item.addre, LaOBJ: item.la }) }>
this.props.navigation.navigate('DoScreen', {
ImageOBJ:item.image_url, ProductnameOBJ: item.productname, OfferOBJ: item.offer, BrandOBJ: item.brandname, CataOBJ: item.cata, MrpOBJ:item.mrp, OffermrpOBJ: item.offermrp, ExpirOBJ:item.offexpiredon, CityOBJ: item.city,
PcolorOBJ: item.pcolor, SpeOBJ: item.spe, AddOBJ: item.addre, LaOBJ: item.la })}>{`${
item.productname
} `.substring(0, 70)}
this code is not working on android device.
Do the android specific installation steps. here is the link you can follow, software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html
I think Reanimated is only useful if some madlad wants to make a freaking game on React Native haha. Gesture Handler is nice though for any project.
I related more to a channel name
if i'm using react native's animated and not 'react native reanimated', then how do i get the X value of the current dragged box? thanks in advance.
edit: its event.nativeEvent.translationX