react-native-smart-code

react-native-smart-code

Getting started

$ npm install react-native-smart-code --save

or

$ yarn add react-native-smart-code

Linking (for React Native <= 0.59 only, React Native >= 0.60 skip this as auto-linking should work)

Mostly automatic installation

$ react-native link react-native-smart-code

Mostly automatic install with CocoaPods

1. npm install react-native-smart-code --save or $ yarn add react-native-smart-code
2. Add the plugin dependency to your Podfile, pointing at the path where NPM installed it:

pod 'react-native-smart-code', path: '../node_modules/react-native-smart-code/ios/RNCodeGenerator.podspec'

1. Run pod install

Note: You might need to adjust your Podfile following the example below:

target 'yourTargetName' do
  # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]

  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # Third party deps podspec link
+ pod 'react-native-smart-code', path: '../node_modules/react-native-smart-code/ios/RNCodeGenerator.podspec'

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-smart-code and add RNCodeGenerator.xcodeproj
3. In XCode, in the project navigator, select your project. Add RNCodeGenerator.framework to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.react_native_code_generator.RNCodeGeneratorPackage; to the imports at the top of the file
• Add new RNCodeGeneratorPackage() to the list returned by the getPackages() method

+ import com.react_native_code_generator.RNCodeGeneratorPackage;

  public class MainApplication extends Application implements ReactApplication {
    //......

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

    ......
  }

1. Append the following lines to android/settings.gradle:

...
include ':app'
+ include ':react-native-smart-code'
+ project(':react-native-smart-code').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-code/android')

1. Insert the following lines inside the dependencies block in android/app/build.gradle:

dependencies {
    ...
    compile "com.facebook.react:react-native:+"  // From node_modules
+   compile project(':react-native-smart-code')
}

1. (optional)

You can override this settings by adding a Project-wide gradle configuration properties for use by all modules in your ReactNative project by adding the below to android/build.gradle file,

buildscript {...}

allprojects {...}

/**
* Project-wide gradle configuration properties for use by all modules
*/
ext {
    compileSdkVersion           = 26
    targetSdkVersion            = 26
    buildToolsVersion           = "26.0.2"
    googlePlayServicesVersion   = "12.0.1"
    googlePlayServicesVisionVersion = "15.0.2"
    supportLibVersion           = "27.1.0"
}

Usage

React Native

import CodeGenerator from 'react-native-smart-code';

const ImageWidth = 300;
const ImageHeight = 100;

const data = await CodeGenerator.generate({
  type: CodeGenerator.Type.Code128,
  code: 'codeValue'
});

<Image
  source={{ uri: data }}
  resizeMode="cover"
  style={{
    height: ImageHeight,
    width: ImageWidth,
    borderColor: 'black',
    borderWidth: 1
  }}
/>;

React

Note: generateAPI width max value is 4,height max value is 150

import CodeGenerator from 'react-native-smart-code';

const IMAGE_WIDTH = 300;
const IMAGE_HEIGHT = 100;

const data = await CodeGenerator.generate({
  type: CodeGenerator.Type.Code128,
  code: 'codeValue'
});

<img src={data} width={IMAGE_WIDTH} height={IMAGE_HEIGHT} />;

HTML

Note: generateAPI width max value is 4,height max value is 150

<script src="../../lib/CodeGenerator.web.js"></script>
<script>
  const promise = CodeGenerator.default.generate({
    type: CodeGenerator.Type.Code128,
    code: 'codeValue'
  })
  promise.then(function (value) {
    console.log(value, (typeof value));
  }, function (error) {
    console.log(error.message)
  });
</script>