Jed Bartausky:

Welcome back to another episode of the React Native Radio Podcast. Brought to you by puns. Buckle up, because this episode has a lot of them. Episode 371, React Native Radio Explains: PanResponder.

Robin Heinze:

Welcome back everyone to another episode of React Native Radio. We are doing another React Native Radio Explains, our series where we read the docs so you don't have to, but please read the docs. I'm Robin, of course. I'm the director of engineering at Infinite Red, and I'm here again with Tyler. Tyler, remind our listeners who you are, what you do, why you're here.

Tyler Williams:

I'm not the director of engineering at Infinite Red.

Robin Heinze:

That should be your title on LinkedIn. You're just like -

Tyler Williams:

Not.

Robin Heinze:

Bang, director of not -

Tyler Williams:

Not the director of engineering.

Robin Heinze:

See how many recruiters don't pick up on the -

Tyler Williams:

Start sending me opportunities that I am not at all interested in. I don't envy your work, Robin. I instead am a staff software engineer here at Infinite Red, and I write React Native applications as well as Expo applications, and I coordinate Claude instances from time to time.

Robin Heinze:

You used the phrase "Clauderating" to me recently. Yes. And I thought that was amazing. I just Clauderated on something for a while. Yeah.

Tyler Williams:

I got to Clauderize the wound.

Robin Heinze:

Actually, sometimes Claude is the cause of the wound - That's true.

Tyler Williams:

Yeah.

Robin Heinze:

That needs to be cauterized.

Tyler Williams:

Yeah. Yeah. I don't have any other good Claude puns yet, but they'll come to me.

Robin Heinze:

Oh, they'll come. Yeah. So like I said, bite-size episodes where we take a React Native topic that you may or may not already know about and go into depth by reading the docs. We don't read them to you. We read them and then summarize them for you in a helpful and friendly way. But before we reveal what we are explaining today, let's hear from our lovely sponsor.

Jed Bartausky:

Infinite Red. Infinite Red is a premier mobile app consultancy focused on Expo and React Native. We're a team of 30 that's located fully remote in the US, with highly experienced mobile app developers. And we've been doing this for over a decade. We're also one of the first development teams to adopt agentic coding in a way that keeps high quality standards while also being able to dive in and do things the old school way if we need to. If you are looking for mobile app, Expo, or React Native expertise for your next project, hit us up at infinite.red/contact. Thanks. And now back to the episode.

Robin Heinze:

And we're back. And we're explaining PanResponder.

Tyler Williams:

Out of the pan into the responder. It does get

Robin Heinze:

Funnier the second

Tyler Williams:

Time.

Robin Heinze:

There's going to be a lot of pan puns. Yeah.

Tyler Williams:

Yeah.

Robin Heinze:

I can already -

Tyler Williams:

There'll be pandemonium.

Robin Heinze:

Oh.

Tyler Williams:

Oh, that's right. We should bring it together like

Robin Heinze:

Pangaea. Okay. Okay. I love it. What is PanResponder? In one line, PanResponder is React Native's built-in API for recognizing and responding to touch gestures. That would be your drags, your swipes, your multi-touch, all the things that you can do with your fingers on your iPhone screen or your Android phone screen.

Tyler Williams:

Or your toes.

Robin Heinze:

I mean, technically it doesn't disturb me. It probably

Tyler Williams:

Doesn't know. Yeah.

Robin Heinze:

I have been known to do stuff with my elbow.

Tyler Williams:

Oh, smart. Sure.

Robin Heinze:

My nose more often than you'd think.

Tyler Williams:

I've been

Robin Heinze:

Impressed. I do stuff with my nose.

Tyler Williams:

With modern devices' ability to pick up touch events with gloves, and not even the special gloves that are for phones. I have nice driving gloves that my wife got

Robin Heinze:

Me for

Tyler Williams:

Our anniversary, and my phone can pick up the. It conducts better than I expected. I know. I've been very impressed with modern technology.

Robin Heinze:

Yeah. The capacitive capabilities of the phone screens have gotten extremely sensitive. And do you remember the "touch screen devices" from 2007?

Tyler Williams:

Well, yeah, they were almost like resistive touch, right?

Robin Heinze:

Right. You had to push and drag, and it was super laggy and very, very bad. And iPhones have definitely spoiled us as to what a touch screen should and can be. And Android. I'm sorry. I apologize to the Android fans in the audience. I know Android phones are as good or sometimes better.

Tyler Williams:

Well, and what I'm thinking of is the Android Auto stuff too. I have one of those nicer Android displays in my car, and that picks up my gloves really nicely, along with my phone. So yes, Android, good.

Robin Heinze:

Android good. So why are we talking about it? Why do people mostly not know about it? The elephant in the room is you're probably thinking, what about React Native Gesture Handler?

Tyler Williams:

They're probably thinking, oh, you're talking about React Native Gesture Handler. Because that's what I thought when you pitched this episode. They probably did. They're probably not even thinking, what about the other one? They're like, oh yeah, the one PanResponder from

Robin Heinze:

React Native Gesture Handler. The one that everyone uses. Yes. Fun fact, this is actually different and it's built into React Native. It's not a dependency. Most people don't use it. And we're going to say that upfront so that you don't listen to half of this episode and then go off and think that you should start using PanResponder. Huge caveat here. It's not super performant. And that's the reason that React Native Gesture Handler exists, is because it takes what PanResponder does and does it on the native side and does it better and more performantly. So you probably won't use PanResponder unless you're doing something extremely trivial in a proof of concept app or something, or just -

Tyler Williams:

Or if you don't want to pull in the dependency. I think that's a valid option. Like you said, there are probably limited use cases where the performance difference isn't noticeable, but your tolerance of third-party dependencies is a problem. So it's definitely good to have it there. One other use case is for library authors that want to do some sort of gesture responding without requiring React Native Gesture Handler. Practically speaking, I think most third-party libraries just say, "Hey, pull in React Native Gesture

Robin Heinze:

Handler." I mean, if you're using React Navigation, you already have to have Gesture Handler. But I still think it's extremely interesting and valuable to go through how PanResponder works, because the way it conceptualizes things is really helpful to actually understand why Gesture Handler exists and what it's doing natively. So I really enjoyed just going through the PanResponder docs, just because it helps you understand the lifecycle of a gesture and how it coordinates with React Native. So we're going to do that, but with the qualification that you probably shouldn't use it for most things. Anyway, how does it work?

Tyler Williams:

So Robin hinted at this. A lot of this happens on the JavaScript layer. We get events from iOS or Android, either through the RCTSurfaceTouchHandler on iOS or the JSTouchDispatcher on Android. Those come through as just native touch events. There is a target finding algorithm on the native side that figures out what view or element has been touched, and then they dispatch an event. And so this is all happening sort of at the C++ layer in the current architecture. That event gets emitted and arrives on the JavaScript layer, which captures the events. And then when we talk about, we'll go over some of the callbacks that are available in this module. All of the logic that those callbacks determine, that happens on the JavaScript side. And so that's what can have negative implications for your performance, because with enough calculation or slowness, it can lead to hangs and dropped frames.

But again, in limited use cases, I think it performs perfectly fine, because we're all doing complex stuff on JS anyways. So

Once it determines, once it goes through its own calculations of, hey, who's responsible for this gesture? When is it over? When's it been terminated? Et cetera. It does pass it back to the native layer to let the native platform go and actually respond to those things. And so in the current architecture, that's gotten better, faster, simpler, because we can hold references to different C++ objects that can go talk to the native layer. We're not just sending async messages over the bridge. So PanResponder is probably one of the modules that has seen some of the better improvements with the new

Robin Heinze:

Architecture

Tyler Williams:

Because it's got so many messages it has to send back and forth. So that's

Robin Heinze:

Kind

Tyler Williams:

Of the idea.

Robin Heinze:

And if you're doing any kind of animation or anything in response to the gesture, you can use native driver for the animation to get performance gains there. So there's ways to use PanResponder that are more performant than they used to be, but it is still doing most of its work on the JS thread. So that's definitely something to know. So let's talk about the callbacks. We have onStartShouldSetPanResponder, which basically means should I claim this touch when it starts? And then onMoveShouldSetPanResponder, should I claim this touch when it starts moving? So that could be like, you know how there's a difference between when you just touch something and then when you start to drag it? Those are two different distinct states of a touch, I guess. Right.

Tyler Williams:

And you can wire up JavaScript logic to say like, "Oh, if my toggle button is off, return false hard code." If you've got some logic where it's like this thing should not be movable under these circumstances, or if you want to coordinate with some other gesture handler system.

Robin Heinze:

So then we have onPanResponderGrant and onPanResponderMove and onPanResponderRelease, which are like you've been granted the touch, get ready, the finger's moving, here's the updated state. And then release is the finger was lifted. There's also onPanResponderTerminate, which I think means someone else, the operating system took over the touch. It was canceled for some reason. And then onPanResponderTerminationRequest, which means another element wants the touch. Return true to let it have it. Something else wants it, you need to give it up.

Tyler Williams:

And those get events which have this gestureState object, which has kind of the more interesting stuff. This is probably what you would use if you were driving UI changes, or if you were trying to say take a certain gesture and map it to an action and say, oh, if the user swipes all the way to the right, then I want to dismiss this card. If they swipe halfway through, then I don't. Then you'd like a spring animation or something. So this gestureState object has delta X and Y for the accumulated distance moved from the start of the gesture.

Robin Heinze:

dx, dy definitely takes me back to vector calculus. Yeah.

Tyler Williams:

That felt familiar to say. Yeah. There is a velocity in both directions, vx and vy. So how quickly we're moving in that direction. There is a moveX and moveY, which is the latest coordinates of the gesture. And then an x0 and y0, which is where the touch started, along with a number of active touches, which tells how many fingers are on the screen right now.

Robin Heinze:

But with this information, a contrived example would be to. It actually is not contrived, depending on what you're doing, but it would let you, if someone drags their finger across, you could draw a line tracing exactly where their finger has been, like you would for a drawing application. I bet Procreate uses a lot of gestureState.

Tyler Williams:

So yeah, if you wanted to put all that together, first, as we said, you should read the docs, even though we're reading it for you. There are some good

Robin Heinze:

Code

Tyler Williams:

Examples on reactnative.dev under the PanResponder section. And essentially you can call PanResponder.create and you pass it what is essentially a configuration object. And that object maps to that interface with those methods we mentioned. You can give it an object with the onStartShouldSetPanResponder, the onStartShouldSetPanResponderCapture, the onMoveShouldSetPanResponder, et cetera. I'm not going to read all of those, but you essentially give it these callbacks as part of a configuration object. Those callbacks, so it's like the key is the name of the callback. The value in that object is then a function that takes the event and the gestureState, and then it needs to return either true or false. In the example, they put this into a ref in React so you can manipulate it and keep it stable across re-renders. And then you send the PanResponder.panHandlers to a particular view to actually use them, which is a great

Robin Heinze:

Angle. They really called it panHandlers.

Tyler Williams:

I believe they did, which makes sense. That is the straightforward -

Robin Heinze:

It is what it is. Bundle of handlers,

Tyler Williams:

But here's more puns.

Robin Heinze:

That's just a funny more puns. More puns

Tyler Williams:

For the pan handling.

Robin Heinze:

So you could theoretically have distinct PanResponder instances across your app if you wanted different screens or whatever to handle gestures different ways.

Tyler Williams:

Or even different elements too. And I think that's why there's some of that coordination logic between these callbacks, is you can take different elements and have them give them priority, or based on state of the application. You could, I think, build a reasonably complex gesture system here. I think you'll still have a better time doing it in React Native Gesture Handler library,

Robin Heinze:

Which - Kind of what React Native Gesture Handler did was build a gesture system on top of what was natively available.

Tyler Williams:

Right, exactly. Yeah. But if you've ever done anything where. I have a client right now where we have a pretty complex interaction where we've built almost like a custom scroll view bottom sheet kind of thing, and it has to coordinate across vertical gestures, horizontal gestures. And then we have some thresholds where we say, "Hey, the thing you're doing will result in a bottom sheet-like snap point, or no, it will result in a smooth scroll." So there's a lot of ways to feed state into these gesture handling systems, and the PanResponder is capable of mapping to those different kinds of states.

Robin Heinze:

Right. So yeah, that's kind of the rundown of PanResponder. This was a really fun read in the docs. I feel like I understood gestures in general a lot better in a way that I didn't just having used Gesture Handler all these years.

Tyler Williams:

Right. And a lot of times you sort of wire it up once and you forget about it, because all the libraries consume it and use it, but you don't do the custom stuff yourself. So it's nice to see a zero-dependency documentation about gesture handling in a React Native application.

Robin Heinze:

Most of you, 99% of the time, will still use React Native Gesture Handler because you probably already have it in your app, and that's fine. But this is a good exercise just to teach the fundamentals of how React Native touch handling actually works. Now this is what I'll think about when I drag my finger across my phone screen. There's a lot of events and callbacks happening right now.

Tyler Williams:

Robin, I've got a joke to wrap us up that I just came up with.

Robin Heinze:

Tyler has a Tyler joke.

Tyler Williams:

That's what we're going to call this one. What is a gesture handler's favorite breakfast food?

Robin Heinze:

What?

Tyler Williams:

Pancakes.

Robin Heinze:

Oh.

Tyler Williams:

See?

Robin Heinze:

Good. Yeah.

Tyler Williams:

Good ones. Thank you for the. That sounds like a genuine reaction. You're right.

Robin Heinze:

I am someone who enjoys really corny jokes. I usually get groans and eye rolls from everybody else when I tell corny jokes. So I like to give really enthusiastic reactions to make people feel

Tyler Williams:

Good. Well, if you wanted a corny joke, I would've told one about grits.

Robin Heinze:

Oh, amazing.

Tyler Williams:

Okay.

Robin Heinze:

That's

Tyler Williams:

All from me.

Robin Heinze:

All right, everyone. Now you know about PanResponder. We hope to see you next time. See

Jed Bartausky:

You. As always, thanks to our editors, Tyler Williams and Jed Bartausky, our marketing and episode release coordinator, Justin Huskey, and our guest coordinator, Mazen Chami. Our producers and hosts are Jamon Holmgren, Robin Heinze, and Mazen Chami. Thanks to our sponsor, Infinite Red. Check us out at infinite.red/radio. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio on all the major podcasting platforms. I