Skip to content

Instantly share code, notes, and snippets.

@raymelon

raymelon/barcode-mask-example-3.jsx

Forked from shahnawaz/barcode-mask-example-3.jsx
Created November 3, 2021 13:16
Show Gist options
  • Save raymelon/35e6a7f44ac22f9fc6e3d4e2c2c6d1cc to your computer and use it in GitHub Desktop.
Save raymelon/35e6a7f44ac22f9fc6e3d4e2c2c6d1cc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @shahnawaz shahnawaz revised this gist Jun 22, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion barcode-mask-example-3.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -58,7 +58,7 @@ class ItemBarcodeScanContainer extends React.Component {
    // ... other related props of RNCamera
    >
    <BarcodeMask
    width={100} height={300} showAnimatedLine={false} transparency={0.8}
    width={100} height={300} showAnimatedLine={false} outerMaskOpacity={0.8}
    />
    </RNCamera>
    </View>
  2. @shahnawaz shahnawaz created this gist Mar 24, 2019.
    87 changes: 87 additions & 0 deletions barcode-mask-example-3.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,87 @@
    import React from "react";
    import {
    Text,
    View,
    Item,
    Icon,
    Input,
    Button
    } from 'native-base';
    import { KeyboardAvoidingView } from "react-native";
    import { RNCamera } from 'react-native-camera';
    import BarcodeMask from 'react-native-barcode-mask';

    const styles = {
    root: {
    flex: 1,
    },
    upperSection: {
    flex: 1
    },
    lowerSection: {
    paddingVertical: 30,
    paddingHorizontal: 20,
    backgroundColor: 'white',
    },
    camera: {
    height: '100%',
    },
    };

    class ItemBarcodeScanContainer extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
    barcode: ''
    }
    }

    onBarCodeRead = (scanResult) => {
    // scanResult.data will contain your scanned data
    }

    onGetItemPress = () => {
    // do something with button press
    }

    handleChange = () => {
    // handle user input
    }

    render() {
    return (
    <KeyboardAvoidingView style={styles.root}> {/* OR Use a simple <View> instead of <KeyboardAvoidingView> */}
    <View style={styles.upperSection}>
    <RNCamera
    onBarCodeRead={this.onBarCodeRead}
    // ... other related props of RNCamera
    >
    <BarcodeMask
    width={100} height={300} showAnimatedLine={false} transparency={0.8}
    />
    </RNCamera>
    </View>
    <View style={styles.lowerSection}>
    <Item>
    <Icon type={"Ionicons"} active name='md-barcode' />
    <Input
    placeholder='Barcode of the item'
    value={this.state.barcode}
    onChangeText={this.handleChange}
    />
    </Item>
    <Button
    primary
    onPress={this.onGetItemPress}
    >
    <Text>Get Item</Text>
    </Button>
    </View>
    </KeyboardAvoidingView>
    )
    }

    }

    export default ItemBarcodeScanContainer;