[change] Deprecate Touchables and Button components

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

Fix #2382

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Button, StyleSheet, View } from 'react-native';
-import Example from '../../shared/example';
-
-const emptyFunction = () => {};
-
-function Divider() {
-  return <View style={styles.divider} />;
-}
-
-export default function ButtonPage() {
-  const disabledOnPress = () => {
-    console.error('Disabled button should not trigger onPress!');
-  };
-
-  return (
-    <Example title="Button">
-      <Divider />
-      <Button onPress={emptyFunction} title="Button" />
-      <Divider />
-      <Button color="#17BF63" onPress={emptyFunction} title="Button" />
-      <Divider />
-      <Button color="#794BC4" onPress={emptyFunction} title="Button" />
-      <Divider />
-      <Button color="#E0245E" onPress={emptyFunction} title="Button" />
-      <Divider />
-      <Button disabled onPress={disabledOnPress} title="Disabled button" />
-    </Example>
-  );
-}
-
-const styles = StyleSheet.create({
-  divider: {
-    height: '1rem'
-  }
-});

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>
   );
 }