use Pressable over TouchableWithoutFeedback (facebook#42016)

Summary: Pull Request resolved: facebook#42016 changelog: [internal] TouchableWithoutFeedback is broken with React 18. Before we fix it, let's use Pressable in tests. Reviewed By: fkgozali Differential Revision: D52328529 fbshipit-source-id: 1d7d5032ffaf7f8ff5ffa47af2a87b733fd2e840
dmytrorykun · Dec 21, 2023 · 4885743 · 4885743
1 parent 7eed881
commit 4885743
Showing 1 changed file with 9 additions and 21 deletions.
diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -13,13 +13,7 @@
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
 import * as React from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
+import {Platform, Pressable, StyleSheet, Text, View} from 'react-native';
 
 class ViewBorderStyleExample extends React.Component<
   $ReadOnly<{||}>,
@@ -31,9 +25,7 @@ class ViewBorderStyleExample extends React.Component<
 
   render(): React.Node {
     return (
-      <TouchableWithoutFeedback
-        testID="border-style-button"
-        onPress={this._handlePress}>
+      <Pressable testID="border-style-button" onPress={this._handlePress}>
         <View>
           <View
             style={[
@@ -66,7 +58,7 @@ class ViewBorderStyleExample extends React.Component<
             <Text style={{fontSize: 11}}>Dotted border style</Text>
           </View>
         </View>
-      </TouchableWithoutFeedback>
+      </Pressable>
     );
   }
 
@@ -96,7 +88,7 @@ class OffscreenAlphaCompositing extends React.Component<
 
   render(): React.Node {
     return (
-      <TouchableWithoutFeedback
+      <Pressable
         testID="offscreen-alpha-compositing-button"
         onPress={this._handlePress}>
         <View>
@@ -149,7 +141,7 @@ class OffscreenAlphaCompositing extends React.Component<
             />
           </View>
         </View>
-      </TouchableWithoutFeedback>
+      </Pressable>
     );
   }
 
@@ -181,9 +173,7 @@ class ZIndexExample extends React.Component<
   render(): React.Node {
     const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
     return (
-      <TouchableWithoutFeedback
-        testID="z-index-button"
-        onPress={this._handlePress}>
+      <Pressable testID="z-index-button" onPress={this._handlePress}>
         <View>
           <Text style={{paddingBottom: 10}}>Tap to flip sorting order</Text>
           <View
@@ -231,7 +221,7 @@ class ZIndexExample extends React.Component<
             <Text>ZIndex {indices[3]}</Text>
           </View>
         </View>
-      </TouchableWithoutFeedback>
+      </Pressable>
     );
   }
 
@@ -252,9 +242,7 @@ class DisplayNoneStyle extends React.Component<
 
   render(): React.Node {
     return (
-      <TouchableWithoutFeedback
-        testID="display-none-button"
-        onPress={this._handlePress}>
+      <Pressable testID="display-none-button" onPress={this._handlePress}>
         <View>
           <Text style={{paddingBottom: 10}}>
             Press to toggle `display: none`
@@ -300,7 +288,7 @@ class DisplayNoneStyle extends React.Component<
             }}
           />
         </View>
-      </TouchableWithoutFeedback>
+      </Pressable>
     );
   }