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
npm install react-native-smart-code --saveor$ yarn add react-native-smart-code- 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'- 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
endManual installation
iOS
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜react-native-smart-codeand addRNCodeGenerator.xcodeproj - In XCode, in the project navigator, select your project. Add
RNCodeGenerator.frameworkto your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)<
Android
- 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 thegetPackages()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()
);
}
......
}- 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')
- 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')
}- (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>