• Stars
    star
    310
  • Rank 134,926 (Top 3 %)
  • Language
    Java
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A smart barcode scanner component for React Native app.

react-native-smart-barcode

npm npm npm npm

A smart barcode scanner component for React Native app. The library uses https://github.com/zxing/zxing to decode the barcodes for android, and also supports ios.

Preview

react-native-smart-barcode-preview-ios

Installation

npm install react-native-smart-barcode --save

Notice

It can only be used greater-than-equal react-native 0.4.0 for ios, if you want to use the package less-than react-native 0.4.0, use npm install [email protected] --save

Installation (iOS)

  • Drag RCTBarCode.xcodeproj to your project on Xcode.

  • Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTBarCode.a from the Products folder inside the RCTBarCode.xcodeproj.

  • Look for Header Search Paths and make sure it contains $(SRCROOT)/../../../react-native/React as recursive.

  • Dray raw folder to your project

  • Add Privacy - Camera Usage Description property in your info.plist(for ios 10)

Installation (Android)

  • In android/settings.gradle
...
include ':react-native-smart-barcode'
project(':react-native-smart-barcode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-barcode/android')
  • In android/app/build.gradle
...
dependencies {
    ...
    // From node_modules
    compile project(':react-native-smart-barcode')
}
  • In MainApplication.java
...
private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    //  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
              new MainReactPackage()
      );
    }
  };

  public void setReactNativeHost(ReactNativeHost reactNativeHost) {
    mReactNativeHost = reactNativeHost;
  }

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
...
  • In MainActivity.java
...
import com.reactnativecomponent.barcode.RCTCapturePackage;    //import RCTCapturePackage
...
@Override
protected void onCreate(Bundle savedInstanceState) {
    MainApplication application = (MainApplication) this.getApplication();
    application.setReactNativeHost(new ReactNativeHost(application) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new RCTCapturePackage(MainActivity.this)    //register Module
            );
        }

    });

    super.onCreate(savedInstanceState);
}
  • In AndroidManifest.xml, add camera permissions
...
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE"/>

<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
...

Full Demo

see ReactNativeComponentDemos

Usage

Install the package from npm with npm install react-native-smart-barcode --save. Then, require it from your app's JavaScript files with import Barcode from 'react-native-smart-barcode'.

import React, {
    Component,
} from 'react'
import {
    View,
    StyleSheet,
    Alert,
} from 'react-native'

import Barcode from 'react-native-smart-barcode'
import TimerEnhance from 'react-native-smart-timer-enhance'

class BarcodeTest extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            viewAppear: false,
        };
    }

    render() {

        return (
            <View style={{flex: 1, backgroundColor: 'black',}}>
                {this.state.viewAppear ? <Barcode style={{flex: 1, }}
                                                  ref={ component => this._barCode = component }
                                                  onBarCodeRead={this._onBarCodeRead}/> : null}
            </View>
        )
    }

    componentDidMount() {
        let viewAppearCallBack = (event) => {
            this.setTimeout( () => {
                this.setState({
                    viewAppear: true,
                })
            }, 255)

        }
        this._listeners = [
            this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack)
        ]

    }

    componentWillUnmount () {
        this._listeners && this._listeners.forEach(listener => listener.remove());
    }

    _onBarCodeRead = (e) => {
        console.log(`e.nativeEvent.data.type = ${e.nativeEvent.data.type}, e.nativeEvent.data.code = ${e.nativeEvent.data.code}`)
        this._stopScan()
        Alert.alert(e.nativeEvent.data.type, e.nativeEvent.data.code, [
            {text: 'OK', onPress: () => this._startScan()},
        ])
    }

    _startScan = (e) => {
        this._barCode.startScan()
    }

    _stopScan = (e) => {
        this._barCode.stopScan()
    }

}

export default TimerEnhance(BarcodeTest)

Props

Prop Type Optional Default Description
barCodeTypes array Yes determines the supported barcodeTypes
scannerRectWidth number Yes 255 determines the width of scannerRect
scannerRectHeight number Yes 255 determines the height of scannerRect
scannerRectTop number Yes 0 determines the top shift of scannerRect
scannerRectLeft number Yes 0 determines the left shift of scannerRect
scannerLineInterval number Yes 3000 determines the interval of scannerLine's movement
scannerRectCornerColor string Yes #09BB0D determines the color of scannerRectCorner

More Repositories

1

react-native-smart-splash-screen

A smart splash screen for React Native apps
Java
490
star
2

react-native-smart-pull-to-refresh-listview

A smart pull-down-refresh and pull-up-loadmore react-native listview, for ios, written in pure JS, for android, written in JS and Java.
JavaScript
198
star
3

react-native-smart-amap

react-native 高德地图SDK 插件
Objective-C
176
star
4

react-native-smart-amap-location

react-native 高德地图-定位SDK 插件
Objective-C
110
star
5

react-native-smart-sortable-sudoku-grid

A smart sortable sudoku grid for React Native apps
JavaScript
107
star
6

react-native-smart-gesture-password

A smart gesture password locker for react-native apps
JavaScript
95
star
7

react-native-smart-parabola

A smart parabola for react-native apps
JavaScript
65
star
8

react-native-smart-image-loader

A smart asynchronous image downloader with cache for React Native apps
Objective-C
65
star
9

react-native-smart-badge

A smart badge for react-native apps
JavaScript
63
star
10

react-native-smart-corner-label

A smart corner label for React Native app
JavaScript
62
star
11

react-native-smart-alipay

react-native 支付宝SDK 插件
Objective-C
57
star
12

react-native-smart-loading-spinner-overlay

A smart loading spinner overlay for React Native apps.
JavaScript
53
star
13

react-native-smart-button

A smart button for react-native apps
JavaScript
46
star
14

react-native-smart-touch-id

React Native authentication with the native Touch ID popup.
Objective-C
36
star
15

react-native-smart-timer-enhance

A TimerEnhance for React Native app (es6) which replaced TimerMixin (es5) provides timer functions for executing code in the future that are safely cleaned up when the component unmounts
JavaScript
36
star
16

react-native-smart-toast

A android like toast for android and ios, written in JS.
JavaScript
31
star
17

react-native-smart-sudoku-grid

A smart sudoku grid layout for react-native apps
JavaScript
21
star
18

react-native-smart-security-text

A smart security text for React Native apps
JavaScript
15
star
19

react-native-smart-app-event-listener-enhance

An AppEventListenerEnhance for React Native app which provides addEventListener functions that are safely cleaned up when the component unmounts
JavaScript
7
star
20

react-native-smart-camera-roll-picker

A smart react native component providing images selection from camera roll
JavaScript
5
star
21

react-native-smart-refresh-listview

A high performance pull to refresh listview for React App.
JavaScript
3
star
22

react-native-smart-lazyload

1
star
23

react-native-smart-umeng

A umeng SDK for React Native App
Objective-C
1
star
24

react-native-native-Listview

JavaScript
1
star