{"id":21666433,"url":"https://github.com/doo/react-native-medical-certificate-tutorial","last_synced_at":"2026-04-18T11:02:59.328Z","repository":{"id":38850259,"uuid":"472347925","full_name":"doo/react-native-medical-certificate-tutorial","owner":"doo","description":"Example Tutorial on how to integrate the Medical Certificate Scanner using Scanbot React Native SDK","archived":false,"fork":false,"pushed_at":"2023-03-07T17:53:28.000Z","size":10720,"stargazers_count":0,"open_issues_count":10,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-04T17:56:46.432Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-21T13:23:42.000Z","updated_at":"2022-04-05T15:52:51.000Z","dependencies_parsed_at":"2024-11-25T11:40:06.549Z","dependency_job_id":null,"html_url":"https://github.com/doo/react-native-medical-certificate-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/doo/react-native-medical-certificate-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doo%2Freact-native-medical-certificate-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doo%2Freact-native-medical-certificate-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doo%2Freact-native-medical-certificate-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doo%2Freact-native-medical-certificate-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doo","download_url":"https://codeload.github.com/doo/react-native-medical-certificate-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doo%2Freact-native-medical-certificate-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31966217,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T11:26:41.600Z","updated_at":"2026-04-18T11:02:59.287Z","avatar_url":"https://github.com/doo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\n# How to integrate Scanbot Medical Certificate Scanner in your React Native app\n\n  \n\n## Introduction\n\n  \n\nThis tutorial demonstrates how to setup Scanbot SDK in a [React Native](https://reactnative.dev/) App, and how to integrate and customize the Medical Certificate Scanner.\n  \n## Getting Started\n\nWe'll start by creating a React Native project from scratch, by using npx and react-native command line:\n\n```bash\nnpx react-native init MedicalCertificateDemo\n```\nThis will create an empty basic react native project.\n\n## Installing Scanbot SDK\n\nThe Scanbot SDK module is available as an  [npm package](https://www.npmjs.com/package/react-native-scanbot-sdk).\n\nWe can simply add it to our project with npm install:\n\n```bash\nnpm install --save react-native-scanbot-sdk\n```\n  \nPerfect! Now, before we can use Scanbot SDK, we need to tweak Android and iOS configurations.\n\n## Android Setup\n**Scanbot SDK Maven Repositories**\n\nThis React Native module depends on the native Scanbot SDK for Android. The Scanbot SDK for Android is distributed through our private Maven repositories. Please add these repositories in your  `android/build.gradle`  file in the section  `allprojects \u003e repositories`:\n\n```properties\nallprojects {\n    repositories {\n        mavenLocal()\n        maven {\n            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm\n            url \"$rootDir/../node_modules/react-native/android\"\n        }\n\n        google()\n        jcenter()\n\n        // Scanbot SDK Maven repositories:\n        maven { url 'https://nexus.scanbot.io/nexus/content/repositories/releases/' }\n        maven { url 'https://nexus.scanbot.io/nexus/content/repositories/snapshots/' }\n    }\n}\n```\n\n**Add SDK Project Reference**\n\nScanbot SDK reference also needs to be included in your  `settings.gradle`, as such:\n\n```properties\ninclude ':react-native-scanbot-sdk'\nproject(':react-native-scanbot-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-scanbot-sdk/android/app')\n```\n\n**Enable Multidex**\n\nMake sure you have enabled  [multidex](https://developer.android.com/studio/build/multidex)  by setting  `multiDexEnabled`  to  `true`  in your app module-level  `build.gradle`  file:\n\n```properties\nandroid {\n  ...\n  defaultConfig {\n    ...\n    multiDexEnabled true\n  }\n}\n```\n\nAlso add the following config in your  `build.gradle`  to avoid conflicts with the lib filename  `libc++_shared.so`, which is used by React Native as well as by many other 3rd-party modules:\n\n```properties\nandroid {\n  ...\n  packagingOptions {\n      pickFirst '**/libc++_shared.so'\n  }\n}\n```\n\n**Tuning the Android Manifest**\n\nSince your application will work with high-resolution images, it is strongly recommended to add the property  `android:largeHeap=\"true\"`  in the  `\u003capplication\u003e`  element of your  `android/app/src/main/AndroidManifest.xml`  file, especially for Android \u003c= 7.x. Processing hi-res images is a memory intensive task and this property will ensure your app has enough heap allocated to avoid  `OutOfMemoryError`  exceptions.\n\n```xml\n\u003capplication ... android:largeHeap=\"true\"\u003e\n  ...\n\u003c/application\u003e\n```\n\n**OCR Support**\n\nThe Medical Scanner requires OCR functionalities in order to work. As explained in our official documentation, you have to manually add the OCR data to your project, under ```android/app/src/main/assets/ocr_blobs```\n\nYou can download the OCR files from tesseract official sources or directly from our example project:\nhttps://github.com/doo/scanbot-sdk-example-react-native/tree/master/android/app/src/main\n\n**Additional Steps**\n\nBefore trying to run the app on Android, open it at least once on Android Studio, to let gradle do its magic.\n\nIf you get build errors it may be due to your JDK \u0026 Gradle versions; try adding this line to your `gradle.properties` file:\n\n```properties\norg.gradle.jvmargs=-Xmx1536M --add-exports=java.base/sun.nio.ch=ALL-UNNAMED --add-opens=java.base/java.lang=ALL-UNNAMED --add-opens=java.base/java.lang.reflect=ALL-UNNAMED --add-opens=java.base/java.io=ALL-UNNAMED --add-exports=jdk.unsupported/sun.misc=ALL-UNNAMED\n```\n## iOS Setup\n\nAs of `v0.62` of `react-native` and `v4.1.0`, the iOS configuration has become much easier because of autolinking support.\n\nHowever, you have to do an extra step if you want to include special SDK modules, like:\n\n-   `OCR`: for the default OCR data bundle  `ScanbotSDKOCRData.bundle`  containing default language files for DE and EN\n-   `MRZ`: for the MRZ Scanner data bundle  `ScanbotSDKMRZData.bundle`\n-   `MLDETECT`: For ML-based Document detection\n-   `ALL`: for all available bundles (default, currently OCR + MRZ)\n\n**1. Disable auto-linking**\nAdd a file called `react-native.config.js` in your project folder, with the following content:\n\n```javascript\nmodule.exports  = {\n    dependencies: {\n        'react-native-scanbot-sdk': {\n            platforms: {ios: null},\n         },\n    },\n};\n```\n**2. Manually add the RNScanbotSDK pod**\n\n```ruby\nuse_react_native!(\n\t:path =\u003e config[:reactNativePath],\n\t# to enable hermes on iOS, change `false` to `true` and then install pods\n\t:hermes_enabled =\u003e false\n)\n\n# ADD THIS LINE: \npod 'RNScanbotSDK/ALL', :path =\u003e '../node_modules/react-native-scanbot-sdk'\n```\nThis will tell cocoapods to install all the Scanbot SDK packages, including ML detection and OCR, needed for the Medical Scanner.\n\n**Install the pods**\n\nFinally, we can install the pods:\n\n```bash\n$ cd ios/\n$ pod install --repo-update\n```\n\nNow we can open `ios/MedicalCertificateDemo.xcworkspace` on Xcode, and setup our Signing Options under Signing \u0026 Configurations.\n\n## Permissions\n\nIn order to operate correctly an application that utilizes ScanbotSDK module must have all required permissions to your App. Here is a listing of those permissions:\n\n**Android**  (must be added in your  `android/app/src/main/AndroidManifest.xml`  file)\n\n-   `\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e`  - This permission is used for the camera views.\n-   `\u003cuses-feature android:name=\"android.hardware.camera\" /\u003e`  - Camera hardware features.\n\n**iOS**  (must be added in your  `Info.plist`  file)\n\n-   `NSCameraUsageDescription`  -  _\"Privacy - Camera Usage Description\"_. Describe why your app wants to access the device's camera.\n\n### Running the project\n\nYou can run the project by connecting a device via USB and using these commands:\n\n```bash\nreact-native run-android\nreact-native run-ios --device\n```\n\nYou can also open ```ios/MedicalCertificateDemo.xcworkspace``` and build/run the project from Xcode.\n\n## IMPORTANT: Compatibility with latest Xcode and React releases\n\nMany React Native users have reported problems with the new Xcode build system and the most recent React / React Native versions for what concerns the bundling of Pods dependencies in the iOS project.\n\nIf you find yourself unable to build the iOS app, you might have to apply the following changes.\n\n\n**Use patch-package to apply a workaround**\n\nYou can do so by:\n```bash\nnpm i patch-package\n```\n\nAdd this to your package.json:\n\n```json\n\"scripts\": {\n    \"postinstall\": \"patch-package\"\n},\n```\n\nFinally, create a folder named `patches` in your project directory, where you will add a file called `react-native-scanbot-sdk+4.11.3.patch` (if you didn't install version react-native-scanbot-sdk@4.11.3, replace the file name to match your installed version). \n\nYou can download the file here: https://drive.google.com/file/d/1j6XpjSvdKviALOgzkaa-p-NewIdunm4I/view?usp=sharing\n\n## Getting Started with Scanbot SDK!\n\nFor this example we migrated the starter project to typescript, by simply changing the extensions of our files from ```.jsx``` to ```.tsx``` ; also, we installed typescript for autocompletion and realtime code correction:\n\n```bash\nnpm install --save-dev typescript\n```\n\nFurthermore, we used the following packages, to help us build a simple UI:\n\n```json\n\"@react-navigation/native\": \"^6.0.8\",\n\"@react-navigation/stack\": \"^6.1.1\",\n\"react-native-safe-area-context\": \"1.0.0\",\n\"react-native-gesture-handler\": \"1.10.3\",\n```\n\nWe added them to `package.json` , ran `npm install`, and then `cd ios; pod install --repo-update` to let autolinking do its magic.\n\nLet's take a look at our `App.tsx` file.\n\n**App.tsx**\n\nFirst of all, we imported ScanbotSDK and InitializationOptions:\n\n```typescript\nimport ScanbotSDK, {InitializationOptions} from 'react-native-scanbot-sdk';\n```\n\nAnd we initialized the SDK in the constructor, like this:\n\n```typescript\n  constructor(props) {\n    super(props);\n    this.initScanbotSdk();\n  }\n\n  async initScanbotSdk() {\n    const options: InitializationOptions = {\n      licenseKey: '', // An empty license will start a 60 seconds trial; you can request an actual trial license on our website\n      loggingEnabled: true, // Consider switching logging OFF in production builds for security and performance reasons!\n    };\n    try {\n      const result = await ScanbotSDK.initializeSDK(options);\n      console.log(result);\n    } catch (e) {\n      console.error('Error initializing Scanbot SDK:', e.message);\n    }\n  }\n```\n\nUsing Typescript is pretty handy, since you'll be able to see which properties you can set while initializing the SDK, with extensive code documentation. You can also read more on our official documentation.\n\nThis file also contains a basic UI navigation structure, which we won't explain in detail since it's out of the scope of this tutorial. \n\nThe important part is that we immediately redirect the user to the HomeScreen, where the Medical Certificate Scanner is integrated.\n\n**HomeScreen.tsx**\n\nIn the HomeScreen you will find this method:\n\n```typescript\n    async startMedicalCertificateScanner() {\n\n        let config: MedicalCertificateScannerConfiguration = {\n          topBarBackgroundColor: '#c8193c',\n          footerTitle: 'Scan your Medical Certificate',\n          footerSubtitle: 'ScanbotSDK Demo',\n          // aspectRatios: [\n          //   MedicalCertificateStandardSize.A5_PORTRAIT,\n          //   MedicalCertificateStandardSize.A6_LANDSCAPE,\n          // ],\n        };\n\n        const result: MedicalCertificateScannerResult = await ScanbotSDK.UI.startMedicalCertificateScanner(config);\n    \n        if (result.status !== 'OK') {\n          return;\n        }\n\n        console.log(JSON.stringify(result, undefined, 4));\n\n        MedicalCertificateResultsScreen.result = result.data;\n        this.props.navigation.push(MedicalCertificateResultsScreen.PAGE_NAME);\n    }\n```\n\nLet's break it down:\n\n\n**HomeScreen.tsx - Configuration**\n```typescript\nlet config: MedicalCertificateScannerConfiguration = {\n  topBarBackgroundColor: Colors.SCANBOT_RED,\n  footerTitle: 'Scan your Medical Certificate',\n  footerSubtitle: 'ScanbotSDK Demo',\n  // aspectRatios: [\n  //   MedicalCertificateStandardSize.A5_PORTRAIT,\n  //   MedicalCertificateStandardSize.A6_LANDSCAPE,\n  // ],\n};\n```\n\nThrough ```MedicalCertificateScannerConfiguration```,  you have access to many parameters that you can use to customize the style, texts and behavior of the Medical Scanner. \n\nIn this example we have tweaked some UI parameters for demo purposes, and left a comment to show how it is possible to tweak the required aspect ratios in order to\nmatch your target medical certificates (in case the default values are not appropriate for your specific use-case).\n\nPlease, read more on how you can configure the medical certificate scanner on our [documentation](https://docs.scanbot.io/document-scanner-sdk/react-native/features/#medical-certificate-scanner)\n\n**HomeScreen.tsx - Opening the Medical Certificate Scanner**\n\nTo open the Medical Certificate Scanner, we only need one line of code:\n\n```typescript\nvar result = await ScanbotSDK.UI.startMedicalCertificateScanner(config);\n```\n\n\nWe await the result, since the operation will be asynchronous and will only terminate once the user has scanned the medical certificate or canceled the operation.\n\n\nAgain, the advantage of using TypeScript is being able to access all these parameters, with the relative code documentation, without having to consult the online guide.\n\nThe result will contain a status (OK or CANCELED), so we can check if the scan was successful or not:\n\n```typescript\nif (result.status !== 'OK') {\n  return;\n}\n```\n\nThen we can show the results on a dedicated UI:\n\n```typescript\nMedicalCertificateResultsScreen.result = result.data;\nthis.props.navigation.push(MedicalCertificateResultsScreen.PAGE_NAME);\n```\n\nLet's take a look at the result structure:\n\n**Result Structure**\n\n```typescript\nexport interface MedicalCertificateScannerResultData {\n  /**\n   * The Medical Certificate Form Type\n   */\n  formType: MedicalCertificateFormType;\n  /**\n   * The captured page\n   */\n  capturedPage?: Page;\n  /**\n   * The extracted patient data\n   */\n  patientData: {\n    /** \n     * The health insurance provider. \n     */\n    insuranceProvider?: string;\n    /** \n     * The patients first name. \n     */\n    firstName?: string;\n    /** \n     * The patients last name. \n     */\n    lastName?: string;\n    /** \n     * The patients address 1. \n     */\n    address1?: string;\n    /** \n     * The patients address 2. \n     */\n    address2?: string;\n    /** \n     * The patients diagnose. \n     */\n    diagnose?: string;\n    /** \n     * The patients health insurance number. \n     */\n    healthInsuranceNumber?: string;\n    /** \n     * The patients person number. \n     */\n    insuredPersonNumber?: string;\n    /** \n     * The patients status. \n     */\n    status?: string;\n    /** \n     * The place of operation number. \n     */\n    placeOfOperationNumber?: string;\n    /** \n     * The doctors number. \n     */\n    doctorNumber?: string;\n    /** \n     * An undefined field, that was recognized still. \n     */\n    unknown?: string;\n  };\n  /**\n   * The extracted dates data\n   */\n  dates: {\n    /** \n     * The date since when the employee is incapable of work. \n     */\n    incapableOfWorkSince?: MedicalCertificateDateField;    \n    /** \n     * The date until when the employee is incapable of work. \n     */\n    incapableOfWorkUntil?: MedicalCertificateDateField;    \n    /** \n     * The date of the day of diagnosis. \n     */\n    diagnosedOn?: MedicalCertificateDateField;    \n    /** \n     * The date since when the child needs care. \n     */\n    childNeedsCareFrom?: MedicalCertificateDateField;    \n    /** \n     * The date until the childs needs care. \n     */\n    childNeedsCareUntil?: MedicalCertificateDateField;    \n    /** \n     * Patient birth date. \n     */\n    birthDate?: MedicalCertificateDateField;    \n    /** \n     * Document date. \n    */\n    documentDate?: MedicalCertificateDateField;    \n    /** \n     * An unclassified date, which was recognized still \n     */\n    unknown?: MedicalCertificateDateField;    \n  };\n  /**\n   * The extracted checkboxes data.\n   * It contains information about the medical form checkboxes type\n   * and whether they are checked or not.\n   */\n  checkboxes: {\n    /** \n     * The checkbox states if the certificate is an initial certificate. \n     */\n    initialCertificate?: MedicalCertificateCheckboxField;\n    /** \n     * The checkbox states if the certificate is a renewed certificate. \n     */\n    renewedCertificate?: MedicalCertificateCheckboxField;\n    /** \n     * The checkbox states if the certificate is about a work accident. \n     */\n    workAccident?: MedicalCertificateCheckboxField;\n    /** \n     * The checkbox states if the certificate is assigned to an accident insurance doctor. \n     */\n    assignedToAccidentInsuranceDoctor?: MedicalCertificateCheckboxField;\n    /** \n     * The checkbox states if the certificate is about an accident. \n     */\n    accident?: MedicalCertificateCheckboxField;\n    /** \n     * The checkbox states if ill child requires care. \n     */\n    requiresCare?: MedicalCertificateCheckboxField;\n    /** \n     * The checkbox states if the insurance company has to pay for treatment. \n     */\n    insuredPayCase?: MedicalCertificateCheckboxField;\n    /** \n     * The checkbox states if the certificate is final. \n     */\n    finalCertificate?: MedicalCertificateCheckboxField;\n    /** \n     * The checkbox could not be classified, but it was recognized still\n     */\n    unknown?: MedicalCertificateCheckboxField;\n  };\n};\n```\n\n**Results Page**\nAgain, analyzing the React UI for showing the results is out of the scope of this tutorial, just know that we're simply accessing those result parameters and showing them in a list divided by sections. \n\n```\nsections={[\n  {title: 'Patient Data', data: getPatientData(certificate)},\n  {title: 'Dates', data: getDatesData(certificate)},\n  {title: 'Checkboxes', data: getCheckboxesData(certificate)},\n]}\n```\nWe're also using our ```PreviewImage``` utility class to show the snapped picture on top of the list.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoo%2Freact-native-medical-certificate-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoo%2Freact-native-medical-certificate-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoo%2Freact-native-medical-certificate-tutorial/lists"}