bluewallet/react-native-camera
bluewallet/react-native-camera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
gh-pages
react-native-camera/docs/installation.html
MateusAndrade de6333141e Deploy website 
Deploy website version based on 970248c1a6
2020-05-11 13:06:56 +00:00

443 lines
45 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Installation · React Native Camera</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="&lt;p&gt;This document is split into two main sections:&lt;/p&gt;
"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Installation · React Native Camera"/><meta property="og:type" content="website"/><meta property="og:url" content="undefined/react-native-camera/"/><meta property="og:description" content="&lt;p&gt;This document is split into two main sections:&lt;/p&gt;
"/><meta property="og:image" content="undefined/react-native-camera/img/undraw_online.svg"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="undefined/react-native-camera/img/undraw_tweetstorm.svg"/><link rel="shortcut icon" href="/react-native-camera/img/community.png"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><link rel="stylesheet" href="/css/code-block-buttons.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><script type="text/javascript" src="/js/code-blocks-buttons.js"></script><script src="/react-native-camera/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native-camera/css/prism.css"/><link rel="stylesheet" href="/react-native-camera/css/main.css"/><script src="/react-native-camera/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native-camera/"><img class="logo" src="/react-native-camera/img/community.png" alt="React Native Camera"/><h2 class="headerTitleWithLogo">React Native Camera</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive siteNavItemActive"><a href="/react-native-camera/docs/installation" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/react-native-camera/docs/expo_usage" target="_self">Guides</a></li><li class="siteNavGroupActive"><a href="/react-native-camera/docs/api" target="_self">API</a></li><li class=""><a href="/react-native-camera/docs/qa" target="_self">Help</a></li><li class="siteNavGroupActive"><a href="/react-native-camera/docs/Tidelift" target="_self">For Enterprise</a></li><li class=""><a href="https://github.com/react-native-community/react-native-camera" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Getting Started</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Getting Started</h3><ul class=""><li class="navListItem navListItemActive"><a class="navItem" href="/react-native-camera/docs/installation">Installation</a></li><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/contributing">Contributing</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Guides</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/expo_usage">Expo Usage</a></li><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/GradleUpgradeGuide">Gradle Upgrade Guide</a></li><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/migration">Migrating from RCTCamera to RNCamera</a></li><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/migrationv2">Migrating from version 1.x to 2.x</a></li><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/react-navigation">React Navigation</a></li><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/recipes">Recipes</a></li><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/rncamera">RNCamera</a></li><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/tests">Testing</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">API</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/api">Work in progress</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Help</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/qa">Q &amp; A</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Enterprise</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native-camera/docs/Tidelift">React-Native-Camera for Enterprise</a></li></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
var headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
var el = event.target;
while(el !== headings){
if (el.tagName === 'A') {
document.body.classList.remove('tocActive');
break;
} else{
el = el.parentNode;
}
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/react-native-community/react-native-camera/master/docs/installation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Installation</h1></header><article><div><span><p>This document is split into two main sections:</p>
<ol>
<li>Required installation steps for basic usage of <code>react-native-camera</code></li>
<li>Additional installation steps for usage of Face Detection/Text Recognition/BarCode with <a href="https://developers.google.com/ml-kit">MLKit</a></li>
</ol>
<h1><a class="anchor" aria-hidden="true" id="required-installation-steps"></a><a href="#required-installation-steps" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Required installation steps</h1>
<p><em>These steps assume installation for iOS/Android. To install it with Windows, see manual install <a href="#windows">below</a></em></p>
<h2><a class="anchor" aria-hidden="true" id="mostly-automatic-install-with-autolinking-rn-060"></a><a href="#mostly-automatic-install-with-autolinking-rn-060" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Mostly automatic install with autolinking (RN &gt; 0.60)</h2>
<ol>
<li><code>npm install react-native-camera --save</code></li>
<li>Run <code>cd ios &amp;&amp; pod install &amp;&amp; cd ..</code></li>
</ol>
<h2><a class="anchor" aria-hidden="true" id="mostly-automatic-install-with-react-native-link-rn-060"></a><a href="#mostly-automatic-install-with-react-native-link-rn-060" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Mostly automatic install with react-native link (RN &lt; 0.60)</h2>
<ol>
<li><code>npm install react-native-camera --save</code></li>
<li><code>react-native link react-native-camera</code></li>
</ol>
<h2><a class="anchor" aria-hidden="true" id="manual-install-ios-not-recommended"></a><a href="#manual-install-ios-not-recommended" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual install - iOS (not recommended)</h2>
<ol>
<li><code>npm install react-native-camera --save</code></li>
<li>In XCode, in the project navigator, right click <code>Libraries</code> ➜ <code>Add Files to [your project's name]</code></li>
<li>Go to <code>node_modules</code> ➜ <code>react-native-camera</code> and add <code>RNCamera.xcodeproj</code></li>
<li>Expand the <code>RNCamera.xcodeproj</code> ➜ <code>Products</code> folder</li>
<li>In XCode, in the project navigator, select your project. Add <code>libRNCamera.a</code> to your project's <code>Build Phases</code> ➜ <code>Link Binary With Libraries</code></li>
<li>Click <code>RNCamera.xcodeproj</code> in the project navigator and go the <code>Build Settings</code> tab. Make sure 'All' is toggled on (instead of 'Basic'). In the <code>Search Paths</code> section, look for <code>Header Search Paths</code> and make sure it contains both <code>$(SRCROOT)/../../react-native/React</code> and <code>$(SRCROOT)/../../../React</code> - mark both as <code>recursive</code>.</li>
</ol>
<h2><a class="anchor" aria-hidden="true" id="manual-install-android-not-recommended"></a><a href="#manual-install-android-not-recommended" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual install - Android (not recommended)</h2>
<ol>
<li><code>npm install react-native-camera --save</code></li>
<li>Open up <code>android/app/src/main/java/[...]/MainApplication.java</code></li>
</ol>
<ul>
<li>Add <code>import org.reactnative.camera.RNCameraPackage;</code> to the imports at the top of the file</li>
<li>Add <code>new RNCameraPackage()</code> to the list returned by the <code>getPackages()</code> method. Add a comma to the previous item if there's already something there.</li>
</ul>
<ol start="3">
<li>Append the following lines to <code>android/settings.gradle</code>:</li>
</ol>
<pre><code class="hljs css language-gradle"><span class="hljs-keyword">include</span> <span class="hljs-string">':react-native-camera'</span>
<span class="hljs-keyword">project</span>(<span class="hljs-string">':react-native-camera'</span>).projectDir = <span class="hljs-keyword">new</span> <span class="hljs-keyword">File</span>(rootProject.projectDir, <span class="hljs-string">'../node_modules/react-native-camera/android'</span>)
</code></pre>
<ol start="4">
<li>Insert the following lines in <code>android/app/build.gradle</code> inside the dependencies block:</li>
</ol>
<pre><code class="hljs css language-gradle">implementation <span class="hljs-keyword">project</span>(<span class="hljs-string">':react-native-camera'</span>)
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="ios-other-required-steps"></a><a href="#ios-other-required-steps" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>iOS - other required steps</h2>
<p>Add permissions with usage descriptions to your app <code>Info.plist</code>:</p>
<pre><code class="hljs css language-xml"><span class="hljs-comment">&lt;!-- Required with iOS 10 and higher --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">key</span>&gt;</span>NSCameraUsageDescription<span class="hljs-tag">&lt;/<span class="hljs-name">key</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">string</span>&gt;</span>Your message to user when the camera is accessed for the first time<span class="hljs-tag">&lt;/<span class="hljs-name">string</span>&gt;</span>
<span class="hljs-comment">&lt;!-- Required with iOS 11 and higher: include this only if you are planning to use the camera roll --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">key</span>&gt;</span>NSPhotoLibraryAddUsageDescription<span class="hljs-tag">&lt;/<span class="hljs-name">key</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">string</span>&gt;</span>Your message to user when the photo library is accessed for the first time<span class="hljs-tag">&lt;/<span class="hljs-name">string</span>&gt;</span>
<span class="hljs-comment">&lt;!-- Include this only if you are planning to use the camera roll --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">key</span>&gt;</span>NSPhotoLibraryUsageDescription<span class="hljs-tag">&lt;/<span class="hljs-name">key</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">string</span>&gt;</span>Your message to user when the photo library is accessed for the first time<span class="hljs-tag">&lt;/<span class="hljs-name">string</span>&gt;</span>
<span class="hljs-comment">&lt;!-- Include this only if you are planning to use the microphone for video recording --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">key</span>&gt;</span>NSMicrophoneUsageDescription<span class="hljs-tag">&lt;/<span class="hljs-name">key</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">string</span>&gt;</span>Your message to user when the microphone is accessed for the first time<span class="hljs-tag">&lt;/<span class="hljs-name">string</span>&gt;</span>
</code></pre>
<p><details>
<summary>Additional information in case of problems</summary></p>
<p>You might need to adjust your Podfile following the example below:</p>
<pre><code class="hljs css language-ruby">target <span class="hljs-string">'yourTargetName'</span> <span class="hljs-keyword">do</span>
<span class="hljs-comment"># See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies</span>
pod <span class="hljs-string">'React'</span>, <span class="hljs-symbol">:path</span> =&gt; <span class="hljs-string">'../node_modules/react-native'</span>, <span class="hljs-symbol">:subspecs</span> =&gt; [
<span class="hljs-string">'Core'</span>,
<span class="hljs-string">'CxxBridge'</span>, <span class="hljs-comment"># Include this for RN &gt;= 0.47</span>
<span class="hljs-string">'DevSupport'</span>, <span class="hljs-comment"># Include this to enable In-App Devmenu if RN &gt;= 0.43</span>
<span class="hljs-string">'RCTText'</span>,
<span class="hljs-string">'RCTNetwork'</span>,
<span class="hljs-string">'RCTWebSocket'</span>, <span class="hljs-comment"># Needed for debugging</span>
<span class="hljs-string">'RCTAnimation'</span>, <span class="hljs-comment"># Needed for FlatList and animations running on native UI thread</span>
<span class="hljs-comment"># Add any other subspecs you want to use in your project</span>
]
<span class="hljs-comment"># Explicitly include Yoga if you are using RN &gt;= 0.42.0</span>
pod <span class="hljs-string">'yoga'</span>, <span class="hljs-symbol">:path</span> =&gt; <span class="hljs-string">'../node_modules/react-native/ReactCommon/yoga'</span>
<span class="hljs-comment"># Third party deps podspec link</span>
pod <span class="hljs-string">'react-native-camera'</span>, <span class="hljs-symbol">path:</span> <span class="hljs-string">'../node_modules/react-native-camera'</span>
<span class="hljs-keyword">end</span>
post_install <span class="hljs-keyword">do</span> <span class="hljs-params">|installer|</span>
installer.pods_project.targets.each <span class="hljs-keyword">do</span> <span class="hljs-params">|target|</span>
<span class="hljs-keyword">if</span> target.name == <span class="hljs-string">"React"</span>
target.remove_from_project
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
</code></pre>
<p></details></p>
<h2><a class="anchor" aria-hidden="true" id="android-other-required-steps"></a><a href="#android-other-required-steps" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android - other required steps</h2>
<p>Add permissions to your app <code>android/app/src/main/AndroidManifest.xml</code> file:</p>
<pre><code class="hljs css language-xml"><span class="hljs-comment">&lt;!-- Required --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.CAMERA"</span> /&gt;</span>
<span class="hljs-comment">&lt;!-- Include this only if you are planning to use the camera roll --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.READ_EXTERNAL_STORAGE"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.WRITE_EXTERNAL_STORAGE"</span> /&gt;</span>
<span class="hljs-comment">&lt;!-- Include this only if you are planning to use the microphone for video recording --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.RECORD_AUDIO"</span>/&gt;</span>
</code></pre>
<p>Insert the following lines in <code>android/app/build.gradle</code>:</p>
<pre><code class="hljs css language-gradle">android {
...
defaultConfig {
...
missingDimensionStrategy <span class="hljs-string">'react-native-camera'</span>, <span class="hljs-string">'general'</span> <span class="hljs-comment">// &lt;--- insert this line</span>
}
}
</code></pre>
<p><details>
<summary>Additional information in case of problems</summary></p>
<ol>
<li><p>Make sure you use <code>JDK &gt;= 1.7</code> and your <code>buildToolsVersion &gt;= 25.0.2</code></p></li>
<li><p>Make sure you have jitpack added in <code>android/build.gradle</code></p></li>
</ol>
<pre><code class="hljs css language-gradle"><span class="hljs-keyword">allprojects</span> {
<span class="hljs-keyword">repositories</span> {
maven { url <span class="hljs-string">"https://www.jitpack.io"</span> }
maven { url <span class="hljs-string">"https://maven.google.com"</span> }
}
}
</code></pre>
<p></details></p>
<h1><a class="anchor" aria-hidden="true" id="additional-installation-steps"></a><a href="#additional-installation-steps" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Additional installation steps</h1>
<p>Follow these optional steps if you want to use Face Detection/Text Recognition/BarCode with <a href="https://developers.google.com/ml-kit">MLKit</a>.
You will need to set-up Firebase project for your app (detailed steps below).</p>
<p><em>Note:</em> Installing <a href="https://github.com/invertase/react-native-firebase">react-native-firebase</a> package is NOT necessary.</p>
<h2><a class="anchor" aria-hidden="true" id="ios"></a><a href="#ios" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>iOS</h2>
<p>If you want any of these optional features, you will need to use CocoaPods.</p>
<h3><a class="anchor" aria-hidden="true" id="modifying-podfile"></a><a href="#modifying-podfile" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Modifying Podfile</h3>
<p>Add dependency towards <code>react-native-camera</code> in your <code>Podfile</code> with <code>subspecs</code> using one of the following:</p>
<ul>
<li>For Face Detection:</li>
</ul>
<pre><code class="hljs css language-ruby">pod <span class="hljs-string">'react-native-camera'</span>, <span class="hljs-symbol">path:</span> <span class="hljs-string">'../node_modules/react-native-camera'</span>, <span class="hljs-symbol">subspecs:</span> [
<span class="hljs-string">'FaceDetectorMLKit'</span>
]
</code></pre>
<ul>
<li>For Text Recognition:</li>
</ul>
<pre><code class="hljs css language-ruby">pod <span class="hljs-string">'react-native-camera'</span>, <span class="hljs-symbol">path:</span> <span class="hljs-string">'../node_modules/react-native-camera'</span>, <span class="hljs-symbol">subspecs:</span> [
<span class="hljs-string">'TextDetector'</span>
]
</code></pre>
<ul>
<li>For BarCode Recognition:</li>
</ul>
<pre><code class="hljs css language-ruby">pod <span class="hljs-string">'react-native-camera'</span>, <span class="hljs-symbol">path:</span> <span class="hljs-string">'../node_modules/react-native-camera'</span>, <span class="hljs-symbol">subspecs:</span> [
<span class="hljs-string">'BarcodeDetectorMLKit'</span>
]
</code></pre>
<ul>
<li>For all possible detections:</li>
</ul>
<pre><code class="hljs css language-ruby">pod <span class="hljs-string">'react-native-camera'</span>, <span class="hljs-symbol">path:</span> <span class="hljs-string">'../node_modules/react-native-camera'</span>, <span class="hljs-symbol">subspecs:</span> [
<span class="hljs-string">'TextDetector'</span>,
<span class="hljs-string">'FaceDetectorMLKit'</span>,
<span class="hljs-string">'BarcodeDetectorMLKit'</span>
]
</code></pre>
<p>Then run <code>cd ios &amp;&amp; pod install &amp;&amp; cd ..</code></p>
<h3><a class="anchor" aria-hidden="true" id="setting-up-firebase"></a><a href="#setting-up-firebase" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Setting up Firebase</h3>
<p>Text/Face recognition for iOS uses Firebase MLKit which requires setting up Firebase project for your app.
If you have not already added Firebase to your app, please follow the steps described in <a href="https://firebase.google.com/docs/ios/setup">getting started guide</a>.
In short, you would need to</p>
<ol>
<li>Register your app in Firebase console.</li>
<li>Download <code>GoogleService-Info.plist</code> and add it to your project</li>
<li>Add <code>pod 'Firebase/Core'</code> to your podfile</li>
<li>In your <code>AppDelegate.m</code> file add the following lines:</li>
</ol>
<pre><code class="hljs css language-objective-c">#import &lt;Firebase.h&gt; // &lt;--- add this
...
- <span class="hljs-params">(BOOL)</span>application:<span class="hljs-params">(UIApplication *)</span>application didFinishLaunchingWithOptions:<span class="hljs-params">(NSDictionary *)</span>launchOptions
{
[FIRApp configure]; // &lt;--- add this
...
}
</code></pre>
<p><details>
<summary>Additional information in case of problems</summary></p>
<ul>
<li>If you have issues with duplicate symbols you will need to enable dead code stripping option in your Xcode (Target &gt; Build Settings &gt; search for &quot;Dead code stripping&quot;) <a href="https://github.com/firebase/quickstart-ios/issues/487#issuecomment-415313053">see here</a>.</li>
<li>If you are using <code>pod Firebase/Core</code> with a version set below 5.13 you might want to add <code>pod 'GoogleAppMeasurement', '~&gt; 5.3.0'</code> to your podfile
</details></li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="android"></a><a href="#android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android</h2>
<h3><a class="anchor" aria-hidden="true" id="modifying-buildgradle"></a><a href="#modifying-buildgradle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Modifying build.gradle</h3>
<p>Modify the following lines in <code>android/app/build.gradle</code>:</p>
<pre><code class="hljs css language-gradle">android {
...
defaultConfig {
...
missingDimensionStrategy <span class="hljs-string">'react-native-camera'</span>, <span class="hljs-string">'mlkit'</span> <span class="hljs-comment">// &lt;--- replace general with mlkit</span>
}
}
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="setting-up-firebase-1"></a><a href="#setting-up-firebase-1" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Setting up Firebase</h3>
<p>Using Firebase MLKit requires seting up Firebase project for your app. If you have not already added Firebase to your app, please follow the steps described in <a href="https://firebase.google.com/docs/android/setup">getting started guide</a>.
In short, you would need to</p>
<ol>
<li>Register your app in Firebase console.</li>
<li>Download google-services.json and place it in <code>android/app/</code></li>
<li>Add the folowing to project level <code>build.gradle</code>:</li>
</ol>
<pre><code class="hljs css language-gradle"><span class="hljs-keyword">buildscript</span> {
<span class="hljs-keyword">dependencies</span> {
<span class="hljs-comment">// Add this line</span>
<span class="hljs-keyword">classpath</span> <span class="hljs-string">'com.google.gms:google-services:4.0.1'</span> <span class="hljs-comment">// &lt;--- you might want to use different version</span>
}
}
</code></pre>
<ol start="4">
<li>add to the bottom of <code>android/app/build.gradle</code> file</li>
</ol>
<pre><code class="hljs css language-gradle">apply plugin: <span class="hljs-string">'com.google.gms.google-services'</span>
</code></pre>
<ol start="5">
<li>Configure your app to automatically download the ML model to the device after your app is installed from the Play Store. If you do not enable install-time model downloads, the model will be downloaded the first time you run the on-device detector. Requests you make before the download has completed will produce no results.</li>
</ol>
<pre><code class="hljs css language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">application</span> <span class="hljs-attr">...</span>&gt;</span>
...
<span class="hljs-tag">&lt;<span class="hljs-name">meta-data</span>
<span class="hljs-attr">android:name</span>=<span class="hljs-string">"com.google.firebase.ml.vision.DEPENDENCIES"</span>
<span class="hljs-attr">android:value</span>=<span class="hljs-string">"ocr, face"</span> /&gt;</span> <span class="hljs-comment">&lt;!-- choose models that you will use --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">application</span>&gt;</span>
</code></pre>
<p><details>
<summary>Additional information in case of problems</summary>
The current Android library defaults to the below values for the Google SDK and Libraries,</p>
<pre><code class="hljs css language-gradle"><span class="hljs-keyword">def</span> DEFAULT_COMPILE_SDK_VERSION = <span class="hljs-number">26</span>
<span class="hljs-keyword">def</span> DEFAULT_BUILD_TOOLS_VERSION = <span class="hljs-string">"26.0.2"</span>
<span class="hljs-keyword">def</span> DEFAULT_TARGET_SDK_VERSION = <span class="hljs-number">26</span>
<span class="hljs-keyword">def</span> DEFAULT_GOOGLE_PLAY_SERVICES_VERSION = <span class="hljs-string">"12.0.1"</span>
<span class="hljs-keyword">def</span> DEFAULT_SUPPORT_LIBRARY_VERSION = <span class="hljs-string">"27.1.0"</span>
</code></pre>
<p>You can override this settings by adding a Project-wide gradle configuration properties for
use by all modules in your ReactNative project by adding the below to <code>android/build.gradle</code>
file,</p>
<pre><code class="hljs css language-gradle"><span class="hljs-keyword">buildscript</span> {...}
<span class="hljs-keyword">allprojects</span> {...}
<span class="hljs-comment">/**
* Project-wide gradle configuration properties for use by all modules
*/</span>
ext {
compileSdkVersion = <span class="hljs-number">26</span>
targetSdkVersion = <span class="hljs-number">26</span>
buildToolsVersion = <span class="hljs-string">"26.0.2"</span>
googlePlayServicesVersion = <span class="hljs-string">"12.0.1"</span>
googlePlayServicesVisionVersion = <span class="hljs-string">"15.0.2"</span>
supportLibVersion = <span class="hljs-string">"27.1.0"</span>
}
</code></pre>
<p>The above settings in the ReactNative project over-rides the values present in the <code>react-native-camera</code>
module. For your reference below is the <code>android/build.gradle</code> file of the module.</p>
<pre><code class="hljs css language-gradle"><span class="hljs-keyword">def</span> safeExtGet(prop, fallback) {
rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
}
<span class="hljs-keyword">buildscript</span> {
<span class="hljs-keyword">repositories</span> {
google()
maven {
url <span class="hljs-string">'https://maven.google.com'</span>
}
jcenter()
}
<span class="hljs-keyword">dependencies</span> {
<span class="hljs-keyword">classpath</span> <span class="hljs-string">'com.android.tools.build:gradle:3.3.1'</span>
}
}
apply plugin: <span class="hljs-string">'com.android.library'</span>
android {
compileSdkVersion safeExtGet(<span class="hljs-string">'compileSdkVersion'</span>, <span class="hljs-number">28</span>)
buildToolsVersion safeExtGet(<span class="hljs-string">'buildToolsVersion'</span>, <span class="hljs-string">'28.0.3'</span>)
defaultConfig {
minSdkVersion safeExtGet(<span class="hljs-string">'minSdkVersion'</span>, <span class="hljs-number">16</span>)
targetSdkVersion safeExtGet(<span class="hljs-string">'targetSdkVersion'</span>, <span class="hljs-number">28</span>)
}
flavorDimensions <span class="hljs-string">"react-native-camera"</span>
productFlavors {
general {
dimension <span class="hljs-string">"react-native-camera"</span>
}
mlkit {
dimension <span class="hljs-string">"react-native-camera"</span>
}
}
<span class="hljs-keyword">sourceSets</span> {
main {
java.srcDirs = [<span class="hljs-string">'src/main/java'</span>]
}
general {
java.srcDirs = [<span class="hljs-string">'src/general/java'</span>]
}
mlkit {
java.srcDirs = [<span class="hljs-string">'src/mlkit/java'</span>]
}
}
lintOptions {
abortOnError <span class="hljs-keyword">false</span>
warning <span class="hljs-string">'InvalidPackage'</span>
}
}
<span class="hljs-keyword">repositories</span> {
google()
jcenter()
maven {
url <span class="hljs-string">'https://maven.google.com'</span>
}
maven { url <span class="hljs-string">"https://jitpack.io"</span> }
maven {
<span class="hljs-comment">// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm</span>
url <span class="hljs-string">"$rootDir/../node_modules/react-native/android"</span>
}
}
<span class="hljs-keyword">dependencies</span> {
<span class="hljs-keyword">def</span> googlePlayServicesVisionVersion = safeExtGet(<span class="hljs-string">'googlePlayServicesVisionVersion'</span>, safeExtGet(<span class="hljs-string">'googlePlayServicesVersion'</span>, <span class="hljs-string">'17.0.2'</span>))
implementation <span class="hljs-string">'com.facebook.react:react-native:+'</span>
implementation <span class="hljs-string">"com.google.zxing:core:3.3.3"</span>
implementation <span class="hljs-string">"com.drewnoakes:metadata-extractor:2.11.0"</span>
generalImplementation <span class="hljs-string">"com.google.android.gms:play-services-vision:$googlePlayServicesVisionVersion"</span>
implementation <span class="hljs-string">"com.android.support:exifinterface:${safeExtGet('supportLibVersion', '28.0.0')}"</span>
implementation <span class="hljs-string">"com.android.support:support-annotations:${safeExtGet('supportLibVersion', '28.0.0')}"</span>
implementation <span class="hljs-string">"com.android.support:support-v4:${safeExtGet('supportLibVersion', '28.0.0')}"</span>
mlkitImplementation <span class="hljs-string">"com.google.firebase:firebase-ml-vision:${safeExtGet('firebase-ml-vision', '19.0.3')}"</span>
mlkitImplementation <span class="hljs-string">"com.google.firebase:firebase-ml-vision-face-model:${safeExtGet('firebase-ml-vision-face-model', '17.0.2')}"</span>
}
</code></pre>
<p>If you are using a version of <code>googlePlayServicesVersion</code> that does not have <code>play-services-vision</code>, you can specify a different version of <code>play-services-vision</code> by adding <code>googlePlayServicesVisionVersion</code> to the project-wide properties</p>
<pre><code class="hljs css language-gradle">ext {
compileSdkVersion = <span class="hljs-number">26</span>
targetSdkVersion = <span class="hljs-number">26</span>
buildToolsVersion = <span class="hljs-string">"26.0.2"</span>
googlePlayServicesVersion = <span class="hljs-string">"16.0.1"</span>
googlePlayServicesVisionVersion = <span class="hljs-string">"15.0.2"</span>
supportLibVersion = <span class="hljs-string">"27.1.0"</span>
}
</code></pre>
<p></details></p>
<h1><a class="anchor" aria-hidden="true" id="windows"></a><a href="#windows" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Windows</h1>
<h2><a class="anchor" aria-hidden="true" id="windows-rnw-c-winrt-details"></a><a href="#windows-rnw-c-winrt-details" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Windows RNW C++/WinRT details</h2>
<ol>
<li><code>yarn install react-native-camera</code></li>
<li>Link the library as described below:
windows/myapp.sln
Add the ReactNativeCamera project to your solution.
Open the solution in Visual Studio 2019
Right-click Solution icon in Solution Explorer &gt; Add &gt; Existing Project Select node_modules\react-native-camera\windows\ReactNativeCameraCPP\ReactNativeCameraCPP.vcxproj
windows/myapp/myapp.vcxproj
Add a reference to ReactNativeCameraCPP to your main application project. From Visual Studio 2019:
Right-click main application project &gt; Add &gt; Reference... Check ReactNativeCameraCPP from Solution Projects.</li>
<li>Modify files below to add the Camera package providers to your main application project
pch.h
Add #include &quot;winrt/ReactNativeCameraCPP.h&quot;.
app.cpp
Add PackageProviders().Append(winrt::ReactNativeCameraCPP::ReactPackageProvider()); before InitializeComponent();</li>
<li>Add the capabilities (permissions) for the webcam and microphone as described here: <a href="https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/simple-camera-preview-access#add-capability-declarations-to-the-app-manifest">docs.microsoft / audio-video-camera</a></li>
</ol>
<p>Follow the <a href="/react-native-camera/docs/qa">Q &amp; A</a> section if you are having compilation issues.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 3/3/2020 by Di Da</em></div><div class="docs-prevnext"><a class="docs-next button" href="/react-native-camera/docs/contributing"><span>Contributing</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#mostly-automatic-install-with-autolinking-rn-060">Mostly automatic install with autolinking (RN &gt; 0.60)</a></li><li><a href="#mostly-automatic-install-with-react-native-link-rn-060">Mostly automatic install with react-native link (RN &lt; 0.60)</a></li><li><a href="#manual-install-ios-not-recommended">Manual install - iOS (not recommended)</a></li><li><a href="#manual-install-android-not-recommended">Manual install - Android (not recommended)</a></li><li><a href="#ios-other-required-steps">iOS - other required steps</a></li><li><a href="#android-other-required-steps">Android - other required steps</a></li><li><a href="#ios">iOS</a><ul class="toc-headings"><li><a href="#modifying-podfile">Modifying Podfile</a></li><li><a href="#setting-up-firebase">Setting up Firebase</a></li></ul></li><li><a href="#android">Android</a><ul class="toc-headings"><li><a href="#modifying-buildgradle">Modifying build.gradle</a></li><li><a href="#setting-up-firebase-1">Setting up Firebase</a></li></ul></li><li><a href="#windows-rnw-c-winrt-details">Windows RNW C++/WinRT details</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native-camera/" class="nav-home"><img src="/react-native-camera/img/community.png" alt="React Native Camera" width="66" height="58"/></a><div><h5>Docs</h5><a href="/react-native-camera/docs/en/installation.html">Getting Started</a><a href="/react-native-camera/docs/en/expo_usage.html">Guides</a><a href="/react-native-camera/docs/en/api.html">API Reference</a></div><div><h5>Community</h5><a href="/react-native-camera/en/users.html">User Showcase</a><a href="https://stackoverflow.com/questions/tagged/react-native-camera" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/">Project Chat</a></div><div><h5>More</h5><a href="https://github.com/react-native-community/react-native-camera">GitHub</a><a class="github-button" href="https://github.com/react-native-community/react-native-camera" data-icon="octicon-star" data-count-href="/facebook/docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Stars</a></div></section><a href="https://opensource.facebook.com/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/react-native-camera/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020</section></footer></div></body></html>
Reference in New Issue View Git Blame Copy Permalink