# How to use barkoder-react-native plugin in your project
### 1. Prepare environment
Install the dependencies and [setup your environment](https://reactnative.dev/docs/environment-setup)
### 2. Add our barkoder-react-native plugin
To add the **barkoder-react-native** plugin to your project, you have two options. You can either use the **barkoder-react-native** plugin from **npm** or from a local path.

To use the plugin from [npm](https://www.npmjs.com/package/barkoder-react-native) run this command:
    
 
   ```
    npm install barkoder-react-native
   ```
   
   if you are using **NPM** in your project or

   ```
    yarn add barkoder-react-native
   ```

   if you are using **YARN** in your project.

If you prefer to use a local plugin, download the plugin from [https://barkoder.com](https://barkoder.com/repository), unzip the archive and add the plugin with setting the plugin path    
   

   ``` 
    npm install <path to barkoder-react-native plugin>
   ```
   
   if you are using **NPM** in your project or

   ```
    yarn add <path to barkoder-react-native plugin>
   ```

   if you are using **YARN** in your project.

If you are having trouble with iOS, try to reinstall the dependencies by running **pod install** command **inside ios folder**:

   ``` 
    cd ios
    pod install
   ```

### 3. Import plugin
Import the **barkoder-react-native** plugin in your project with:
   ``` 
    import { Barkoder, BarkoderView } from 'barkoder-react-native';
   ```
### 4. BarkoderView
At this point the **barkoder-react-native** plugin is installed and imported in your project. Next step is to add the **BarkoderView** in your layout and set the **licenseKey** parameter and **onBarkoderViewCreated** callback.
   ``` 
   <SafeAreaView style={styles.container}>
      ...

      <BarkoderView
          style={styles.barkoderView}
          licenseKey="KEY"
          onBarkoderViewCreated={(barkoder: Barkoder) => onBarkoderViewCreated(barkoder)} />

      ...

   ```
   The license key is a string that concists of alphanumerical characters. See section [Section 7](#7-licensing) to learn how to get a valid license. 
### 5. Ready to Scan Event
Inside **onBarkoderViewCreated** callback function the SDK is fully initialized and ready for configuration or to start the scanning process
   ``` 
    async function onBarkoderViewCreated(_barkoder: Barkoder) {

      barkoder.setBarcodeTypeEnabled(Barkoder.BarcodeType.qr, true);
      barkoder.setRegionOfInterestVisible(true);
    
      ...

      setBarkoder(barkoder);
    }

    function scanPressed() {
      barkoder.startScanning((result) {
        // The result from successful scan is received here
      });
    }
   ```
   For the complete usage of the **barkoder-react-native** plugin please check our sample.
### 6. Camera permissions
Our SDK requires camera permission to be granted in order to use scanning features. For Android, the permission is set in the manifest from the plugin. For iOS you need to specify camera permission in **Info.plist** file inside your project
   ``` 
    <key>NSCameraUsageDescription</key>
 	 <string>Camera permission</string>
   ```
### 7. Licensing 
The SDK will scan barcodes even without a valid license; however all results will be randomly masked with (*) Asterisk characters. By using our software you are agreeing to our [End User License Agreement](https://barkoder.com/EULA). To obtain a valid license, one should create an account [here](https://barkoder.com/register) and either get a trial license (to test the software out) or procure a production license that can be used within a live app.
