rn-slider-button v1.0.1

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