Update TouchableWithoutFeedback to Pressable so React Native Web accessibility properties can be used

[louie-succio]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-switch@2.0.0 for the project I'm working on.

While working in my RN code base, I was trying to make some accessibility enhancements for web specific to this Switch element. Specifically I wanted aria-checked to appear (by passing accessibilityChecked from my code) on the switch element in the DOM and have it display the correct value, true or false, based on the value of the switch. The only way I could figure out how to do this was to update the TouchableWithoutFeedback component to Pressable which allows for accessibility properties to be rendered in the DOM. I tested this on web, ios, and android and noticed everything worked and looked okay.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-switch/lib/Switch.js b/node_modules/react-native-switch/lib/Switch.js
index c4ccc20..4911a3b 100644
--- a/node_modules/react-native-switch/lib/Switch.js
+++ b/node_modules/react-native-switch/lib/Switch.js
@@ -5,9 +5,9 @@ import {
   StyleSheet,
   Animated,
   PanResponder,
-  TouchableWithoutFeedback,
-  ViewPropTypes
+  Pressable
 } from "react-native";
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import PropTypes from "prop-types";

 export class Switch extends Component {
@@ -128,21 +128,25 @@ export class Switch extends Component {
   animateSwitch = (value, cb = () => {}) => {
     Animated.parallel([
       Animated.spring(this.state.transformSwitch, {
+        useNativeDriver:false,
         toValue: value
           ? this.props.circleSize / this.props.switchLeftPx
           : -this.props.circleSize / this.props.switchRightPx
       }),
       Animated.timing(this.state.backgroundColor, {
         toValue: value ? 75 : -75,
-        duration: 200
+        duration: 200,
+        useNativeDriver:false
       }),
       Animated.timing(this.state.circleColor, {
         toValue: value ? 75 : -75,
-        duration: 200
+        duration: 200,
+        useNativeDriver:false
       }),
       Animated.timing(this.state.circleBorderColor, {
         toValue: value ? 75 : -75,
-        duration: 200
+        duration: 200,
+        useNativeDriver:false
       })
     ]).start(cb);
   };
@@ -197,7 +201,7 @@ export class Switch extends Component {
     });

     return (
-      <TouchableWithoutFeedback onPress={this.handleSwitch} {...restProps}>
+      <Pressable onPress={this.handleSwitch} {...restProps} hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}>
         <Animated.View
           style={[
             styles.container,
@@ -251,7 +255,7 @@ export class Switch extends Component {
             )}
           </Animated.View>
         </Animated.View>
-      </TouchableWithoutFeedback>
+      </Pressable>
     );
   }
 }

This issue body was partially generated by patch-package.

[louie-succio]

@shahen94 Please review if you have a chance