Fernando Rojo – Don't be afraid to build a native library | App.js Conf 2024

recently I pulled up Google and I searched for a react native image viewer we've all been there I was building a custom chat UI from scratch and our chat supports images so I needed the ability to tap an image and expand it and it had to feel like iMessage I refused to ship it to iOS otherwise but I struggled to find anything that came close

I needed an image viewer with shared element transitions pinch to zoom double tap to zoom pan to close multi-image support modal support flashless support high performance and a clean API I needed an image viewer that felt native and here is the result on the be gig iPhone app native feel is the most important Benchmark you can see that I can press tap pinch Zoom Zoom drag and slide

between different images I get what I'd expect from a good app one nice detail is the image in the list is compressed but the one that expands is high resolution and when I long press an image I get native style reactions with a native context menu as an iPhone user you feel right at home and that's the image gallery that we will build today so let's define the API first when I'm making something reusable I like to

code for consumption even when I'm building something in my own app I imagine myself as this future user of the code a clean API isn't just Aesthetics it's reducing mental overhead I I just want to make an image pop up when it's tapped that's it I don't want to spend time coordinating navigation or dealing with low-level gesture Primitives and I definitely don't want to be creating refs measuring

views and calling any extra hooks building for consumption is a way to be empathetic to your future self and in turn to your users so here we go let's build Galleria we'll start with an empty component and address all of our requirements along the way the first thing we'll add is galleria. image this is the inline component it's the image that you'll tap now I want to flag the fact that the

galleria. image takes a source prop this might look completely natural but this subtle design Choice actually makes things very complicated if galleria. image has to render an image under the hood what is it using is it Expo image or react native fast image or the slow built-in react native image I just want to let you tap an image and expand it and I don't want to reimplement any of the features from those libraries this is the first place

I got tripped up and I'll touch on those issues a little bit later but for now let's make a change to our API galleria. image is now opened up instead of implementing an image itself it's going to receive one as a child now the question is where is this image coming from well wherever you want Galleria should and will work with any image component including Expo image fast image or the built-in react native image it has no knowledge of what

library is happening under the hood now you might be wondering why did I split up Galleria and galleria. image well recall one of our requirements from earlier we need multi-image support we need the ability to tap one photo in a gallery and swipe side to side between them so in our Galleria component at the root we add a URLs array and in our galleria. image component we add an index prop this way we can easily render a list and all them will be grouped