Allow overriding the internal screenReaerEnabled value

README.md

@@ -10,6 +10,18 @@
 
 <hr>
 
+
+## Description
+- Highly customizable "swipe to submit" category button. 
+- Generally used in exchange of regular buttons to avoid accidental taps.
+- This component works for Android, iOS and Web application.
+- Supports RTL out of the box.
+- Provides accessiblity support.
+- Component has more than 85% test coverge.
+- 100% TypeScript
+- MIT License
+
+
 ## Installation 
 
 ```bash
@@ -65,6 +77,12 @@ import SwipeButton from 'rn-swipe-button';
 </div>
 <hr>
 
+<h2 style="color:darkgreen;">Web Demo</h2>
+<p align="center">
+  <img src="https://github.com/UdaySravanK/RNSwipeButtonDemo/blob/main/assets/images/rn-swipe-button-web.gif" width="400"/>
+</p>
+
+
 <h2 style="color:darkgreen;">Component properties</h2>
 <pre style="font-size: 15px; color: brown;">
     <b>containerStyles</b>: PropTypes.object,
@@ -90,7 +108,7 @@ import SwipeButton from 'rn-swipe-button';
     <b>railFillBorderColor</b>: PropTypes.string,
     <b>railStyles</b>: PropTypes.object,
     <b>resetAfterSuccessAnimDelay</b>: PropTypes.number, <span style="color: blueviolet">// This is delay before resetting the button after successful swipe When shouldResetAfterSuccess = true </span>
-    <b>screenReaderEnabled</b>: PropTypes.bool,
+    <b>screenReaderEnabled</b>: PropTypes.bool, <span style="color: blueviolet">// Overrides the internal value </span>
     <b>shouldResetAfterSuccess</b>: PropTypes.bool, <span style="color: blueviolet">// If set to true, buttun resets automatically after swipe success with default delay of 1000ms</span>
     <b>swipeSuccessThreshold</b>: PropTypes.number, <span style="color: blueviolet">// Ex: 70. Swipping 70% will be considered as successful swipe</span>
     <b>thumbIconBackgroundColor</b>: PropTypes.string,

src/components/SwipeButton/__tests__/SwipeButton.test.tsx

@@ -163,4 +163,24 @@ describe("Component: SwipeButton UI Rendering Tree & Props", () => {
     // Assert
     expect(screen.toJSON()).toMatchSnapshot();
   });
+
+  it("should render correctly with screen reader enabled", async () => {
+    // Setup
+    render(<SwipeButton screenReaderEnabled />);
+    const button = screen.getAllByTestId("SwipeButton")[0];
+    fireEvent(button, "onLayout", { nativeEvent: { layout: { width: 100 } } });
+
+    // Assert
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it("should render correctly with screen reader disabled", async () => {
+    // Setup
+    render(<SwipeButton screenReaderEnabled={false} />);
+    const button = screen.getAllByTestId("SwipeButton")[0];
+    fireEvent(button, "onLayout", { nativeEvent: { layout: { width: 100 } } });
+
+    // Assert
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
 });

src/components/SwipeButton/__tests__/__snapshots__/SwipeButton.test.tsx.snap

@@ -1194,6 +1194,244 @@ exports[`Component: SwipeButton UI Rendering Tree & Props should render correctl
 </View>
 `;
 
+exports[`Component: SwipeButton UI Rendering Tree & Props should render correctly with screen reader disabled 1`] = `
+<View
+  accessibilityHint="Swipe to submit"
+  accessibilityLabel="Swipe to submit"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onLayout={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "backgroundColor": "#7CF3F9",
+      "borderColor": "#073436",
+      "borderRadius": 50,
+      "borderWidth": 1,
+      "justifyContent": "center",
+      "margin": 5,
+      "opacity": 1,
+    }
+  }
+  testID="SwipeButton"
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={1}
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "position": "absolute",
+        },
+        {
+          "color": "#083133",
+          "fontSize": 20,
+        },
+      ]
+    }
+  >
+    Swipe to submit
+  </Text>
+  <View
+    collapsable={false}
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="auto"
+    style={
+      {
+        "alignItems": "flex-end",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#00000000",
+        "borderColor": "#00000000",
+        "borderRadius": 50,
+        "borderRightWidth": 0,
+        "borderWidth": 3,
+        "margin": 1,
+        "width": 50,
+      }
+    }
+    testID="SwipeThumb"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 50,
+            "borderWidth": 2,
+            "justifyContent": "center",
+            "marginVertical": -3,
+          },
+          {
+            "backgroundColor": "#D27030",
+            "borderColor": "#3D797C",
+            "height": 50,
+            "overflow": "hidden",
+            "width": 50,
+          },
+        ]
+      }
+      testID="DefaultThumbIcon"
+    />
+  </View>
+</View>
+`;
+
+exports[`Component: SwipeButton UI Rendering Tree & Props should render correctly with screen reader enabled 1`] = `
+<View
+  accessibilityHint="Double tap to activate"
+  accessibilityLabel="Swipe to submit"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onLayout={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "backgroundColor": "#7CF3F9",
+      "borderColor": "#073436",
+      "borderRadius": 50,
+      "borderWidth": 1,
+      "justifyContent": "center",
+      "margin": 5,
+      "opacity": 1,
+    }
+  }
+  testID="SwipeButton"
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={1}
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "position": "absolute",
+        },
+        {
+          "color": "#083133",
+          "fontSize": 20,
+        },
+      ]
+    }
+  >
+    Swipe to submit
+  </Text>
+  <View
+    collapsable={false}
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="auto"
+    style={
+      {
+        "alignItems": "flex-end",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#00000000",
+        "borderColor": "#00000000",
+        "borderRadius": 50,
+        "borderRightWidth": 0,
+        "borderWidth": 3,
+        "margin": 1,
+        "width": 50,
+      }
+    }
+    testID="SwipeThumb"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 50,
+            "borderWidth": 2,
+            "justifyContent": "center",
+            "marginVertical": -3,
+          },
+          {
+            "backgroundColor": "#D27030",
+            "borderColor": "#3D797C",
+            "height": 50,
+            "overflow": "hidden",
+            "width": 50,
+          },
+        ]
+      }
+      testID="DefaultThumbIcon"
+    />
+  </View>
+</View>
+`;
+
 exports[`Component: SwipeButton UI Rendering Tree & Props should render with correct styles when disable 1`] = `
 <View
   accessibilityHint="Button disabled"