react-native-swipe-verify

RNSwipeVerify

A small componenent to Swipe Verify

Installation

npm install --save 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'

export default class App extends Component {

  constructor(props) {
    super(props)

    this.state = {
      verify: false
    }

  }

  render() {

    const { verify } = this.state
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>


        <RNSwipeVerify 
          ref={ref => this.swipeVerify = ref} 
          puzzleSize={60} 
          width={width - 40} 
          onVerify={verify => this.setState({ verify })}
          text={verify ? "VERIFIED" : "Slide to verify"} 
          puzzleColor="#01579B" 
          borderColor={verify ? '#1DE9B6' : '#01579B'}
          textColor={verify ? '#1DE9B6' : '#01579B'} 
          backgroundColor="#fff"
          icon={require('../img/swipe.png')}      
        />


        {this.state.verify && (<TouchableOpacity onPress={() => this.swipeVerify.reset(false)} style={{ marginTop: 30 }}>
          <Text style={{ padding: 10, color: '#0091EA', fontSize: 25 }}>RESET</Text>
        </TouchableOpacity>)}

      </View>
    );
  }
}

Props

name	type	default	description
width (required)	number	required	the width of swipe-verify
puzzleSize (required)	number	required	the puzzle (Icon) size of swipe-verify
backgroundColor (optional)	string	#F50057	background color
puzzleColor (optional)	string	#D50000	puzzle background color
icon (optional)	image	arrow icon	image to puzzle (only .png or .jpg). You can use icon={require('../img/swipe.png')} or icon={{ uri: 'http://images.com/swipe-icon.jpg'}}
text (optional)	string	#D50000	text to show
textColor (optional)	string	#FFFFFF	text color
borderColor (optional)	string	#D50000	border color

Callbacks

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

Methods

name	arguments	notes
reset(bool) (required)	bool (animate)	reset the swipe-verify to default values