├── .github └── ISSUE_TEMPLATE │ └── bug_report.yml ├── LICENSE ├── README.md ├── barcode-scanning ├── .gitignore ├── README.md ├── RNMLKitBarcodeScanning.podspec ├── android │ ├── .gitignore │ ├── .npmignore │ ├── .project │ ├── build.gradle │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── com │ │ └── rnmlkit │ │ └── barcodescanning │ │ ├── BarcodeScanningModule.java │ │ └── BarcodeScanningPackage.java ├── index.ts ├── ios │ ├── BarcodeScanning.h │ ├── BarcodeScanning.m │ ├── BarcodeScanning.xcodeproj │ │ ├── project.pbxproj │ │ ├── project.xcworkspace │ │ │ ├── contents.xcworkspacedata │ │ │ ├── xcshareddata │ │ │ │ └── IDEWorkspaceChecks.plist │ │ │ └── xcuserdata │ │ │ │ └── yet.xcuserdatad │ │ │ │ └── UserInterfaceState.xcuserstate │ │ └── xcuserdata │ │ │ └── yet.xcuserdatad │ │ │ └── xcschemes │ │ │ └── xcschememanagement.plist │ └── BarcodeScanning.xcworkspace │ │ ├── contents.xcworkspacedata │ │ ├── xcshareddata │ │ └── IDEWorkspaceChecks.plist │ │ └── xcuserdata │ │ └── yet.xcuserdatad │ │ └── UserInterfaceState.xcuserstate ├── package.json └── yarn.lock ├── example ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── Gemfile ├── README.md ├── __tests__ │ └── App.test.tsx ├── _bundle │ └── config ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── rnmlkitexample │ │ │ │ └── ReactNativeFlipper.java │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── rnmlkitexample │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ │ ├── drawable │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ └── release │ │ │ └── java │ │ │ └── com │ │ │ └── rnmlkitexample │ │ │ └── ReactNativeFlipper.java │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── Podfile │ ├── Podfile.lock │ ├── RNMLKitExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── RNMLKitExample.xcscheme │ ├── RNMLKitExample.xcworkspace │ │ └── contents.xcworkspacedata │ ├── RNMLKitExample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ ├── RNMLKitExampleTests │ │ ├── Info.plist │ │ └── RNMLKitExampleTests.m │ └── _xcode.env ├── jest.config.js ├── metro.config.js ├── package.json ├── src │ ├── App.tsx │ ├── barcode-scanning │ │ └── BarcodeScanningScreen.tsx │ ├── core │ │ ├── ChooseImageButton.tsx │ │ ├── HomeScreen.tsx │ │ ├── LabelTile.tsx │ │ ├── ListTile.tsx │ │ ├── OptionSwitch.tsx │ │ ├── PreviewImage.tsx │ │ └── scaling.ts │ ├── face-detection │ │ ├── FaceDetectionScreen.tsx │ │ └── FaceMap.tsx │ ├── image-labeling │ │ └── ImageLabelingScreen.tsx │ └── text-recognition │ │ ├── TextMap.tsx │ │ └── TextRecognitionScreen.tsx ├── tsconfig.json └── yarn.lock ├── face-detection ├── .gitignore ├── README.md ├── RNMLKitFaceDetection.podspec ├── android │ ├── .gitignore │ ├── .npmignore │ ├── README.md │ ├── build.gradle │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── com │ │ └── rnmlkit │ │ └── facedetection │ │ ├── FaceDetectionModule.java │ │ └── FaceDetectionPackage.java ├── index.ts ├── ios │ ├── FaceDetection.h │ ├── FaceDetection.m │ ├── FaceDetection.xcodeproj │ │ └── project.pbxproj │ └── FaceDetection.xcworkspace │ │ └── contents.xcworkspacedata ├── package.json └── yarn.lock ├── identify-languages ├── .gitignore ├── README.md ├── RNMLKitIdentifyLanguages.podspec ├── android │ ├── .gitignore │ ├── .npmignore │ ├── README.md │ ├── build.gradle │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── com │ │ └── rnmlkit │ │ └── identifylanguages │ │ ├── IdentifyLanguagesModule.java │ │ └── IdentifyLanguagesPackage.java ├── example │ ├── .buckconfig │ ├── .editorconfig │ ├── .eslintrc.js │ ├── .flowconfig │ ├── .gitattributes │ ├── .gitignore │ ├── .prettierrc.js │ ├── .watchmanconfig │ ├── App.js │ ├── android │ │ ├── app │ │ │ ├── _BUCK │ │ │ ├── build.gradle │ │ │ ├── build_defs.bzl │ │ │ ├── debug.keystore │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ ├── debug │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ └── ReactNativeFlipper.java │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ └── settings.gradle │ ├── app.json │ ├── babel.config.js │ ├── index.js │ ├── ios │ │ ├── Podfile │ │ ├── Podfile.lock │ │ ├── example.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ └── example.xcscheme │ │ ├── example.xcworkspace │ │ │ ├── contents.xcworkspacedata │ │ │ └── xcshareddata │ │ │ │ └── IDEWorkspaceChecks.plist │ │ ├── example │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Images.xcassets │ │ │ │ ├── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ ├── LaunchScreen.storyboard │ │ │ └── main.m │ │ └── exampleTests │ │ │ ├── Info.plist │ │ │ └── exampleTests.m │ ├── metro.config.js │ ├── package.json │ └── yarn.lock ├── index.ts ├── ios │ ├── IdentifyLanguages.h │ ├── IdentifyLanguages.m │ ├── IdentifyLanguages.xcodeproj │ │ └── project.pbxproj │ └── IdentifyLanguages.xcworkspace │ │ └── contents.xcworkspacedata ├── package.json └── yarn.lock ├── image-labeling ├── .gitignore ├── LICENSE ├── README.md ├── RNMLKitImageLabeling.podspec ├── android │ ├── .gitignore │ ├── .npmignore │ ├── README.md │ ├── build.gradle │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── com │ │ └── rnmlkit │ │ └── imagelabeling │ │ ├── ImageLabelingModule.java │ │ └── ImageLabelingPackage.java ├── index.ts ├── ios │ ├── ImageLabeling.h │ ├── ImageLabeling.m │ ├── ImageLabeling.xcodeproj │ │ └── project.pbxproj │ └── ImageLabeling.xcworkspace │ │ └── contents.xcworkspacedata ├── package.json └── yarn.lock ├── text-recognition ├── .gitignore ├── README.md ├── RNMLKitTextRecognition.podspec ├── android │ ├── .gitignore │ ├── .npmignore │ ├── README.md │ ├── build.gradle │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── com │ │ └── rnmlkit │ │ └── textrecognition │ │ ├── TextRecognitionModule.java │ │ └── TextRecognitionPackage.java ├── index.ts ├── ios │ ├── TextRecognition.h │ ├── TextRecognition.m │ ├── TextRecognition.xcodeproj │ │ └── project.pbxproj │ └── TextRecognition.xcworkspace │ │ └── contents.xcworkspacedata ├── package.json └── yarn.lock └── translate-text ├── .gitignore ├── README.md ├── RNMLKitTranslateText.podspec ├── android ├── .npmignore ├── README.md ├── build.gradle └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── rnmlkit │ └── translatetext │ ├── TranslateTextModule.java │ └── TranslateTextPackage.java ├── example ├── .buckconfig ├── .editorconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.js ├── android │ ├── app │ │ ├── _BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── example │ │ │ │ └── ReactNativeFlipper.java │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── Podfile │ ├── Podfile.lock │ ├── example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── example.xcscheme │ ├── example.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ └── exampleTests │ │ ├── Info.plist │ │ └── exampleTests.m ├── metro.config.js ├── package.json └── yarn.lock ├── index.ts ├── ios ├── TranslateText.h ├── TranslateText.m ├── TranslateText.xcodeproj │ └── project.pbxproj └── TranslateText.xcworkspace │ └── contents.xcworkspacedata ├── package.json └── yarn.lock /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: "Bug report \U0001F41B" 2 | description: File a bug report 3 | labels: [bug] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: |- 8 | Thanks for taking the time to fill out this bug report! 9 | - type: textarea 10 | id: what-happened 11 | attributes: 12 | label: What happened? 13 | description: What did you expect to happen? Can you attach build logs? Can you attach screenshots? 14 | placeholder: Tell us what you see! 15 | validations: 16 | required: true 17 | - type: input 18 | id: version 19 | attributes: 20 | label: Version 21 | description: What versions of `@react-native-ml-kit/*` are you using? 22 | value: | 23 | @react-native-ml-kit/barcode-scanning: *version* 24 | @react-native-ml-kit/face-detection: *version* 25 | @react-native-ml-kit/identify-languages: *version* 26 | @react-native-ml-kit/image-labeling: *version* 27 | @react-native-ml-kit/text-recognition: *version* 28 | @react-native-ml-kit/translate-text: *version* 29 | validations: 30 | required: true 31 | - type: checkboxes 32 | id: packages 33 | attributes: 34 | label: Which ML Kit packages do you use? 35 | description: 'Select all that apply:' 36 | options: 37 | - label: '@react-native-ml-kit/barcode-scanning' 38 | - label: '@react-native-ml-kit/face-detection' 39 | - label: '@react-native-ml-kit/identify-languages' 40 | - label: '@react-native-ml-kit/image-labeling' 41 | - label: '@react-native-ml-kit/text-recognition' 42 | - label: '@react-native-ml-kit/translate-text' 43 | - type: checkboxes 44 | id: platforms 45 | attributes: 46 | label: What platforms are you seeing this issue on? 47 | description: 'Select all that apply:' 48 | options: 49 | - label: Android 50 | - label: iOS 51 | - type: textarea 52 | id: system-info 53 | attributes: 54 | label: System Information 55 | placeholder: Run `npx react-native info` and paste the output here. 56 | validations: 57 | required: true 58 | - type: textarea 59 | id: repro-steps 60 | attributes: 61 | label: Steps to Reproduce 62 | description: Tell us how to reproduce this issue, or provide a minimal demo where your issue can be easily reproduced. 63 | placeholder: Tell us how to reproduce this issue. 64 | validations: 65 | required: true 66 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Ahmed Mahmoud 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native ML Kit 2 | 3 | React Native On-Device Machine Learning w/ Google ML Kit 4 | 5 | ## Supported Modules 6 | 7 | | Module | Android | iOS | 8 | | ------------------------------------------ | :-----: | :-: | 9 | | [Image Labeling](./image-labeling) | ✅ | ✅ | 10 | | [Identify Languages](./identify-languages) | ✅ | ✅ | 11 | | [Face Detection](./face-detection) | ✅ | ✅ | 12 | | [Text Recognition](./text-recognition) | ✅ | ✅ | 13 | | [Barcode Scanning](./barcode-scanning) | ✅ | ✅ | 14 | | [Translate Text](./translate-text) | ✅ | ❌ | 15 | | Object Detection and Tracking | ❌ | ❌ | 16 | | Digital Ink Recognition | ❌ | ❌ | 17 | | Smart Replies | ❌ | ❌ | 18 | -------------------------------------------------------------------------------- /barcode-scanning/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # node.js 6 | # 7 | node_modules/ 8 | npm-debug.log 9 | yarn-error.log 10 | 11 | # Xcode 12 | # 13 | build/ 14 | *.pbxuser 15 | !default.pbxuser 16 | *.mode1v3 17 | !default.mode1v3 18 | *.mode2v3 19 | !default.mode2v3 20 | *.perspectivev3 21 | !default.perspectivev3 22 | xcuserdata 23 | *.xccheckout 24 | *.moved-aside 25 | DerivedData 26 | *.hmap 27 | *.ipa 28 | *.xcuserstate 29 | project.xcworkspace 30 | 31 | # Android/IntelliJ 32 | # 33 | build/ 34 | .idea 35 | .gradle 36 | local.properties 37 | *.iml 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | -------------------------------------------------------------------------------- /barcode-scanning/README.md: -------------------------------------------------------------------------------- 1 | # @react-native-ml-kit/barcode-scanning 2 | 3 | React Native On-Device Barcode Scanning w/ Google ML Kit 4 | 5 | ## Getting started 6 | 7 | `npm install @react-native-ml-kit/barcode-scanning --save` 8 | 9 | ### Linking 10 | 11 | #### React Native > 0.59 12 | 13 | [CLI autolink feature](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md) links the module while building the app. 14 | 15 | #### React Native <= 0.59 16 | 17 | `react-native link @react-native-ml-kit/barcode-scanning` 18 | 19 | ### Installing Pods 20 | 21 | On iOS, use CocoaPods to add the native RNMLKitBarcodeScanning to your project: 22 | 23 | `npx pod-install` 24 | 25 | ## Usage 26 | 27 | ```javascript 28 | import BarcodeScanning from '@react-native-ml-kit/barcode-scanning'; 29 | 30 | const barcodes = await BarcodeScanning.scan(imageURL); 31 | for (let barcode of barcodes) { 32 | console.log(barcode.value, barcode.format); 33 | } 34 | ``` 35 | -------------------------------------------------------------------------------- /barcode-scanning/RNMLKitBarcodeScanning.podspec: -------------------------------------------------------------------------------- 1 | # RNMLKitBarcodeScanning.podspec 2 | 3 | require "json" 4 | 5 | package = JSON.parse(File.read(File.join(__dir__, "package.json"))) 6 | 7 | Pod::Spec.new do |s| 8 | s.name = "RNMLKitBarcodeScanning" 9 | s.version = package["version"] 10 | s.summary = package["description"] 11 | 12 | s.homepage = "https://github.com/a7med-mahmoud/react-native-ml-kit" 13 | # brief license entry: 14 | s.license = "MIT" 15 | # optional - use expanded license entry instead: 16 | # s.license = { :type => "MIT", :file => "LICENSE" } 17 | s.authors = { "Ahmed" => "a7med.mahmoud2004@gmail.com" } 18 | s.platforms = { :ios => "9.0" } 19 | s.source = { :git => "https://github.com/a7med-mahmoud/react-native-ml-kit.git", :tag => "#{s.version}" } 20 | 21 | s.source_files = "ios/**/*.{h,c,cc,cpp,m,mm,swift}" 22 | s.requires_arc = true 23 | 24 | s.dependency "React" 25 | s.dependency "GoogleMLKit/BarcodeScanning", "6.0.0" 26 | end 27 | -------------------------------------------------------------------------------- /barcode-scanning/android/.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | gradle/ 3 | gradlew 4 | gradlew.bat 5 | -------------------------------------------------------------------------------- /barcode-scanning/android/.npmignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .DS_Store 3 | .gradle/ 4 | .idea/ 5 | .npmignore 6 | build/ 7 | gradle/ 8 | gradlew 9 | gradlew.bat 10 | local.properties 11 | -------------------------------------------------------------------------------- /barcode-scanning/android/.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | android 4 | Project android created by Buildship. 5 | 6 | 7 | 8 | 9 | org.eclipse.buildship.core.gradleprojectbuilder 10 | 11 | 12 | 13 | 14 | 15 | org.eclipse.buildship.core.gradleprojectnature 16 | 17 | 18 | 19 | 1647315623426 20 | 21 | 30 22 | 23 | org.eclipse.core.resources.regexFilterMatcher 24 | node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__ 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /barcode-scanning/android/build.gradle: -------------------------------------------------------------------------------- 1 | // These defaults should reflect the SDK versions used by 2 | // the minimum React Native version supported. 3 | def DEFAULT_COMPILE_SDK_VERSION = 28 4 | def DEFAULT_BUILD_TOOLS_VERSION = '28.0.3' 5 | def DEFAULT_MIN_SDK_VERSION = 16 6 | def DEFAULT_TARGET_SDK_VERSION = 28 7 | 8 | def safeExtGet(prop, fallback) { 9 | rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback 10 | } 11 | 12 | apply plugin: 'com.android.library' 13 | 14 | buildscript { 15 | // The Android Gradle plugin is only required when opening the android folder stand-alone. 16 | // This avoids unnecessary downloads and potential conflicts when the library is included as a 17 | // module dependency in an application project. 18 | // ref: https://docs.gradle.org/current/userguide/tutorial_using_tasks.html#sec:build_script_external_dependencies 19 | if (project == rootProject) { 20 | repositories { 21 | google() 22 | } 23 | dependencies { 24 | // This should reflect the Gradle plugin version used by 25 | // the minimum React Native version supported. 26 | classpath 'com.android.tools.build:gradle:3.4.1' 27 | } 28 | } 29 | } 30 | 31 | android { 32 | compileSdkVersion safeExtGet('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION) 33 | buildToolsVersion safeExtGet('buildToolsVersion', DEFAULT_BUILD_TOOLS_VERSION) 34 | defaultConfig { 35 | minSdkVersion safeExtGet('minSdkVersion', DEFAULT_MIN_SDK_VERSION) 36 | targetSdkVersion safeExtGet('targetSdkVersion', DEFAULT_TARGET_SDK_VERSION) 37 | versionCode 1 38 | versionName "1.0" 39 | } 40 | lintOptions { 41 | abortOnError false 42 | } 43 | } 44 | 45 | repositories { 46 | mavenCentral() 47 | // ref: https://www.baeldung.com/maven-local-repository 48 | mavenLocal() 49 | maven { 50 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 51 | url "$rootDir/../node_modules/react-native/android" 52 | } 53 | maven { 54 | // Android JSC is installed from npm 55 | url "$rootDir/../node_modules/jsc-android/dist" 56 | } 57 | google() 58 | } 59 | 60 | dependencies { 61 | //noinspection GradleDynamicVersion 62 | implementation 'com.facebook.react:react-native:+' // From node_modules 63 | implementation 'com.google.mlkit:barcode-scanning:17.2.0' 64 | } 65 | -------------------------------------------------------------------------------- /barcode-scanning/android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /barcode-scanning/android/src/main/java/com/rnmlkit/barcodescanning/BarcodeScanningPackage.java: -------------------------------------------------------------------------------- 1 | // BarcodeScanning.java 2 | 3 | package com.rnmlkit.barcodescanning; 4 | 5 | import java.util.Arrays; 6 | import java.util.Collections; 7 | import java.util.List; 8 | 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.bridge.NativeModule; 11 | import com.facebook.react.bridge.ReactApplicationContext; 12 | import com.facebook.react.uimanager.ViewManager; 13 | 14 | public class BarcodeScanningPackage implements ReactPackage { 15 | @Override 16 | public List createNativeModules(ReactApplicationContext reactContext) { 17 | return Arrays.asList(new BarcodeScanningModule(reactContext)); 18 | } 19 | 20 | @Override 21 | public List createViewManagers(ReactApplicationContext reactContext) { 22 | return Collections.emptyList(); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /barcode-scanning/index.ts: -------------------------------------------------------------------------------- 1 | import { NativeModules, Platform } from 'react-native'; 2 | 3 | export enum BarcodeFormat { 4 | UNKNOWN = -1, 5 | ALL_FORMATS = 0, 6 | CODE_128 = 1, 7 | CODE_39 = 2, 8 | CODE_93 = 4, 9 | CODABAR = 8, 10 | DATA_MATRIX = 16, 11 | EAN_13 = 32, 12 | EAN_8 = 64, 13 | ITF = 128, 14 | QR_CODE = 256, 15 | UPC_A = 512, 16 | UPC_E = 1024, 17 | PDF417 = 2048, 18 | AZTEC = 4096, 19 | } 20 | 21 | export interface Barcode { 22 | format: BarcodeFormat; 23 | value: string; 24 | } 25 | 26 | interface IBarcodeScanning { 27 | scan: (imageURL: string) => Promise; 28 | } 29 | 30 | const LINKING_ERROR = 31 | `The package '@react-native-ml-kit/barcode-scanning' doesn't seem to be linked. Make sure: \n\n` + 32 | Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) + 33 | '- You rebuilt the app after installing the package\n' + 34 | '- You are not using Expo managed workflow\n'; 35 | 36 | const BarcodeScanning: IBarcodeScanning = NativeModules.BarcodeScanning 37 | ? NativeModules.BarcodeScanning 38 | : new Proxy( 39 | {}, 40 | { 41 | get() { 42 | throw new Error(LINKING_ERROR); 43 | }, 44 | } 45 | ); 46 | 47 | export default BarcodeScanning; 48 | -------------------------------------------------------------------------------- /barcode-scanning/ios/BarcodeScanning.h: -------------------------------------------------------------------------------- 1 | // BarcodeScanning.h 2 | 3 | #import 4 | 5 | @interface BarcodeScanning : NSObject 6 | 7 | @end 8 | -------------------------------------------------------------------------------- /barcode-scanning/ios/BarcodeScanning.m: -------------------------------------------------------------------------------- 1 | #import "BarcodeScanning.h" 2 | 3 | @import MLKitVision.MLKVisionImage; 4 | @import MLKitBarcodeScanning.MLKBarcodeScannerOptions; 5 | @import MLKitBarcodeScanning.MLKBarcodeScanner; 6 | @import MLKitBarcodeScanning.MLKBarcode; 7 | 8 | @implementation BarcodeScanning 9 | 10 | RCT_EXPORT_MODULE() 11 | 12 | RCT_EXPORT_METHOD(scan 13 | : (nonnull NSString *)url resolver 14 | : (RCTPromiseResolveBlock)resolve rejecter 15 | : (RCTPromiseRejectBlock)reject) { 16 | NSURL *_url = [NSURL URLWithString:url]; 17 | NSData *imageData = [NSData dataWithContentsOfURL:_url]; 18 | UIImage *image = [UIImage imageWithData:imageData]; 19 | MLKVisionImage *visionImage = [[MLKVisionImage alloc] initWithImage:image]; 20 | MLKBarcodeScanner *scanner = [MLKBarcodeScanner barcodeScanner]; 21 | 22 | [scanner 23 | processImage:visionImage 24 | completion:^(NSArray *_Nullable barcodes, NSError *_Nullable error) { 25 | if (error != nil || barcodes == nil) { 26 | return reject(@"Barcode Scanning", @"Barcode Scanning failed", 27 | error); 28 | } 29 | 30 | NSMutableArray *result = [NSMutableArray array]; 31 | 32 | for (MLKBarcode *barcode in barcodes) { 33 | // Streamline format enum with Android 34 | NSNumber* format; 35 | switch (barcode.format) { 36 | case MLKBarcodeFormatAll: 37 | format = @0; // Android uses 0 for "All" 38 | case MLKBarcodeFormatUnknown: 39 | format = @-1; // Android used -1 for "Unknown" 40 | default: 41 | format = @(barcode.format); 42 | } 43 | 44 | [result addObject:@{ 45 | @"value": barcode.displayValue, 46 | @"format": format 47 | }]; 48 | } 49 | 50 | resolve(result); 51 | }]; 52 | } 53 | 54 | @end 55 | -------------------------------------------------------------------------------- /barcode-scanning/ios/BarcodeScanning.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /barcode-scanning/ios/BarcodeScanning.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /barcode-scanning/ios/BarcodeScanning.xcodeproj/project.xcworkspace/xcuserdata/yet.xcuserdatad/UserInterfaceState.xcuserstate: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/barcode-scanning/ios/BarcodeScanning.xcodeproj/project.xcworkspace/xcuserdata/yet.xcuserdatad/UserInterfaceState.xcuserstate -------------------------------------------------------------------------------- /barcode-scanning/ios/BarcodeScanning.xcodeproj/xcuserdata/yet.xcuserdatad/xcschemes/xcschememanagement.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SchemeUserState 6 | 7 | BarcodeScanning.xcscheme_^#shared#^_ 8 | 9 | orderHint 10 | 0 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /barcode-scanning/ios/BarcodeScanning.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /barcode-scanning/ios/BarcodeScanning.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /barcode-scanning/ios/BarcodeScanning.xcworkspace/xcuserdata/yet.xcuserdatad/UserInterfaceState.xcuserstate: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/barcode-scanning/ios/BarcodeScanning.xcworkspace/xcuserdata/yet.xcuserdatad/UserInterfaceState.xcuserstate -------------------------------------------------------------------------------- /barcode-scanning/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@react-native-ml-kit/barcode-scanning", 3 | "title": "React Native ML Kit Barcode Scanning", 4 | "version": "1.4.1", 5 | "description": "React Native On-Device Barcode Scanning w/ Google ML Kit", 6 | "main": "index.ts", 7 | "files": [ 8 | "README.md", 9 | "android", 10 | "index.ts", 11 | "RNMLKitBarcodeScanning.podspec", 12 | "ios" 13 | ], 14 | "scripts": { 15 | "test": "echo \"Error: no test specified\" && exit 1" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/a7med-mahmoud/react-native-ml-kit.git", 20 | "baseUrl": "https://github.com/a7med-mahmoud/react-native-ml-kit" 21 | }, 22 | "keywords": [ 23 | "react-native" 24 | ], 25 | "author": { 26 | "name": "JT Wright", 27 | "email": "jacob.t.wright@protonmail.com" 28 | }, 29 | "license": "MIT", 30 | "licenseFilename": "LICENSE", 31 | "readmeFilename": "README.md", 32 | "peerDependencies": { 33 | "react": ">=16.8.1", 34 | "react-native": ">=0.60.0-rc.0 <1.0.x" 35 | }, 36 | "devDependencies": { 37 | "@types/react-native": "^0.72.3" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | ios/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | *.keystore 35 | !debug.keystore 36 | 37 | # node.js 38 | # 39 | node_modules/ 40 | npm-debug.log 41 | yarn-error.log 42 | 43 | # fastlane 44 | # 45 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 46 | # screenshots whenever they are needed. 47 | # For more information about the recommended setup visit: 48 | # https://docs.fastlane.tools/best-practices/source-control/ 49 | 50 | **/fastlane/report.xml 51 | **/fastlane/Preview.html 52 | **/fastlane/screenshots 53 | **/fastlane/test_output 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # Ruby / CocoaPods 59 | /ios/Pods/ 60 | /vendor/bundle/ 61 | 62 | # Temporary files created by Metro to check the health of the file watcher 63 | .metro-health-check* 64 | 65 | # testing 66 | /coverage 67 | 68 | # Expo 69 | .expo 70 | dist/ 71 | web-build/ -------------------------------------------------------------------------------- /example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | gem 'cocoapods', '~> 1.12' 7 | -------------------------------------------------------------------------------- /example/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../src/App'; 8 | 9 | // Note: import explicitly to use the types shiped with jest. 10 | import {it} from '@jest/globals'; 11 | 12 | // Note: test renderer must be required after react-native. 13 | import renderer from 'react-test-renderer'; 14 | 15 | it('renders correctly', () => { 16 | renderer.create(); 17 | }); 18 | -------------------------------------------------------------------------------- /example/_bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/debug.keystore -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnmlkitexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.rnmlkitexample; 2 | import expo.modules.ReactActivityDelegateWrapper; 3 | 4 | import android.os.Bundle; 5 | 6 | import com.facebook.react.ReactActivity; 7 | import com.facebook.react.ReactActivityDelegate; 8 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 9 | import com.facebook.react.defaults.DefaultReactActivityDelegate; 10 | 11 | public class MainActivity extends ReactActivity { 12 | 13 | @Override 14 | protected void onCreate(Bundle savedInstanceState) { 15 | // Added for React Native Screens 16 | super.onCreate(null); 17 | } 18 | 19 | /** 20 | * Returns the name of the main component registered from JavaScript. This is used to schedule 21 | * rendering of the component. 22 | */ 23 | @Override 24 | protected String getMainComponentName() { 25 | return "RNMLKitExample"; 26 | } 27 | 28 | /** 29 | * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link 30 | * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React 31 | * (aka React 18) with two boolean flags. 32 | */ 33 | @Override 34 | protected ReactActivityDelegate createReactActivityDelegate() { 35 | return new ReactActivityDelegateWrapper(this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED, new DefaultReactActivityDelegate( 36 | this, 37 | getMainComponentName(), 38 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 39 | DefaultNewArchitectureEntryPoint.getFabricEnabled())); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnmlkitexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.rnmlkitexample; 2 | import android.content.res.Configuration; 3 | import expo.modules.ApplicationLifecycleDispatcher; 4 | import expo.modules.ReactNativeHostWrapper; 5 | 6 | import android.app.Application; 7 | import com.facebook.react.PackageList; 8 | import com.facebook.react.ReactApplication; 9 | import com.facebook.react.ReactNativeHost; 10 | import com.facebook.react.ReactPackage; 11 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 12 | import com.facebook.react.defaults.DefaultReactNativeHost; 13 | import com.facebook.soloader.SoLoader; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = 19 | new ReactNativeHostWrapper(this, new DefaultReactNativeHost(this) { 20 | @Override 21 | public boolean getUseDeveloperSupport() { 22 | return BuildConfig.DEBUG; 23 | } 24 | 25 | @Override 26 | protected List getPackages() { 27 | @SuppressWarnings("UnnecessaryLocalVariable") 28 | List packages = new PackageList(this).getPackages(); 29 | // Packages that cannot be autolinked yet can be added manually here, for example: 30 | // packages.add(new MyReactNativePackage()); 31 | return packages; 32 | } 33 | 34 | @Override 35 | protected String getJSMainModuleName() { 36 | return ".expo/.virtual-metro-entry"; 37 | } 38 | 39 | @Override 40 | protected boolean isNewArchEnabled() { 41 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 42 | } 43 | 44 | @Override 45 | protected Boolean isHermesEnabled() { 46 | return BuildConfig.IS_HERMES_ENABLED; 47 | } 48 | }); 49 | 50 | @Override 51 | public ReactNativeHost getReactNativeHost() { 52 | return mReactNativeHost; 53 | } 54 | 55 | @Override 56 | public void onCreate() { 57 | super.onCreate(); 58 | SoLoader.init(this, /* native exopackage */ false); 59 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 60 | // If you opted-in for the New Architecture, we load the native entry point for this app. 61 | DefaultNewArchitectureEntryPoint.load(); 62 | } 63 | ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 64 | ApplicationLifecycleDispatcher.onApplicationCreate(this); 65 | } 66 | 67 | @Override 68 | public void onConfigurationChanged(Configuration newConfig) { 69 | super.onConfigurationChanged(newConfig); 70 | ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RNMLKitExample 3 | 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/android/app/src/release/java/com/rnmlkitexample/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.rnmlkitexample; 8 | 9 | import android.content.Context; 10 | import com.facebook.react.ReactInstanceManager; 11 | 12 | /** 13 | * Class responsible of loading Flipper inside your React Native application. This is the release 14 | * flavor of it so it's empty as we don't want to load Flipper. 15 | */ 16 | public class ReactNativeFlipper { 17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 18 | // Do nothing as we don't want to initialize Flipper on Release. 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "33.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 33 8 | targetSdkVersion = 33 9 | 10 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. 11 | ndkVersion = "23.1.7779620" 12 | } 13 | repositories { 14 | google() 15 | mavenCentral() 16 | } 17 | dependencies { 18 | classpath("com.android.tools.build:gradle") 19 | classpath("com.facebook.react:react-native-gradle-plugin") 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.182.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | 42 | # Use this property to enable or disable the Hermes JS engine. 43 | # If set to false, you will be using JSC instead. 44 | hermesEnabled=true 45 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a7medev/react-native-ml-kit/17d85166bca088baa3a62ed9d184e4e476c8b844/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip 4 | networkTimeout=10000 5 | zipStoreBase=GRADLE_USER_HOME 6 | zipStorePath=wrapper/dists 7 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'RNMLKitExample' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/@react-native/gradle-plugin') 5 | 6 | apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle") 7 | useExpoModules() -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RNMLKitExample", 3 | "displayName": "RNMLKitExample" 4 | } 5 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['babel-preset-expo'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import {AppRegistry} from 'react-native'; 2 | import App from './src/App'; 3 | import {name as appName} from './app.json'; 4 | 5 | AppRegistry.registerComponent(appName, () => App); 6 | -------------------------------------------------------------------------------- /example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | export NODE_BINARY=$(command -v node) 2 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking") 2 | # Resolve react_native_pods.rb with node to allow for hoisting 3 | require Pod::Executable.execute_command('node', ['-p', 4 | 'require.resolve( 5 | "react-native/scripts/react_native_pods.rb", 6 | {paths: [process.argv[1]]}, 7 | )', __dir__]).strip 8 | 9 | platform :ios, '13.0' 10 | prepare_react_native_project! 11 | 12 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 13 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 14 | # 15 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 16 | # ```js 17 | # module.exports = { 18 | # dependencies: { 19 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 20 | # ``` 21 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled 22 | 23 | linkage = ENV['USE_FRAMEWORKS'] 24 | if linkage != nil 25 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 26 | use_frameworks! :linkage => linkage.to_sym 27 | end 28 | 29 | target 'RNMLKitExample' do 30 | use_expo_modules! 31 | post_integrate do |installer| 32 | begin 33 | expo_patch_react_imports!(installer) 34 | rescue => e 35 | Pod::UI.warn e 36 | end 37 | end 38 | config = use_native_modules! 39 | 40 | # Flags change depending on the env values. 41 | flags = get_default_flags() 42 | 43 | use_react_native!( 44 | :path => config[:reactNativePath], 45 | # Hermes is now enabled by default. Disable by setting this flag to false. 46 | :hermes_enabled => flags[:hermes_enabled], 47 | :fabric_enabled => flags[:fabric_enabled], 48 | # Enables Flipper. 49 | # 50 | # Note that if you have use_frameworks! enabled, Flipper will not work and 51 | # you should disable the next line. 52 | :flipper_configuration => flipper_config, 53 | # An absolute path to your application root. 54 | :app_path => "#{Pod::Config.instance.installation_root}/.." 55 | ) 56 | 57 | target 'RNMLKitExampleTests' do 58 | inherit! :complete 59 | # Pods for testing 60 | end 61 | 62 | post_install do |installer| 63 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 64 | react_native_post_install( 65 | installer, 66 | config[:reactNativePath], 67 | :mac_catalyst_enabled => false 68 | ) 69 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 70 | 71 | installer.pods_project.targets.each do |target| 72 | target.build_configurations.each do |config| 73 | config.build_settings["ONLY_ACTIVE_ARCH"] = "NO" 74 | end 75 | end 76 | end 77 | end 78 | -------------------------------------------------------------------------------- /example/ios/RNMLKitExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/RNMLKitExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | #import 4 | 5 | @interface AppDelegate : EXAppDelegateWrapper 6 | 7 | @end 8 | -------------------------------------------------------------------------------- /example/ios/RNMLKitExample/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"RNMLKitExample"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | #if DEBUG 20 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@".expo/.virtual-metro-entry"]; 21 | #else 22 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 23 | #endif 24 | } 25 | 26 | @end 27 | -------------------------------------------------------------------------------- /example/ios/RNMLKitExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/ios/RNMLKitExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ios/RNMLKitExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | RNMLKitExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | $(MARKETING_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | NSPhotoLibraryUsageDescription 55 | Give $(PRODUCT_NAME) permission to save photos 56 | NSCameraUsageDescription 57 | Give $(PRODUCT_NAME) permission to access your camera 58 | NSMicrophoneUsageDescription 59 | Give $(PRODUCT_NAME) permission to use your microphone 60 | 61 | 62 | -------------------------------------------------------------------------------- /example/ios/RNMLKitExample/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/ios/RNMLKitExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/ios/RNMLKitExampleTests/RNMLKitExampleTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface RNMLKitExampleTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation RNMLKitExampleTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /example/ios/_xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /example/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig} = require('expo/metro-config'); 2 | const {mergeConfig} = require('@react-native/metro-config'); 3 | const path = require('path'); 4 | 5 | /** @type {import('metro-config').MetroConfig} */ 6 | const config = { 7 | watchFolders: [path.resolve(__dirname, '../')], 8 | resolver: { 9 | disableHierarchicalLookup: true, 10 | nodeModulesPaths: [path.resolve(__dirname, 'node_modules')], 11 | }, 12 | }; 13 | 14 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 15 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rnmlkitexample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "lint": "eslint .", 9 | "start": "react-native start", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "@react-native-ml-kit/barcode-scanning": "link:../barcode-scanning", 14 | "@react-native-ml-kit/face-detection": "link:../face-detection", 15 | "@react-native-ml-kit/image-labeling": "link:../image-labeling", 16 | "@react-native-ml-kit/text-recognition": "link:../text-recognition", 17 | "@react-navigation/native": "^6.1.7", 18 | "@react-navigation/native-stack": "^6.9.13", 19 | "expo": "^49.0.0", 20 | "expo-image-picker": "~14.3.2", 21 | "react": "18.2.0", 22 | "react-native": "0.72.4", 23 | "react-native-safe-area-context": "^4.7.2", 24 | "react-native-screens": "^3.25.0", 25 | "react-native-svg": "^13.14.0" 26 | }, 27 | "devDependencies": { 28 | "@babel/core": "^7.20.0", 29 | "@babel/preset-env": "^7.20.0", 30 | "@babel/runtime": "^7.22.15", 31 | "@react-native/eslint-config": "^0.72.2", 32 | "@react-native/metro-config": "^0.72.11", 33 | "@tsconfig/react-native": "^3.0.0", 34 | "@types/react": "^18.0.24", 35 | "@types/react-test-renderer": "^18.0.0", 36 | "babel-jest": "^29.2.1", 37 | "eslint": "^8.19.0", 38 | "jest": "^29.2.1", 39 | "metro-react-native-babel-preset": "0.76.8", 40 | "prettier": "^2.4.1", 41 | "react-test-renderer": "18.2.0", 42 | "typescript": "4.8.4" 43 | }, 44 | "engines": { 45 | "node": ">=16" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {NavigationContainer} from '@react-navigation/native'; 3 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 4 | import TextRecognitionScreen from './text-recognition/TextRecognitionScreen'; 5 | import FaceDetectionScreen from './face-detection/FaceDetectionScreen'; 6 | import ImageLabelingScreen from './image-labeling/ImageLabelingScreen'; 7 | import HomeScreen from './core/HomeScreen'; 8 | import BarcodeScanningScreen from './barcode-scanning/BarcodeScanningScreen'; 9 | 10 | export type ParamList = { 11 | Home: undefined; 12 | TextRecognition: undefined; 13 | BarcodeScanning: undefined; 14 | FaceDetection: undefined; 15 | ImageLabeling: undefined; 16 | }; 17 | 18 | const Stack = createNativeStackNavigator(); 19 | 20 | const App: React.FC = () => { 21 | return ( 22 | 23 | 24 | 25 | 30 | 35 | 40 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export default App; 51 | -------------------------------------------------------------------------------- /example/src/barcode-scanning/BarcodeScanningScreen.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {Text, StyleSheet, View, FlatList} from 'react-native'; 3 | import BarcodeScanning, {Barcode} from '@react-native-ml-kit/barcode-scanning'; 4 | import ChooseImageButton, {ImageDetails} from '../core/ChooseImageButton'; 5 | import LabelTile from '../core/LabelTile'; 6 | import PreviewImage from '../core/PreviewImage'; 7 | 8 | const BarcodeScanningScreen = () => { 9 | const [image, setImage] = useState(); 10 | const [barcodes, setBarcodes] = useState([]); 11 | 12 | const handleChoose = async (currentImage: ImageDetails) => { 13 | setImage(currentImage); 14 | 15 | const result = await BarcodeScanning.scan(currentImage.path); 16 | 17 | setBarcodes(result); 18 | }; 19 | 20 | return ( 21 | 22 | 23 | 24 | {image && } 25 | 26 | {barcodes.length > 0 && ( 27 | <> 28 | Barcodes 29 | 30 | `${barcode.format}-${barcode.value}`} 34 | renderItem={({item}) => ( 35 | 36 | {item.value} - {item.format} 37 | 38 | )} 39 | /> 40 | 41 | )} 42 | 43 | ); 44 | }; 45 | 46 | const styles = StyleSheet.create({ 47 | container: { 48 | flex: 1, 49 | justifyContent: 'center', 50 | alignItems: 'center', 51 | }, 52 | heading: { 53 | fontSize: 20, 54 | marginBottom: 10, 55 | marginTop: 20, 56 | }, 57 | list: { 58 | width: '100%', 59 | padding: 10, 60 | }, 61 | }); 62 | 63 | export default BarcodeScanningScreen; 64 | -------------------------------------------------------------------------------- /example/src/core/ChooseImageButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Button} from 'react-native'; 3 | import * as ImagePicker from 'expo-image-picker'; 4 | 5 | export interface ImageDetails { 6 | path: string; 7 | height: number; 8 | width: number; 9 | } 10 | 11 | interface ChooseImageButtonProps { 12 | onChoose: (image: ImageDetails) => void; 13 | } 14 | 15 | const ChooseImageButton = ({onChoose}: ChooseImageButtonProps) => { 16 | const handlePress = async () => { 17 | const imageResult = await ImagePicker.launchImageLibraryAsync(); 18 | if (imageResult.canceled) { 19 | return; 20 | } 21 | 22 | const asset = imageResult.assets![0]; 23 | const currentImage = { 24 | path: asset.uri, 25 | width: asset.width, 26 | height: asset.height, 27 | }; 28 | 29 | onChoose(currentImage); 30 | }; 31 | 32 | return