rn-slider-button

RnSlideButton

RnSlideButton is a customizable React Native component for implementing a sliding button with an optional icon. It features smooth animations and various customization options for the button’s appearance. It requires zero dependencies and works out of the box.

Demo

Usage

Here's a basic example of how to use the RnSlideButton component:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import RnSlideButton from 'rn-slider-button/RnSlideButton'; 

const App = () => {
  const handleSlideComplete = () => {
    console.log('Slide action completed!');
  };

  return (
    <View style={styles.container}>
      <RnSlideButton
        onSlideComplete={handleSlideComplete}
        width={300}
        height={50}
        backgroundColor="#3498db"
        textColor="#ffffff"
        text="Slide to Confirm"
        thumbColor="#ffffff"
        iconColor="#3498db"
        shadowColor="#000"
        shadowOffset={{ width: 0, height: 2 }}
        shadowOpacity={0.3}
        shadowRadius={3}
        iconSize={30}
        // iconPath={require('./path-to-your-icon.png')} 
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
});

export default App;

Props

Prop	Type	Default	Description
onSlideComplete	() => void	-	Function to call when the slide action is completed.
width	number	300	Width of the slide button.
height	number	50	Height of the slide button.
backgroundColor	string	#2ecc71	Background color of the button.
textColor	string	#ffffff	Color of the text inside the button.
text	string	Slide To Save	Text to display inside the button.
thumbColor	string	#ffffff	Color of the draggable thumb.
iconColor	string	#2ecc71	Color of the icon inside the thumb.
shadowColor	string	#000	Shadow color for the button.
shadowOffset	{ width: number, height: number }	{ width: 0, height: 2 }	Offset of the shadow.
shadowOpacity	number	0.2	Opacity of the shadow.
shadowRadius	number	2	Radius of the shadow blur.
iconSize	number	24	Size of the icon inside the thumb.
iconPath	number	-	Optional: Path to the icon image (require the image using require).