Drag and Drop in React Native with PanResponder

Learn how to code a drag and drop flatlist in React Native.
Code: github.com/benawad/drag-and-d...
Links from video:
stackoverflow.com/questions/1...
facebook.github.io/react-nati...
​
----
Follow me online: voidpet.com/benawad
#benawad

[@dennistennis5622]

Nice to have you back and good that you enjoyed your holiday! 😀

[@mrmuffyman]

Thanks for this tutorial dude. Listening to you explain it slows things down so I actually understand it instead of skimming through docs.

[@fr3fou]

welcome back :)

[@failure232]

Dear Ben Award, Do you test you solution inside parent ScrollView? Thanks

[@pavsoor]

Great video, thank you! Can you explain the syntax used when you wrote Array(200)? I can't find that written anywhere - it's the first time I've come across something like it

[@bawad]

initializes the array with length 200

[@muhammadumar-lw9fg]

@@bawad I have implemented dragging to left using pan-responder of all flatlist items with single drag as it it implemented in a instagram chat. But when flatlist is large response is very slow. How can I improve performance of dragging large list using pan-responder ?

[@aashayamballi]

Heyyy welcome back Ben :)

[@samerkayali4525]

have you done the other video?

[@bantinggamer4962]

very very cool. thanks

[@jexxiewoo8390]

Ben is back:)

[@HaiderAli-oi5fm]

How are you able to show console logs in nice way in terminal at @11:05

[@pankajmundra7814]

Hi Ben, awesome tutorial, but I a need help. Can you please show us how to do this coding in js instead of tsx.

[@ricodane6847]

hello, have you seen a solution for this on jsx?

[@cuongduongmanh625]

Can you share your RN settings in vscode (extension, config), such as a setting sync config file?

[@bawad]

gist.github.com/benawad/1e9dd01994f78489306fbfd6f7b01cd3

[@Viruhemanth]

can we expect a series on react native reanimated?

[@bawad]

nope, I've never used reanimated

[@MRBala-xx5si]

can you please tell me which editor is this?

[@guilleagudelo777]

VS Code

[@ben6]

Continuation: kzbin.info/www/bejne/p5augWV3bMd_i9k

[@fotios4902]

@13:48 Can someone explain what this is: Animated.event([{ y: this.point.y }])({ y: gestureState.moveY }); I've seen code like this: 1. If you're interested to the `evt` Animated.event([ { nativeEvent: { contentOffset: { y: this._animation } } } ]) 2. If interested to `gestureState`. Animated.event([ null, { dx: this._animation.x, dy: this._animation.y } ]) So this `Animated.event([{ y: this.point.y }])({ y: gestureState.moveY });` is then probably an IIFE, and in the second (... ) Ben passes an object as a parameter. Right? But how does this work? And why he doesn't use null if the first place of the array, like in No 2? Thanks

[@IntetraX]

Did you ever find a good explanation for this syntax? Looks like greek to me. I would love to understand whats happening.

[@fotios4902]

@@IntetraX No, not yet bro... and I’m Greek 😄 Imagine that... 😂😂😂 PS I know the expression. 😉

[@johanvillamil2407]

why don't you use hooks?

[@bawad]

Implementing this with a class was simpler

[@johanvillamil2407]

@@bawad But do you think that flatlist performance can be affected by hooks?

[@bawad]

no, I don't think it matters either way

[@southredmondtoxik1885]

Learning react native is very easy than setup it's environment 🥺😓

[@edt723]

I despise expo to the core. 🤬

[@bawad]

why

[@edt723]

@@bawad it's just a framework that wraps around another framework. So now its 3 levels of a mess that you have to deal with. I think it would be ok for simple small projects. Maybe even pure JS/TS project, but if you are doing anything with the hardware (GPS, camera, storage.. etc) or if the project is going to be big. Stay away from expo. I have really bad experience with it, I took over a project where the previous developer used expo, everything was broken, I spent 2 days trying to fix all the issues before I gave up. The funny thing is that I wasn't alone, I found all the issues on stackoverflow, github, and expo forums, there was always hacks, weird workarounds, and overall things not recommended. I ended spending 3 days stripping out expo and migrating everything to just pure React Native

[@bawad]

true if you have to do something that expo doesn't support, it gets messy