react-native-slider-icon-button

RNSliderIconButton

A component to swipe and verify which is compatible with low-end mobiles.

Installation

npm install --save react-native-slider-icon-button or yarn add react-native-slider-icon-button

import React, { Component } from 'react';

import {
  View,
  TouchableOpacity, Text,
  Dimensions
} from 'react-native';


const { width } = Dimensions.get('window')

import RNSliderIconButton from 'react-native-slider-icon-button'

import LottieView from 'lottie-react-native';

export default class App extends Component {

  constructor(props) {
    super(props)

    this.state = { isUnlocked: false, isUploaded: false }

  }

  render() {


    const { isUnlocked, isUploaded } = this.state

    const lottieSizeIcon = isUploaded ? 60 : 40;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'flex-end', backgroundColor: '#fff', paddingBottom: 40 }}>


        {/** Lottie example */}
        <View style={{ marginTop: 20 }}>
          <RNSliderIconButton ref={ref => this.swipeVerify2 = ref}
            width={width - 50}
            buttonSize={60}
            buttonColor="#2962FF"
            borderColor="#2962FF"
            backgroundColor="#fff"
            textColor="#37474F"
            borderRadius={30}
            okButton={{ visible: true, duration: 400 }}
            onVerified={() => {
              this.setState({ isUploaded: true })
            }}
            icon={
              <View style={{ width: lottieSizeIcon, height: lottieSizeIcon }}>
                <LottieView
                  source={isUploaded ? require('./lottie_files/ready_to_upload.json') : require('./lottie_files/cloud_upload.json')}
                  autoPlay

                  resizeMode='contain'
                  loop={!isUploaded}
                />
              </View>
            }
          >

            <Text>{isUploaded ? 'UPLOADED' : 'slide to upload'}</Text>

          </RNSliderIconButton>
        </View>
        {/** end Lottie example */}






        <View style={{ marginTop: 20 }}>
          <RNSliderIconButton
            width={width - 50}
            loading={false}
            iconColor="#37474F"
            disabled={false}
            buttonSize={60}
            initialColor="#37474F"
            finalColor="#D50000"
            textStyle={}
            onVerified={() => {
              this.setState({ isUnlocked: true })
            }}
            icon={<Image source={isUnlocked ? require('./img/unlocked.png') : require('./img/locked.png')} style={{ width: 40, height: 40 }} />}
          >

            <Text>{isUnlocked ? 'UNLOCKED' : 'slide to unlock'}</Text>

          </RNSliderIconButton>
        </View>


        <TouchableOpacity onPress={() => {

          this.swipeVerify2.reset()
          this.swipeVerify3.reset()
          this.setState({ isUnlocked: false, isUploaded: false })
        }} style={{ marginTop: 30 }}>
          <Text style={{ padding: 10, color: '#f00', fontSize: 25 }}>RESET</Text>
        </TouchableOpacity>



      </View>
    );
  }
}

Props

name	type	default	description
width (required)	number	required	the width of swipe-verify
buttonSize (required)	number	required	the button (Icon) size of swipe-verify
initialColor (optional)	string	#D50000	button background color towards the right
finalColor (optional)	string	#D50000	button background color towards the left
textStyle (optional)	object	{}	text style for the text on the slider button
icon (optional)	component		see the example to more information
borderColor (optional)	string	#D50000	border color
borderRadius (optional)	number	0	border radius to the button and container
loading (optional)	boolean	{true}	if ActivityIndicator is shown or not
iconColor (optional)	string	#D50000	icon background color
disabled (optional)	boolean	{true}	if disabled or not

Callbacks

name	arguments	notes
onVerified (required)	bool	listener to check if the swipe is verified (user has completed swipe)

Methods

name	arguments	notes
reset()	none	reset the swipe-verify to default values