Skip to content

Latest commit

 

History

History
83 lines (61 loc) · 2.79 KB

File metadata and controls

83 lines (61 loc) · 2.79 KB

Animated Scanner

Animated Scanner Component gives animation to user when they scan any document, QR code etc.

🎬 Preview

Animated Scanner
alt_tag

Default usage


import React from 'react';
import { AnimatedScanner } from 'react-native-animation-catalog';

const AnimatedScanner = () => <AnimatedScanner />;

export default AnimatedScanner;

Custom Usage


import React from 'react';
import { AnimatedScanner } from 'react-native-animation-catalog';

const AnimatedScanner = () => (
  <AnimatedScanner
      stopZooming={true}
      style={style.customStyle}
      borderColor = {#000000}
      strokeDelay = {1400}
      strokeColor = {'#0000FF'}
      initialZoomScale = {0.9}
      height = {200}
      zoomingDelay = {800}
      borderRadius = {10}
      borderWidth = {2}
      strokeWidth = {240}
  />;
);

const styles = Stylesheet({
  customStyle: {
    marginTop: 100,
  },
});

export default AnimatedScanner;

🎬 Custom Usage Preview


alt tag

Properties

Props Default Type Description
stopZooming false boolean stopZooming to stop outer zooming in Animated Scanner.
initialZoomScale 0.9 number initialZoomScale use for outer component zooming effect.
height 200 number height to set AnimatedScanner component height.
style {{ marginTop: 100 }} object style to set component style.
zoomingDelay 800 number zoomingDelay use for outer component zoomingDelay.
bordercolor #01579B string borderColor use to give color for outer zooming component.
borderRadius 10 number borderRadius to set outer component border.
borderWidth 2 number borderWidth set outer component borderWidth.
strokeColor red string strokeColor add vertical animation color.
strokeDelay 1400 number strokeDelay delay in vertical animation.
strokeWidth 240 number strokeWidth increase and decrease width of verticalAnimation.

🎬 Preview Example


Animated Scanner