@vkorotenko/react-native-slide-verify v0.0.6

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 |