react-native-slide-verify

<SlideVerify> component for react-native 0.70.0 with TypeScript support. Drag the slider to fill the puzzle for verifying normal operation.

Installation

yarn add @vkorotenko/react-native-slide-verify

ensure to link react-native-vector-icons

Remarks

Local npm https://habr.com/ru/post/427069/

Usage

import SlideVerify from '@vkorotenko/react-native-slide-verify'

...

render() {
  return (
    <View style={{ alignItems: 'center', justifyContent: 'center', marginVertical: 20}}>

      // use default verify images
      <SlideVerify 
        useDefault
        onVerifyPassed={alert('passed')}
        onVerifyFailed={alert('failed')}
      />

      // use specified verify images
      <SlideVerify
        puzzle={{ url: 'url/to/image'}}
        puzzlePiece={require('path/to/image')}
        slideVerify={offset => { console.log(offset); return Promise.resolve() }}
        showRefresh
        refresh={() => alert('refresh')}
        slideTips={I18n.t('slideTips')}
      >
    </View>
  )
}

Component Props

use default verify images

Property	Type	Description
useDefault	bool (default false)	use default verify images
onVerifyPassed	func (default () => {})	verify passed callback
onVerifyFaild	func (default () => {})	verify failed callback

use specified verify images

Property	Type	Description
imageSize	object ({puzzleWidth: number(default 300), puzzleHeight: number(default 150), puzzlePieceWidth: number(default 50)})	optional. custom image diplay size, related to slide offset (puzzleWidth decides the container width)
puzzle	object or number	background image. object with {url: 'xxx'} or result of require('path/to/image')
puzzlePiece	object or number	piece image. object with {url: 'xxx'} or result of require('path/to/image')
showRefresh	bool (default false)	show refresh icon on the top right corner
refresh	func (default () => {})	refresh icon onPress listener
slideVerify	func (default () => {})	called to verify when releasing finger on the dragging slider. pass offset as param. The func should return promise of verify result

common props

Property	Type	Description
displayType	string (default 'triggered')	puzzle image display type. enum('triggered', 'embedded')
slideTips	string (default '向右滑动左侧箭头填充拼图')	slide tips showed in slide box