{"id":165,"date":"2023-12-28T10:44:01","date_gmt":"2023-12-28T10:44:01","guid":{"rendered":"https:\/\/blog.200oksolutions.com\/?p=165"},"modified":"2025-12-04T07:44:09","modified_gmt":"2025-12-04T07:44:09","slug":"barcode-qr-code-scanner-react-native","status":"publish","type":"post","link":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/","title":{"rendered":"Barcode\/QR Code Scanner (React Native)"},"content":{"rendered":"\n<figure id=\"qr-barcode-scanner\" class=\"wp-block-video\"><video height=\"1920\" style=\"aspect-ratio: 1080 \/ 1920;\" width=\"1080\" poster=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2023\/12\/Barcode_QR-Code-Scanner-with-React-Native-portrait-1.mp4\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/07\/Barcode_QR-Code-Scanner-with-React-Native-portrait.mp4\"><\/video><\/figure>\n\n\n\n<p><strong>What is a Barcode &amp; QR code?<\/strong><\/p>\n\n\n\n<p>A barcode holds information horizontally, while a QR code (Quick Response) holds information both vertically and horizontally.<\/p>\n\n\n\n<div style=\"height:14px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>To implement a barcode scanner in React Native, you&#8217;ll need <code>react-native-vision-camera<\/code> and <code>react-native-worklets-core<\/code>. These dependencies utilize MLKit Vision on Android and Apple Vision on iOS.<br><br>Install dependencies:<\/p>\n\n\n\n<p>command 1: <strong>npm install react-native-vision-camera@3.3.0<\/strong><\/p>\n\n\n\n<p>command 2: <strong>npm install react-native-worklets-core@0.2.2<\/strong><\/p>\n\n\n\n<div style=\"height:13px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Add the worklet plugin to your babel.config.js:<\/p>\n\n\n\n<pre class=\"wp-block-code has-silver-blue-background-color has-background\"><code>module.exports = {\n   plugins: &#91;\n        &#91;'react-native-worklets-core\/plugin']\n   ],\n}<\/code><\/pre>\n\n\n\n<p><strong>Configure Permissions<\/strong><\/p>\n\n\n\n<p><strong>Android<\/strong>: Add the following lines to your AndroidManifest.xml:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-3d94d53e973cdcde5057132c068b62d1\"><code>&lt;uses-permission android:name=\"android.permission.CAMERA\" \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>iOS:<\/strong> Add the following lines to your Info.plist:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-11bd5d5f86e8ba1f0cf2435a73e75e37\"><code>&lt;key&gt;NSCameraUsageDescription&lt;\/key&gt;\n&lt;string&gt;$(PRODUCT_NAME) needs access to your Camera.&lt;\/string&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:14px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Additional Android Setup:<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left\">Ensure your build.gradle includes the following configurations:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> Set <strong>buildToolsVersion<\/strong> to 33.0.0 or higher<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li> Set <strong>compileSdkVersion<\/strong> to 33 or higher<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li> Set <strong>targetSdkVersion<\/strong> to 33 or higher<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li> Set <strong>minSdkVersio<\/strong>n to 26 or higher<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li> Set <strong>ndkVersion<\/strong> to &#8220;23.1.7779620&#8221; or higher<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Update the Gradle Build-Tools version<\/li>\n<\/ul>\n\n\n\n<p>In Android Make sure your Gradle Wrapper version is 7.5.1 or higher in gradle-wrapper.properties:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-9b99ea71a13627078f2ea991b7bd0e95\"><code>distributionUrl=https\\:\/\/services.gradle.org\/distributions\/gradle-7.5.1-all.zip<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Troubleshoot<\/strong> <\/p>\n\n\n\n<p>Use the <code>useCameraDevice<\/code> hook to access the camera:<\/p>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Get Device<\/strong><\/p>\n\n\n\n<p>By using <strong>useCameraDevice<\/strong> hook, by passing \u2018back\u2019 as a parameter we are able to get the device which is required by camera component.<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-9fddf11c792f37ecc42919dfc23c4466\"><code>const device = useCameraDevice('back');<\/code><\/pre>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Getting\/Requesting Permission<\/strong><\/p>\n\n\n\n<p>Use the useCameraPermission hook to request camera permissions:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-6419d5ddfbe0073bce478ec3557c8c9a\"><code>const { hasPermission, requestPermission } = useCameraPermission();<\/code><\/pre>\n\n\n\n<p><strong>Frame Processors<\/strong>:<\/p>\n\n\n\n<p>Frame processors are functions that process frames the camera &#8220;sees&#8221;. Use them to call high-performance native functions for specific use cases:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-471d887b9bebe0caf5fc177fee5c862f\"><code>const frameProcessor = useFrameProcessor((frame) =&gt; { \n      'worklet'\n      const objects = detectObjects(frame)\n      console.log(`Detected ${objects.length} objects.`) \n}, &#91;])<\/code><\/pre>\n\n\n\n<p><strong>CodeScanner<\/strong><\/p>\n\n\n\n<p>Use the useCodeScanner hook to detect codes in a camera stream:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-silver-blue-background-color has-text-color has-background has-link-color wp-elements-d68419501de7aa0b221e5323abcf52e9\"><code>const codeScanner = useCodeScanner({ \n      codeTypes: &#91;'qr', 'ean-13'], \n      onCodeScanned: (codes) =&gt; { \n           console.log(`Scanned ${codes.length} codes!`) \n      } \n})<\/code><\/pre>\n\n\n\n<p><strong>Scanner Example<\/strong><\/p>\n\n\n\n<p>Refer to the demo app for a comprehensive example. Check out the sample barcode code-128 and QR code. <a data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2023\/12\/BarcodeQRScanCode.txt\" href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2023\/12\/BarcodeQRScanCode.txt\" target=\"_blank\" rel=\"noreferrer noopener\">BarcodeQRScanCode<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-left\"><strong>Barcode code-128<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"400\" height=\"100\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2023\/12\/image-3.png\" alt=\"\" class=\"wp-image-169\" style=\"width:321px;height:auto\"\/><\/figure>\n\n\n\n<div style=\"height:29px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-7eea9941\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<p> <strong>QR code<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1012\" height=\"1012\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2023\/12\/image-2-1.png\" alt=\"\" class=\"wp-image-171\" style=\"width:159px;height:auto\"\/><\/figure>\n\n\n\n<p>Please check out the demo app for better understanding <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2023\/12\/qrcode_scanner_recording-1.mp4\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2023\/12\/qrcode_scanner_recording-1.mp4\">qrcode_scanner_recording.mp4<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is a Barcode &amp; QR code? A barcode holds information horizontally, while a QR code (Quick&hellip;<\/p>\n","protected":false},"author":5,"featured_media":174,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[18,16,13,17,14,19],"class_list":["post-165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","tag-barcode-scanner","tag-cross-platform","tag-hybrid","tag-qr-scanner","tag-react-native","tag-scanner"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Barcode\/QR Code Scanner (React Native) Web Development, Software, and App Blog | 200OK Solutions<\/title>\n<meta name=\"description\" content=\"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Barcode\/QR Code Scanner (React Native) Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"og:description\" content=\"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-28T10:44:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T07:44:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2023\/12\/Untitled-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Piyush Solanki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Piyush Solanki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Barcode\/QR Code Scanner (React Native) Web Development, Software, and App Blog | 200OK Solutions","description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Barcode\/QR Code Scanner (React Native) Web Development, Software, and App Blog | 200OK Solutions","og_description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","og_url":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/","og_site_name":"Web Development, Software, and App Blog | 200OK Solutions","article_published_time":"2023-12-28T10:44:01+00:00","article_modified_time":"2025-12-04T07:44:09+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2023\/12\/Untitled-design.png","type":"image\/png"}],"author":"Piyush Solanki","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Piyush Solanki","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/#article","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/"},"author":{"name":"Piyush Solanki","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e"},"headline":"Barcode\/QR Code Scanner (React Native)","datePublished":"2023-12-28T10:44:01+00:00","dateModified":"2025-12-04T07:44:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/"},"wordCount":265,"commentCount":0,"publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2023\/12\/Untitled-design.png","keywords":["barcode scanner","cross platform","hybrid","qr scanner","react native","scanner"],"articleSection":["Mobile"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/","url":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/","name":"Barcode\/QR Code Scanner (React Native) Web Development, Software, and App Blog | 200OK Solutions","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2023\/12\/Untitled-design.png","datePublished":"2023-12-28T10:44:01+00:00","dateModified":"2025-12-04T07:44:09+00:00","description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","breadcrumb":{"@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/#primaryimage","url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2023\/12\/Untitled-design.png","contentUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2023\/12\/Untitled-design.png","width":1920,"height":1080,"caption":"react native scan-1"},{"@type":"BreadcrumbList","@id":"https:\/\/www.200oksolutions.com\/blog\/barcode-qr-code-scanner-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.200oksolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Barcode\/QR Code Scanner (React Native)"}]},{"@type":"WebSite","@id":"https:\/\/www.200oksolutions.com\/blog\/#website","url":"https:\/\/www.200oksolutions.com\/blog\/","name":"Web Development, Software, and App Blog | 200OK Solutions","description":"","publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.200oksolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.200oksolutions.com\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/www.200oksolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","contentUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/200ok_solutions\/"]},{"@type":"Person","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e","name":"Piyush Solanki","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","caption":"Piyush Solanki"},"description":"Piyush is a seasoned PHP Tech Lead with 10+ years of experience architecting and delivering scalable web and mobile backend solutions for global brands and fast-growing SMEs. He specializes in PHP, MySQL, CodeIgniter, WordPress, and custom API development, helping businesses modernize legacy systems and launch secure, high-performance digital products. He collaborates closely with mobile teams building Android &amp; iOS apps , developing RESTful APIs, cloud integrations, and secure payment systems using platforms like Stripe, AWS S3, and OTP\/SMS gateways. His work extends across CMS customization, microservices-ready backend architectures, and smooth product deployments across Linux and cloud-based environments. Piyush also has a strong understanding of modern front-end technologies such as React and TypeScript, enabling him to contribute to full-stack development workflows and advanced admin panels. With a successful delivery track record in the UK market and experience building digital products for sectors like finance, hospitality, retail, consulting, and food services, Piyush is passionate about helping SMEs scale technology teams, improve operational efficiency, and accelerate innovation through backend excellence and digital tools.","url":"https:\/\/www.200oksolutions.com\/blog\/author\/piyush\/"}]}},"_links":{"self":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":41,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":791,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/165\/revisions\/791"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media\/174"}],"wp:attachment":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}