React Native Custom Slider Button

Enhance your app's interactivity and uniqueness with this customizable package, allowing you to create animated buttons tailored perfectly to your app's theme.

Motivation

🚀 Buttons are the gateway to interaction in any app. This customizable animated button package helps making every tap engaging and on-brand.

Our goal? A delightful user experience, one button at a time.

This package makes it easy to design buttons that look great and provide a better experience for your users.

Key Features

🎨 Theme Matching

Bring your app's theme to life. Choose your background, icon, and title and more to create a unique design. The possibilities are endless!

✨ Animated Interactions

Add smooth animations to enhance user engagement.

🛠️ Easy Integration

Simple to implement in any React Native project with minimal setup.

📱 Platform Support

Ensure a consistent and smooth update experience across iOS & Android devices.

Installation (RN > 0.60)

Install the package.

npm install react-native-custom-slider-button

Remember to install the pod with:

npx pod install

Usage

Begin by importing the package into your screen to start using it.

import AnimatedButton from 'react-native-custom-slider-button';

Start with the simplest setup: Like the default design? Then all you need to do is add an onSwipeEnd function and you are good to go!

 <AnimatedButton
    onSwipeEnd={() => {
        onButtonSwiped();
    }}
/>

Add Your Flavor: Customize your overlay by tweaking the main title, description, colors, button title, and icon to perfectly match your app’s style.

 <AnimatedButton
    buttonWidth={200}
    buttonHeight={70}
    mainIcon={customIcon}
    backgroundImage={customBackgroundImage}
    mainIconHeight={50}
    mainIconWidth={50}
    buttonBorderColor={"#FFB996"}
    buttonBorderRadius={8}
    onSwipeEnd={() => {
        onButtonSwiped(true);
    }}
/>

Customize the Title: Set the text and style to match your preferences.

 <AnimatedButton
    primaryTitle={"My Primary Title"}
    secondaryTitle={"My Secondary Title"}
    titleSize={22}
    titleColor={"#CBE2B5"}
    titleFontFamily={"BlenderPro-Thin"}
    onSwipeEnd={() => {
        onButtonSwiped(true)
    }}
/>

Want to Keep It Simple? Disable the background image and text, leaving just the icon for a simple and minimalist design.

 <AnimatedButton
    primaryTitleRequired={false}
    secondaryTitleRequired={false}
    backgroundImageRequired={false}
    mainIcon={customIcon}
    buttonBackgroundColor={"#CBE2B5"}
    onSwipeEnd={() => {
        onButtonSwiped(true)
    }}
/>

Properties

Basic

| Prop | Description | Type | | --------------------------- | -------------------------------------------- | ---------- | | onSwipeEnd | A function to run when the button is swiped. | Function | | buttonWidth | Sets button width. | Number | | buttonHeight | Sets button height. | Number | | buttonBorderColor | Sets button border color. | String | | buttonBackgroundColor | Sets button background color. | String | | buttonBorderRadius | Sets button border radius. | Number |

Title

| Prop | Description | Type | | ---------------------------- | ----------------------------------------------------------------------------------------- | --------- | | primaryTitleRequired | Allows to toggle the option to show or hide primary text as needed. (default: true) | Boolean | | secondaryTitleRequired | Allows to toggle the option to show or hide secondary text as needed. (default: true) | Boolean | | primaryTitle | Sets the primary title. | String | | secondaryTitle | Sets the secondary title. | String | | titleSize | Allows to customize the button title size. | Number | | titleColor | Allows to customize the button title color. | Boolean | | titleFontFamily | Allows to customize the button title font family. | String |

Icon

| Prop | Description | Type | | ----------------------------- | ---------------------------------------------------------------------------- | --------- | | mainIcon | Sets the custom icon. | Image | | mainIconWidth | Sets width for the custom icon. | Number | | mainIconHeight | Sets height the custom icon. | Number | | backgroundImageRequired | Allows to toggle the option to display background image. (default: true) | Boolean | | backgroundImage | Sets custom background image. | Image |

License

This project is licensed under the MIT License - see the LICENSE file for details.