var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var s in e)t(a,s,{get:e[s],enumerable:!0})},o=(a,e,s,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of N(e))!k.call(a,l)&&l!==s&&t(a,l,{get:()=>e[l],enumerable:!(c=h(e,l))||c.enumerable});return a};var b=(a,e,s)=>(s=a!=null?m(u(a)):{},o(e||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),f=a=>o(t({},"__esModule",{value:!0}),a);var i=y((x,r)=>{r.exports=_jsx_runtime});var R={};g(R,{default:()=>v});var n=b(i());function p(a){let e=Object.assign({h2:"h2",a:"a",span:"span",p:"p",ul:"ul",li:"li",pre:"pre",code:"code",strong:"strong",em:"em"},a.components),{Image:s,Ads:c}=e;return c||d("Ads",!0),s||d("Image",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h2,{id:"introduction",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,n.jsx)(e.p,{children:"React Native Camera is a well-known library of React Native ecosystems. It allows you to control the camera and interacts with the device's native operating system and hardware. The features of React Native Camera are listed below :"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Bar Code"}),` `,(0,n.jsx)(e.li,{children:"Face Detection"}),` `,(0,n.jsx)(e.li,{children:"Text Recognition"}),` `,(0,n.jsx)(e.li,{children:"Take Pictures"}),` `]}),` `,(0,n.jsx)(e.p,{children:"In this tutorial, let us build a RNCamera with react hooks and implement how to capture and read barcodes."}),` `,(0,n.jsx)(s,{alt:"Meme",src:"/jagad.dev/posts/react-native-camera-but-with-react-hooks/react_hooks_meme_vs0ptn.jpg",width:"503",height:"496"}),` `,(0,n.jsxs)(e.p,{children:["RNCamera's ",(0,n.jsx)(e.a,{href:"https://react-native-camera.github.io/react-native-camera/docs/rncamera",children:"official documentation"})," may be found here if you want to learn more about it"]}),` `,(0,n.jsxs)(e.h2,{id:"install-rncamera-module",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#install-rncamera-module",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Install RNCamera Module"]}),` `,(0,n.jsx)(e.p,{children:"You have to install some dependencies to use the RNCamera module."}),` `,(0,n.jsx)(e.p,{children:"For (RN > 0.60):"}),` `,(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsxs)(e.code,{className:"language-bash code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"npm"})," ",(0,n.jsx)(e.span,{className:"token function",children:"install"})," react-native-camera ",(0,n.jsx)(e.span,{className:"token parameter variable",children:"--save"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token builtin class-name",children:"cd"})," ios ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," pod ",(0,n.jsx)(e.span,{className:"token function",children:"install"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," ",(0,n.jsx)(e.span,{className:"token builtin class-name",children:"cd"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:".."}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"For RN < 0.60:"}),` `,(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsxs)(e.code,{className:"language-bash code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"npm"})," ",(0,n.jsx)(e.span,{className:"token function",children:"install"})," react-native-camera ",(0,n.jsx)(e.span,{className:"token parameter variable",children:"--save"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:["react-native ",(0,n.jsx)(e.span,{className:"token function",children:"link"}),` react-native-camera `]})]})}),` `,(0,n.jsxs)(e.h2,{id:"other-required-steps-are-to-add-permissions-on-both-android-and-ios",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#other-required-steps-are-to-add-permissions-on-both-android-and-ios",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Other required steps are to add permissions on both Android and iOS"]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"iOS - other required steps"})}),` `,(0,n.jsxs)(e.p,{children:["Add permissions with usage descriptions to your app ",(0,n.jsx)(e.code,{children:"Info.plist"})]}),` `,(0,n.jsx)(e.pre,{className:"language-xml",children:(0,n.jsxs)(e.code,{className:"language-xml code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:""}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"key"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"NSCameraUsageDescription",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"string"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Your message to user when the camera is accessed for the first time",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:""}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"key"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"NSPhotoLibraryAddUsageDescription",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"string"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Your message to user when the photo library is accessed for the first time",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:""}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"key"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"NSPhotoLibraryUsageDescription",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"string"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Your message to user when the photo library is accessed for the first time",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:""}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"key"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"NSMicrophoneUsageDescription",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"string"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Your message to user when the microphone is accessed for the first time",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Android - other required steps"})}),` `,(0,n.jsxs)(e.p,{children:["Add permissions to your app\xA0",(0,n.jsx)(e.code,{children:"android/app/src/main/AndroidManifest.xml"})]}),` `,(0,n.jsx)(e.pre,{className:"language-xml",children:(0,n.jsxs)(e.code,{className:"language-xml code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"uses-permission"]})," ",(0,n.jsxs)(e.span,{className:"token attr-name",children:[(0,n.jsx)(e.span,{className:"token namespace",children:"android:"}),"name"]}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"android.permission.CAMERA",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"uses-permission"]})," ",(0,n.jsxs)(e.span,{className:"token attr-name",children:[(0,n.jsx)(e.span,{className:"token namespace",children:"android:"}),"name"]}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"android.permission.READ_EXTERNAL_STORAGE",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"uses-permission"]})," ",(0,n.jsxs)(e.span,{className:"token attr-name",children:[(0,n.jsx)(e.span,{className:"token namespace",children:"android:"}),"name"]}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"android.permission.WRITE_EXTERNAL_STORAGE",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"uses-permission"]})," ",(0,n.jsxs)(e.span,{className:"token attr-name",children:[(0,n.jsx)(e.span,{className:"token namespace",children:"android:"}),"name"]}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"android.permission.RECORD_AUDIO",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Insert the following lines in\xA0",(0,n.jsx)(e.code,{children:"android/app/build.gradle"}),":"]}),` `,(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:["android ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" defaultConfig ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" missingDimensionStrategy ",(0,n.jsx)(e.span,{className:"token string",children:"'react-native-camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'general'"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// <--- insert this line"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.h2,{id:"rn-camera-is-deprecated-but",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#rn-camera-is-deprecated-but",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"RN Camera is deprecated, but..."]}),` `,(0,n.jsx)(e.p,{children:"I haven't been in the react-native-camera library for a long time, but I recently discovered that this library is deprecated and an error is popping up regarding viewproptypes in the latest react native"}),` `,(0,n.jsxs)(e.p,{children:["This is pretty easily resolved. The ",(0,n.jsx)(e.code,{children:"deprecated-react-native-prop-types"})," library only has to be installed in the following way:"]}),` `,(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsxs)(e.code,{className:"language-bash code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"#npm"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"npm"}),` i deprecated-react-native-prop-types `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"#or"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"#yarn"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"yarn"})," ",(0,n.jsx)(e.span,{className:"token function",children:"add"}),` deprecated-react-native-prop-types `]})]})}),` `,(0,n.jsxs)(e.p,{children:["After that go to ",(0,n.jsx)(e.em,{children:(0,n.jsx)(e.strong,{children:"/node-modules/react-native-camera/src/RNCamera.js"})})," folder and delete ",(0,n.jsx)(e.code,{children:"ViewPropTypes"})]}),` `,(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PropTypes"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'prop-types'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" findNodeHandle",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Platform"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"NativeModules"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ViewPropTypes"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// DELETE"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" requireNativeComponent",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"View"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ActivityIndicator"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Text"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StyleSheet"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PermissionsAndroid"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react-native'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"Then we just need to add the library that we have previously installed."}),` `,(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PropTypes"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'prop-types'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" findNodeHandle",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Platform"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"NativeModules"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" requireNativeComponent",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"View"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ActivityIndicator"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Text"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"StyleSheet"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token imports",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PermissionsAndroid"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react-native'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ViewPropTypes"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'deprecated-react-native-prop-types'"}),` `]})]})}),` `,(0,n.jsxs)(e.h2,{id:"implementation-of-rncamera-using-react-hooks",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#implementation-of-rncamera-using-react-hooks",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Implementation of RNCamera using React Hooks"]}),` `,(0,n.jsx)(e.p,{children:"Class components are used instead of functional components in the RNCamera documentation, but we use functional components here because, these days, functional components are used more often."}),` `,(0,n.jsx)(e.pre,{className:"language-javascript",children:(0,n.jsxs)(e.code,{className:"language-javascript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Import"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Module"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react-native-camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Then"})," use the ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})," tag",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react-native-camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ref ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"createRef"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ref",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"ref",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" style",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token literal-property property",children:"flex"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"justifyContent"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'flex-end'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"alignItems"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'center'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Constants"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Type"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"back"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" flashMode",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Constants"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FlashMode"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"on"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" androidCameraPermissionOptions",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"title"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Permission to use camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"message"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'We need your permission to use your camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"buttonPositive"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Ok'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"buttonNegative"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Cancel'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["After the ",(0,n.jsx)(e.code,{children:""})," tag is called, this is what it looks like."]}),` `,(0,n.jsx)(s,{alt:"React Native Camera",src:"/v1649557369/jagad.dev/posts/react-native-camera-but-with-react-hooks/RNCamera_nvliau.png",width:"1919",height:"1079"}),` `,(0,n.jsxs)(e.h2,{id:"how-to-take-a-photo-with-rncamera",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-take-a-photo-with-rncamera",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"How to Take a Photo with RNCamera"]}),` `,(0,n.jsx)(e.p,{children:"In order for the Camera to take pictures, we must create a function to handle it."}),` `,(0,n.jsx)(e.pre,{className:"language-javascript",children:(0,n.jsxs)(e.code,{className:"language-javascript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"takePicture"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ref",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," options ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"quality"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0.5"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"base64"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," data ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"await"})," ref",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"takePictureAsync"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"options",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token console class-name",children:"console"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"log"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"data",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"uri"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Here is the complete source code with the ",(0,n.jsx)(e.code,{children:"take"})," button."]}),` `,(0,n.jsx)(e.pre,{className:"language-javascript",children:(0,n.jsxs)(e.code,{className:"language-javascript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Text"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"View"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"TouchableOpacity"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react-native'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react-native-camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ref ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"createRef"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"takePicture"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ref",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," options ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"quality"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0.5"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"base64"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," data ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"await"})," ref",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"takePictureAsync"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"options",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token console class-name",children:"console"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"log"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"data",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"uri"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"View"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" style",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"flex"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"flexDirection"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'column'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"backgroundColor"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'black'"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ref",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"ref",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" style",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"flex"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"justifyContent"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'flex-end'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"alignItems"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'center'"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Constants"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Type"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"back"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" flashMode",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Constants"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FlashMode"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"on"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" androidCameraPermissionOptions",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"title"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Permission to use camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"message"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'We need your permission to use your camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"buttonPositive"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Ok'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"buttonNegative"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Cancel'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"View"})," style",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"flex"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"flexDirection"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'row'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"justifyContent"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'center'"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"TouchableOpacity"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" onPress",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"takePicture",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" style",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"flex"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"backgroundColor"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'#fff'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"borderRadius"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1000"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"padding"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"15"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"paddingHorizontal"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"20"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"alignSelf"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'center'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"margin"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"20"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Text"})," style",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"fontSize"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"14"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Take"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Picture"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Text"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"TouchableOpacity"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"View"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"View"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["When we press the ",(0,n.jsx)(e.code,{children:"take"})," button, a log with the URL of the image that was taken will appear."]}),` `,(0,n.jsx)(s,{alt:"Take Picture With RNCamera",src:"/v1649557743/jagad.dev/posts/react-native-camera-but-with-react-hooks/Take_picture_with_RNCamera_ursckf.png",width:"1904",height:"1080"}),` `,(0,n.jsx)(c,{}),` `,(0,n.jsxs)(e.h2,{id:"how-to-read-barcodes",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-read-barcodes",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"How to read barcodes"]}),` `,(0,n.jsx)(e.p,{children:"RNCamera can also read aztec, code128, code39, code39, code39, mod43, code93, ean13, ean8, pdf417, qr, and upce barcodes."}),` `,(0,n.jsxs)(e.p,{children:["we can use ",(0,n.jsx)(e.code,{children:"onBarCodeRead"})," property to read barcode."]}),` `,(0,n.jsx)(e.pre,{className:"language-javascript",children:(0,n.jsxs)(e.code,{className:"language-javascript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react-native-camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ref ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"createRef"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ref",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"ref",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" style",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"flex"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"justifyContent"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'flex-end'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"alignItems"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'center'"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Constants"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Type"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"back"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" flashMode",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RNCamera"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Constants"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FlashMode"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"on"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" androidCameraPermissionOptions",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"title"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Permission to use camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"message"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'We need your permission to use your camera'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"buttonPositive"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Ok'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"buttonNegative"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Cancel'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"//this is onBarcodeRead Property"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" onBarCodeRead",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"barcodes"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token console class-name",children:"console"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"log"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"barcodes",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"A barcode log will show when we point the camera at the barcode. In this case, I'm using QR types."}),` `,(0,n.jsx)(s,{alt:"Scan Barcodes With RNCamera",src:"/v1649557941/jagad.dev/posts/react-native-camera-but-with-react-hooks/Scan_barcode_wirh_RNCamera_utwegr.png",width:"1856",height:"1078"}),` `,(0,n.jsxs)(e.h2,{id:"conclusion",children:[(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,n.jsx)(e.p,{children:"If you're developing cross-platform apps with React Native, the react-native-camera module is a great way to take advantage of the device's hardware."})]})}function w(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(p,a)})):p(a)}var v=w;function d(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(R);})(); ;return Component;