Allow RNTester Jest E2E Examples to Run in Paper + Catalyst

Reviewed By: rshest

Differential Revision: D43718044

fbshipit-source-id: baee21db05100e8ef113fb70aac6dc83828d829f

packages/rn-tester/js/components/RNTesterButton.js

@@ -12,7 +12,7 @@
 
 const React = require('react');
 
-const {StyleSheet, Text, TouchableHighlight} = require('react-native');
+const {Pressable, StyleSheet, Text} = require('react-native');
 
 import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
@@ -26,13 +26,12 @@ type Props = $ReadOnly<{|
 class RNTesterButton extends React.Component<Props> {
   render(): React.Node {
     return (
-      <TouchableHighlight
+      <Pressable
         testID={this.props.testID}
         onPress={this.props.onPress}
-        style={styles.button}
-        underlayColor="grey">
+        style={({pressed}) => [styles.button, pressed && styles.pressed]}>
         <Text testID={this.props.textTestID}>{this.props.children}</Text>
-      </TouchableHighlight>
+      </Pressable>
     );
   }
 }
@@ -48,6 +47,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: '#d3d3d3',
   },
+  pressed: {
+    backgroundColor: '#a9a9a9',
+  },
 });
 
 module.exports = RNTesterButton;

packages/rn-tester/js/components/RNTesterPage.js

@@ -10,7 +10,7 @@
 
 const RNTesterTitle = require('./RNTesterTitle');
 const React = require('react');
-const {ScrollView, StyleSheet, View} = require('react-native');
+const {SafeAreaView, ScrollView, StyleSheet, View} = require('react-native');
 import {RNTesterThemeContext} from './RNTesterTheme';
 
 type Props = $ReadOnly<{|
@@ -44,7 +44,7 @@ class RNTesterPage extends React.Component<Props> {
       <RNTesterThemeContext.Consumer>
         {theme => {
           return (
-            <View
+            <SafeAreaView
               style={[
                 styles.container,
                 {backgroundColor: theme.SecondarySystemBackgroundColor},
@@ -54,7 +54,7 @@ class RNTesterPage extends React.Component<Props> {
                 {this.props.children}
                 {spacer}
               </ContentWrapper>
-            </View>
+            </SafeAreaView>
           );
         }}
       </RNTesterThemeContext.Consumer>