@meksiabdou/react-native-barcode-mask

BarcodeMask Component For React-Native Camera

Requirements

• react-native-reanimated v2.2.0 or higher

Installation

npm install @meksiabdou/react-native-barcode-mask

yarn add @meksiabdou/react-native-barcode-mask

Usage

import React, from 'react';
import {View, TouchableOpacity, StyleSheet, Linking, Text} from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import BarcodeMask from 'react-native-barcode-mask';

const App = () => {
  const [hasPermission, setHasPermission] = useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

  const requestCameraPermission = async () => {
    return await Camera.requestCameraPermission();
  };

  useEffect((): ReturnType<any> => {
    let isMounted = true;
    requestCameraPermission().then(permission => {
      if (isMounted) {
        if (permission === 'denied') {
          Linking.openSettings();
        }
        setHasPermission(permission === 'authorized');
      }
    });
    return () => (isMounted = false);
  }, []);

  if (device == null || !hasPermission) {
    return <View style={styles.container} />;
  }

  return (
    <View style={styles.container}>
      <Camera
        device={device}
        style={StyleSheet.absoluteFill}
        isActive={true}
        torch={'off'}
      />
      <BarcodeMask
        lineAnimationDuration={2000}
        showAnimatedLine={true}
        width={width}
        height={height}
        outerMaskOpacity={0.4}
        backgroundColor="#eee"
        edgeColor={'#fff'}
        edgeBorderWidth={4}
        edgeHeight={25}
        edgeWidth={25}
        edgeRadius={5}
        animatedLineColor={'#0097AB'}
        animatedLineThickness={3}
        animatedLineOrientation="horizontal"
      />
    </View>
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#000',
    //paddingVertical: 50,
  },
});

export default App;

BarcodeMaskProps

| name | type | description | default | | ----------------------- | -------------------------- | ------------------------------------------------ | ------------ | | width | number | Width of the Barcode Finder Area | 280 | | height | number | Height of the Barcode Finder Area | 230 | | edgeWidth | number | Width of corner edges | 20 | | edgeHeight | number | Height of corner edges | 20 | | edgeColor | string | Color of corner edges | #fff | | edgeRadius | number | Border Radius of corner edges | 0 | | edgeBorderWidth | number | Thickness of corner edges | 4 | | backgroundColor | string | Background color of Outer Finder Area | #eee | | maskOpacity | number | Opacity of Outer Finder Area | 1 | | showAnimatedLine | boolean | Whether to show Animated Line | true | | animatedLineThickness | number | Thickness of Animated Line | 2 | | animatedLineOrientation | 'vertical' or 'horizontal' | Orientation that the Animated Line will be drawn | 'horizontal' | | animatedLineColor | string | Color of Animated Line | #fff | | animationDuration | number | Duration of Animated Line animation (in ms) | 20000 | | isActive | boolean | Animation line active or not | true | | onPress | function | # | undefined |

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