Socket
Socket
Sign inDemoInstall

react-native-smart-code

Package Overview
Dependencies
542
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-smart-code

Support React & ReactNative.In react-native,it's create base64 String,which is qrcode or barcode ,and without webview.In react,we use jsbarcode.


Version published
Maintainers
1
Weekly downloads
49
decreased by-24.62%

Weekly downloads

Readme

Source

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 LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-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 PhasesLink 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>

Keywords

FAQs

Last updated on 07 Feb 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc