React Native Touchable Components and Web Page Embeds
Tags: reactnative
Published: 2021-07-24 13:27:21

---
title: React Native Touchable Components and Web Page Embeds
published: true
date: 2021-07-24 00:00:00 UTC
tags: reactnative
description: When to use Pressable vs. TouchableOpacity or Web Views vs Web links
canonical_url: https://bionicjulia.com/blog/react-native-touchable-components-and-web-content-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](https://reactnative.dev/docs/touchableopacity) is the older of the two, with [Pressable](https://reactnative.dev/docs/pressable) being released in [v.0.6.3](https://reactnative.dev/blog/2020/07/06/version-0.63#pressable). 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](https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html).
- 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](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#react-native-webview-guide). 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](https://docs.expo.io/versions/v42.0.0/sdk/webbrowser/). 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](https://instagram.com/bionicjulia) or [Twitter](https://twitter.com/bionicjulia)!