[change] Deprecate Touchables and Button components

These components have been replaced by Pressable and will be removed from React Native. Fix #2382
necolas · Sep 1, 2022 · 87d35b4 · 87d35b4
1 parent 234a114
commit 87d35b4
Show file tree

Hide file tree

Showing 15 changed files with 51 additions and 277 deletions.
diff --git a/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap b/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;

diff --git a/packages/babel-plugin-react-native-web/src/__tests__/index-test.js b/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
   }
 ];

diff --git a/packages/benchmarks/src/app/App.js b/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>

diff --git a/packages/benchmarks/src/app/Button.js b/packages/benchmarks/src/app/Button.js
@@ -1,10 +1,13 @@
 import { StyleSheet, TouchableHighlight, Text } from 'react-native';
 import React, { Component } from 'react';
+import { warnOnce } from '../../modules/warnOnce';
 
 export default class Button extends Component<*> {
   static displayName = '@app/Button';
 
   render() {
+    warnOnce('Button', 'Button is deprecated. Please use Pressable.');
+
     const {
       accessibilityLabel,
       color,

diff --git a/packages/react-native-web-docs/src/pages/docs/components/button.md b/packages/react-native-web-docs/src/pages/docs/components/button.md
diff --git a/packages/react-native-web-docs/src/pages/docs/components/touchables.md b/packages/react-native-web-docs/src/pages/docs/components/touchables.md
diff --git a/packages/react-native-web-examples/pages/button/index.js b/packages/react-native-web-examples/pages/button/index.js
diff --git a/packages/react-native-web-examples/pages/flatlist/index.js b/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>
     );
   }
 }

diff --git a/packages/react-native-web-examples/pages/scroll-view/index.js b/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>
   );
 }