[change] Deprecate Touchables and Button components

These components have been replaced by Pressable and will be removed
from React Native.

Fix #2382

packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap

@@ -71,15 +71,15 @@ import * as ReactNativeModules from 'react-native-web/dist/cjs/index';
 exports[`Rewrite react-native to react-native-web import from "react-native-web": import from "react-native-web" 1`] = `
 
 import { unstable_createElement } from 'react-native-web';
-import { StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
+import { StyleSheet, View, Pressable, processColor } from 'react-native-web';
 import * as ReactNativeModules from 'react-native-web';
 
  ↓ ↓ ↓ ↓ ↓ ↓
 
 import unstable_createElement from 'react-native-web/dist/exports/createElement';
 import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
 import View from 'react-native-web/dist/exports/View';
-import TouchableOpacity from 'react-native-web/dist/exports/TouchableOpacity';
+import Pressable from 'react-native-web/dist/exports/Pressable';
 import processColor from 'react-native-web/dist/exports/processColor';
 import * as ReactNativeModules from 'react-native-web/dist/index';
 
@@ -90,7 +90,7 @@ exports[`Rewrite react-native to react-native-web require "react-native": requir
 
 const ReactNative = require('react-native');
 const { View } = require('react-native');
-const { StyleSheet, TouchableOpacity } = require('react-native');
+const { StyleSheet, Pressable } = require('react-native');
 
  ↓ ↓ ↓ ↓ ↓ ↓
 
@@ -100,8 +100,7 @@ const View = require('react-native-web/dist/exports/View').default;
 
 const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
 
-const TouchableOpacity =
- require('react-native-web/dist/exports/TouchableOpacity').default;
+const Pressable = require('react-native-web/dist/exports/Pressable').default;
 
 
 `;
@@ -110,7 +109,7 @@ exports[`Rewrite react-native to react-native-web require "react-native": requir
 
 const ReactNative = require('react-native');
 const { View } = require('react-native');
-const { StyleSheet, TouchableOpacity } = require('react-native');
+const { StyleSheet, Pressable } = require('react-native');
 
  ↓ ↓ ↓ ↓ ↓ ↓
 
@@ -121,8 +120,8 @@ const View = require('react-native-web/dist/cjs/exports/View').default;
 const StyleSheet =
  require('react-native-web/dist/cjs/exports/StyleSheet').default;
 
-const TouchableOpacity =
- require('react-native-web/dist/cjs/exports/TouchableOpacity').default;
+const Pressable =
+ require('react-native-web/dist/cjs/exports/Pressable').default;
 
 
 `;
@@ -131,7 +130,7 @@ exports[`Rewrite react-native to react-native-web require "react-native-web": re
 
 const ReactNative = require('react-native-web');
 const { unstable_createElement } = require('react-native-web');
-const { StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');
+const { StyleSheet, View, Pressable, processColor } = require('react-native-web');
 
  ↓ ↓ ↓ ↓ ↓ ↓
 
@@ -144,8 +143,7 @@ const StyleSheet = require('react-native-web/dist/exports/StyleSheet').default;
 
 const View = require('react-native-web/dist/exports/View').default;
 
-const TouchableOpacity =
- require('react-native-web/dist/exports/TouchableOpacity').default;
+const Pressable = require('react-native-web/dist/exports/Pressable').default;
 
 const processColor =
  require('react-native-web/dist/exports/processColor').default;

packages/babel-plugin-react-native-web/src/__tests__/index-test.js

@@ -24,7 +24,7 @@ import * as ReactNativeModules from 'react-native';`,
  {
  title: 'import from "react-native-web"',
  code: `import { unstable_createElement } from 'react-native-web';
-import { StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
+import { StyleSheet, View, Pressable, processColor } from 'react-native-web';
 import * as ReactNativeModules from 'react-native-web';`,
  snapshot: true
  },
@@ -45,22 +45,22 @@ export { StyleSheet, Text, unstable_createElement } from 'react-native-web';`,
  title: 'require "react-native"',
  code: `const ReactNative = require('react-native');
 const { View } = require('react-native');
-const { StyleSheet, TouchableOpacity } = require('react-native');`,
+const { StyleSheet, Pressable } = require('react-native');`,
  snapshot: true
  },
  {
  title: 'require "react-native"',
  code: `const ReactNative = require('react-native');
 const { View } = require('react-native');
-const { StyleSheet, TouchableOpacity } = require('react-native');`,
+const { StyleSheet, Pressable } = require('react-native');`,
  snapshot: true,
  pluginOptions: { commonjs: true }
  },
  {
  title: 'require "react-native-web"',
  code: `const ReactNative = require('react-native-web');
 const { unstable_createElement } = require('react-native-web');
-const { StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');`,
+const { StyleSheet, View, Pressable, processColor } = require('react-native-web');`,
  snapshot: true
  }
 ];

packages/benchmarks/src/app/App.js

@@ -1,11 +1,5 @@
 import Benchmark from './Benchmark';
-import {
- Picker,
- StyleSheet,
- ScrollView,
- TouchableOpacity,
- View
-} from 'react-native';
+import { Picker, StyleSheet, ScrollView, Pressable, View } from 'react-native';
 import React, { Component } from 'react';
 import Button from './Button';
 import { IconClear, IconEye } from './Icons';
@@ -100,9 +94,9 @@ export default class App extends Component {
  <View style={styles.grow}>
  <View style={styles.listBar}>
  <View style={styles.iconClearContainer}>
- <TouchableOpacity onPress={this._handleClear}>
+ <Pressable onPress={this._handleClear}>
  <IconClear />
- </TouchableOpacity>
+ </Pressable>
  </View>
  </View>
  <ScrollView ref={this._setScrollRef} style={styles.grow}>
@@ -134,9 +128,9 @@ export default class App extends Component {
  viewPanel={
  <View style={styles.viewPanel}>
  <View style={styles.iconEyeContainer}>
- <TouchableOpacity onPress={this._handleVisuallyHideBenchmark}>
+ <Pressable onPress={this._handleVisuallyHideBenchmark}>
  <IconEye style={styles.iconEye} />
- </TouchableOpacity>
+ </Pressable>
  </View>
 
  <Provider>

packages/react-native-web-examples/pages/flatlist/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import Example from '../../shared/example';
-import { FlatList, Text, TouchableOpacity, View } from 'react-native-web';
+import { FlatList, Text, Pressable, View } from 'react-native-web';
 
 const multiSelectData = ['First', 'Second', 'Third'].map((title, id) => ({
  id,
@@ -18,13 +18,13 @@ class MyListItem extends React.PureComponent {
  render() {
  const textColor = this.props.selected ? 'red' : 'black';
  return (
- <TouchableOpacity onPress={this._onPress}>
+ <Pressable onPress={this._onPress}>
  <View>
  <Text style={[styles.listItemText, { color: textColor }]}>
  {this.props.title}
  </Text>
  </View>
- </TouchableOpacity>
+ </Pressable>
  );
  }
 }

packages/react-native-web-examples/pages/scroll-view/index.js

@@ -4,7 +4,7 @@ import {
  ScrollView,
  StyleSheet,
  Text,
- TouchableOpacity,
+ Pressable,
  View
 } from 'react-native';
 import Example from '../../shared/example';
@@ -13,9 +13,9 @@ const ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);
 
 function createItemRow(msg, index) {
  return (
- <TouchableOpacity key={index} style={[styles.item]}>
+ <Pressable key={index} style={[styles.item]}>
  <Text style={styles.text}>{msg}</Text>
- </TouchableOpacity>
+ </Pressable>
  );
 }