RNSwipeVerify

A small componenent to Swipe Verify

Installation

npm install --save react-native-swipe-verify yarn add react-native-swipe-verify

Preview

| | | | --- | --- | | | |

Important

If the RNSwipeVerify is inside another component with PanResponder the RNSwipeVerify will be cancelled.

Usage

import React, { Component } from 'react';

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


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

import RNSwipeVerify from 'react-native-swipe-verify'

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 }}>
          <RNSwipeVerify 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>

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






        <View style={{ marginTop: 20 }}>
          <RNSwipeVerify ref={ref => this.swipeVerify3 = ref}
            width={width - 50}
            buttonSize={60}
            borderColor="#fff"
            buttonColor="#37474F"
            backgroundColor="#ececec"
            textColor="#37474F"
            okButton={{ visible: false, duration: 400 }}
            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>

          </RNSwipeVerify>
        </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 | | backgroundColor (optional) | string | #F50057 | background color | | buttonColor (optional) | string | #D50000 | button background color | | 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 | | okButton (optional) | object | { visible: true, duration: 300 } | if visible is false the icon button will be hidden, duration (number) is the animation duration in miliseconds |

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 |