Package Exports

slide-button-with-threshold
slide-button-with-threshold/src/SlideToPayButton.tsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (slide-button-with-threshold) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Sliding Button

A customizable slide-to-execute button for React Native applications.

Sliding Button Demo1 Sliding Button Demo2

Features

Customizable Text: Set a custom label for the button.
Threshold Control: Define the percentage of the slider width required to trigger the action.
Animations: Enjoy elastic bounce effects and visual feedback when sliding.
Gesture Support: Utilizes gesture handling for smooth user interactions.

System Design

For insights into the design process and considerations behind this sliding button component, check out this article:

Understanding System Design for User Interfaces

Installation

You can install the package using npm:

npm install slide-button-with-threshold

Make sure to also install the required peer dependencies if they are not already included in your project:

npm install react-native-gesture-handler react react-native

Additionally, wrap your main application component with GestureHandlerRootView to enable gesture handling:

import React from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";

const App = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app components */}
    </GestureHandlerRootView>
  );
};

How to Use the Package

Import the necessary components from React Native and your package. Here's an example of how to implement the sliding button:

import React from "react";
import { Alert, SafeAreaView } from "react-native";
import SlideToPayButton from "slide-button-with-threshold";
import { GestureHandlerRootView } from "react-native-gesture-handler";

const App = () => {
  const handleActionComplete = () => {
    Alert.alert("Action completed!");
  };

  return (
    <SafeAreaView
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <GestureHandlerRootView>
        <SlideToPayButton
          onComplete={handleActionComplete}
          // text="Slide to Execute" // Custom label
          // threshold={0.7} // Custom threshold
          // sliderWidth={300} // Custom slider width
          // sliderHeight={70} // Custom slider height
          // thumbWidth={55} // Custom thumb width
        />
      </GestureHandlerRootView>
    </SafeAreaView>
  );
};

export default App;

Props

text (string): Custom label for the button (default: "Slide to Execute").
threshold (number): Percentage of slider width to reach for action completion (default: 0.7).
sliderWidth (number): Width of the slider (default: 300).
sliderHeight (number): Height of the slider (default: 70).
thumbWidth (number): Width of the draggable thumb (default: 55).
onComplete (function): Callback function to be called when the action is completed.

Feel free to customize the props to fit your design requirements!