@krmao/react-native-captcha

react-native-captcha

Preview

Installation

yarn add @krmao/react-native-captcha
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-get-random-values
yarn add crypto-js

Usage

import Captcha from '@krmao/react-native-captcha';

export default function App() {
  return (
    <SafeAreaView style={styles.root}>
      <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollViewContainer}>
        <StatusBar translucent={true} backgroundColor={'#0000ff33'} barStyle={'dark-content'} />
      </ScrollView>
      <Captcha />
    </SafeAreaView>
  );
}

Props

export interface CaptchaProps {
  /**
   * 禁用滑块滑动, default false
   */
  disableSlider?: boolean;
  localBubbleBehindType?: LocalBubbleBehindType;
  /**
   * 校验的误差范围内算成功 default 3
   */
  maxOffset?: number;
  /**
   * 滑块尺寸 default 38
   */
  thumbSize?: number;
  /**
   * 弹窗尺寸 default 49
   */
  bubbleSize?: number;
  /**
   * 底图宽度 default 292
   */
  imageWidth?: number;
  /**
   * 底图高度 default 145
   */
  imageHeight?: number;
  verifyLocal?: (
    sliderCurrentProgress: number,
    randomBubbleXProgress: number,
    maxOffset: number,
    events: PanGestureHandlerEventPayload[],
    touchTime: number | undefined
  ) => boolean;
  verifyRemote?: (
    isVerifyLocalSuccess: boolean,
    slideValue: number,
    maxOffset: number,
    events: PanGestureHandlerEventPayload[],
    touchTime: number | undefined
  ) => Promise<boolean>;
  /**
   * sliding start
   */
  onSlidingStart?: () => void;
  onSlidingTouchBegin?: () => void;
  /**
   * on refresh clicked
   */
  onRefreshClicked?: () => void;
  onSlidingComplete?: () => void;
  /**
   * replace the all background image sources
   */
  imageBackgroundSources?: ImageSourcePropType[];
  /**
   * replace the all bubble image sources
   */
  imageBubbleSources?: BubbleSource[];
  /**
   * replace the refresh image sources
   */
  imageRefreshSource?: ImageSourcePropType;
  /**
   * 向右滑动滑块解锁拼图
   */
  defaultSliderText?: string;
}

Todo

• I will remove the react-native-awesome-slider source code if my Pull request is merged

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library