Export Pressability/usePressability

[natew]

Introduction

I'm working on SnackUI, it's a low level UI kit. Because we support react native + web, being able to use usePressability would be a major help in keeping perfect compat as we build out our own base views.

I think this is pretty simple, so will leave it there. Just exporting usePressability would be enough.

Without that, we have to wrap things in which causes styling to break (for example if someone has position absolute, and we wrap with Pressability, it breaks that).

The only alternative I can think of which would be quite nice, is supporting display: contents. I'll bring that up in another issue.

[elicwhite]

Because we support react native + web, being able to use usePressability would be a major help in keeping perfect compat as we build out our own base views.

we have to wrap things in which causes styling to break

Do you have an example? <Pressable> is essentially a <View>, so you shouldn't need to wrap your base views in Pressable. Could your base views just be Pressable?

[natew]

@TheSavior yea, this would work, though on a higher level it breaks down.

For example, the react-native-web base view has a variety of hooks it's uses.

We have a search page where each list item renders a fairly complex component. For a while we were struggling to keep it performant. We did a test and patched react-native-web to export those hooks, and used them internally rather than rendering down to View. The result was a very large speed improvement. Each list item rendered some had ~40 components, each with a few base level views. That went from being some ~150 * 2 (our view + rnw View) components, to just 150. It saved us from having to hand-optimize and remove a lot of stuff.

From a first-principles approach, having those hooks above available would make React Native much more open to library authors. It's the right fundamental unit for flexibility.

One of the next things I'd like to do in fact is a framer-motion style "dynamic hook loading" pattern where we only pull in the logic for certain things like press events, gestures, layout, theme, and media queries if they are needed. My guess is that would speed up the average case a lot, while slowing down only the rare views that use all of the above features at once. Again, this stuff is only really relevant when you're dealing with a base level view that will be rendered hundreds of times, but in that case it's pretty critically important. Especially if you consider a full-page render could include thousands of views, and going from 1 1000 to 2 1000 makes a huge diff, especially on mobile.

Anyway, just some thoughts. I'm actually using Pressable as a pseudo-hook right now in a hacky way.

I guess the real request is to make react-native a bit more friendly to extension for library authors. useResponderEvents, usPlatformMethods, usePressable would make that possible.