React Native Touchable Components and Web Page Embeds
4 min read
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,
My understanding of the components are as follows:
Pressableincorporates web listeners such as hover (useful as React Native Web becomes more prevalent), and others such as blur and focus.
Pressableuses 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
Pressableis that you might have to do more configuration to get the desired effect you want (e.g. with
onPressopacity change that comes automatically with
- Having said that,
Pressableis 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. 🙄
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.
Here's an example from Expo where the Expo site has been embedded within the app itself.
WebBrowser for authentication, although Expo tries to make this easy for you through a specific
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.