React Native Touchable Components and Web Page Embeds

One of the challenges with React Native is knowing what the best component for your use case is. It doesn't help that the names aren't particularly descriptive and seem quite similar when you come across them for the first time. It's really only when you come to actually use them first hand, or delve deeper into the specific intricacies of the component, that you figure out what the actual important differences are.

I've come across 2 such cases recently, that I thought I'd document.

TouchableOpacity vs. Pressable

The basic function of both components is the same - to make an item interactable with your user, in your app. TouchableOpacity is the older of the two, with Pressable being released in v.0.6.3. Looking at the docs, Pressable is the component that is now officially recommended as it's been built with future-proofing in mind. The idea around it is for Pressable to encompass all of the features that's current available in not just TouchableOpacity, but also its sibling components, TouchableWithoutFeedback and TouchableHighlight.

My understanding of the components are as follows:

• Pressable incorporates web listeners such as hover (useful as React Native Web becomes more prevalent), and others such as blur and focus.
• Pressable uses the new Pressability API from Facebook, and moves away from the Touchable mixin.
• The older Touchable- components have been refactored to use the Pressability API as well, so legacy code bases using these components can still benefit from newer features.
• It does seem that for mobile, everything you might want to do with Pressable, is doable with one of the Touchable- components and vice versa, so there's no huge difference between using one vs. the other. The only thing with Pressable is that you might have to do more configuration to get the desired effect you want (e.g. with onPress opacity change that comes automatically with TouchableOpacity).
• Having said that, Pressable is the more future-proof component, so if React Native decides to deprecate some components, it'll be the Touchable- ones that go first.

WebView vs. WebBrowser

This seemed weirdly confusing to me at first, but now that I've had experience with using both, it makes a lot more sense and is easier to differentiate between the 2 very similarly-name components. 🙄

A WebView is essentially a component that renders web content in an embedded view (i.e. natively) within your app. This used to be a core component within the React Native library, but has now been extracted to its own library. With WebView, you can either pass in a web URL, or inject HTML directly into it. It is useful in instances, say, if you wanted to embed a video natively or if you really don't want your users to leave your app but still need to display some kind of web content to them.

WebBrowser on the other hand, is a feature provided by Expo. It allows you to have a link in your app open up the mobile device's web browser, whilst additionally allowing you to add an event listener that enables you to pass information back to your app. This is commonly used for opening up links to your website's privacy policy, or for user authentication. Since the advent of iOS 11, there are some intricacies you need to be wary of if using WebBrowser for authentication, although Expo tries to make this easy for you through a specific openAuthSessionAsync method.

To summarise, the user will be taken away from your app, to their mobile browser. There is a header section at the top of the browser that takes the user back to your app if they decide to close the browser.

Talk to me on Instagram @bionicjulia or Twitter!