Implement Google Vision in React Native apps
Tags: reactnative, googlecloud, googlevision, imagedetection
Published: 2020-03-28 11:09:10

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="689c" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="b598" class="graf graf--p graf-after--figure">In this tutorial you will get know how can we integrate Google Vision API in our React Native application and get responses on text and image recognition. The app supports various features including but not limited to Object Detection, Labeling Images, Text Recognition, Face Detection using Google Vision API.</p><blockquote name="a722" class="graf graf--blockquote graf-after--p"><a href="https://github.com/mdshadman/ReactNativeGoogleVision"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial can be found at<em class="markup--em markup--blockquote-em"> </em>ReactNativeGoogleVision</strong></a></blockquote><p name="3686" class="graf graf--p graf-after--blockquote is-selected">In this tutorial we will focus on some basic and major parts where many expert developers or juvenile beginners gets confused. Hence we will check each and every things in step-by-step as: —</p><ol class="postList"><li name="1c00" class="graf graf--li graf-after--p">What and why React Native</li><li name="b1c2" class="graf graf--li graf-after--li">What and why Google Vision API</li><li name="32dd" class="graf graf--li graf-after--li">How to create react native app</li><li name="77cc" class="graf graf--li graf-after--li">How to get google vision API key</li><li name="8328" class="graf graf--li graf-after--li">Implementation and setup</li><li name="f408" class="graf graf--li graf-after--li">Working example</li></ol><h4 name="4729" class="graf graf--h4 graf-after--li"><strong class="markup--strong markup--h4-strong">Step 1:&#8202;—&#8202;</strong>What and why React Native&nbsp;?</h4><p name="452d" class="graf graf--p graf-after--h4">React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="5626" class="graf graf--p graf-after--p">Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, <em class="markup--em markup--p-em">not</em> webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.</p><p name="de54" class="graf graf--p graf-after--p">React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover firebase phone authentication and CRUD operations. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some anecdota: <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Palantir</a>, and <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TaskRabbit</a> are already using it in production for user-facing applications.<br>&nbsp;The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.</p><p name="f6cd" class="graf graf--p graf-after--p">Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using webviews. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.</p><h4 name="dc68" class="graf graf--h4 graf-after--p">Step 2:&#8202;—&#8202;What and why Google Vision API&nbsp;?</h4><p name="8761" class="graf graf--p graf-after--h4">Google Vision API is also known as Cloud Vision API.</p><p name="27fc" class="graf graf--p graf-after--p">Cloud Vision API allows developers to easily integrate vision detection features including image labeling, face, and landmark detection, optical character recognition (OCR), and tagging of explicit content, within applications.<br>Cloud Vision API offers us the following features to be applied on the images as follow: —</p><pre name="1090" class="graf graf--pre graf-after--p">features: [</pre><pre name="5a13" class="graf graf--pre graf-after--pre">{ type: "LABEL_DETECTION" },</pre><pre name="72e5" class="graf graf--pre graf-after--pre">{ type: "LANDMARK_DETECTION" },</pre><pre name="464f" class="graf graf--pre graf-after--pre">{ type: "FACE_DETECTION" },</pre><pre name="6b93" class="graf graf--pre graf-after--pre">{ type: "LOGO_DETECTION" },</pre><pre name="117d" class="graf graf--pre graf-after--pre">{ type: "TEXT_DETECTION" },</pre><pre name="4ed3" class="graf graf--pre graf-after--pre">{ type: "DOCUMENT_TEXT_DETECTION" },</pre><pre name="0879" class="graf graf--pre graf-after--pre">{ type: "SAFE_SEARCH_DETECTION" },</pre><pre name="b41a" class="graf graf--pre graf-after--pre">{ type: "IMAGE_PROPERTIES" },</pre><pre name="d709" class="graf graf--pre graf-after--pre">{ type: "CROP_HINTS" },</pre><pre name="ed34" class="graf graf--pre graf-after--pre">{ type: "WEB_DETECTION" }</pre><pre name="6ae2" class="graf graf--pre graf-after--pre">],</pre><p name="402a" class="graf graf--p graf-after--pre">For more information about Google Vision API, go to its official documentation <a href="https://cloud.google.com/vision/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">here</em></strong></a>.</p><h4 name="a4f1" class="graf graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Brief History of Machine&nbsp;Learning</strong></h4><p name="9283" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Arthur Samuel</strong>, a pioneer in the field of artificial intelligence and computer gaming, coined the term <strong class="markup--strong markup--p-strong">“Machine Learning”</strong>. He defined machine learning as&#8202;—&#8202;<strong class="markup--strong markup--p-strong">“Field of study that gives computers the capability to learn without being explicitly programmed”</strong>.<br>In a very layman manner, Machine Learning(ML) can be explained as automating and improving the learning process of computers based on their experiences without being actually programmed i.e. without any human assistance. The process starts with feeding good quality data and then training our machines(computers) by building machine learning models using the data and different algorithms.</p><p name="50e5" class="graf graf--p graf-after--p">ML is one of the most impressive technologies that one would have ever come across.</p><h4 name="3702" class="graf graf--h4 graf-after--p">Step 3:&#8202;—&#8202;How to create react native app&nbsp;?</h4><p name="bbb5" class="graf graf--p graf-after--h4">Now till here, i expect all of you have created your own react-native projects.<br>Google Cloud’s Vision API offers robust pre-trained machine learning models through REST and RPC APIs. It assigns labels to images and quickly classifies them into millions of predefined classes or categories. It can detect objects and faces, read the printed or handwritten text, and build valuable metadata into your image catalog.</p><h4 name="2837" class="graf graf--h4 graf-after--p">Step 4: —How to get google vision API key&nbsp;?</h4><p name="9fdc" class="graf graf--p graf-after--h4">Google Cloud’s Vision API offers robust pre-trained machine learning models through REST and RPC APIs. It assigns labels to images and quickly classifies them into millions of predefined classes or categories. It can detect objects and faces, read the printed or handwritten text, and build valuable metadata into your image catalog.</p><p name="8569" class="graf graf--p graf-after--p">For implementing Google Vision in your react-native app, you can visit the given <a href="https://cloud.google.com/vision/docs/quickstart-client-libraries#client-libraries-install-nodejs"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">link</a> or, follow certain steps:</p><ol class="postList"><li name="a7cf" class="graf graf--li graf-after--p"><a href="https://accounts.google.com/Login"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Sign in</a> to your Google Account.</li><li name="ce1b" class="graf graf--li graf-after--li">Select or Create a <a href="https://console.cloud.google.com/cloud-resource-manager?_ga=2.158392121.-227962472.1559537135"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Cloud Platform Project</a>.<br>Please make sure that billing is enabled for your Google Cloud Platform project. To enable billing, follow the procedure provided in the given <a href="https://cloud.google.com/billing/docs/how-to/modify-project"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">link</a>.<br><strong class="markup--strong markup--li-strong">N.B.:</strong> You will not be able to get any response from API until you enable the billing.</li><li name="6c48" class="graf graf--li graf-after--li">To Enable the Cloud Vision API.<br>→ First, <a href="https://console.cloud.google.com/flows/enableapi?apiid=vision-json.googleapis.com%2526_ga=2.128126991.-227962472.1559537135"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">select</a> a project.<br>→ After selecting the project, click on “Go to API’s overview” button.<br>→ Click on “Enable API and Services”,<br>→ Search for Cloud Vision API.<br>→ Click on the enable button.<br>→ To use this API, click on Create Credentials.<br>→ Choose the Cloud Vision API from the list.<br>→ Click on “Yes I’m using one or both” and proceed further.<br>→ Click on the Done button.<br>→ Click on “Create Credentials”.<br>→ Click “API key” from options.<br>→ Copy the API key popped up and save it at a safer place. It should not be made public.<br>→ Click the close button.</li></ol><p name="66f3" class="graf graf--p graf-after--li">Congrats Your API key has been generated.</p><p name="a8e1" class="graf graf--p graf-after--p">Now you are all set to start with google vision but before wo start coding let us integrate the most important thing for this application and that is the Camera on, so we will use react-native-camera npm package to take pictures and send those to the Google Vision API for responses,<br>Here I would like to inform you that the react-native-camera npm package has some bugs so you would need to install this package from the master branch.</p><p name="a06b" class="graf graf--p graf-after--p">Execute the command below to integrate camera in your application: —</p><pre name="0aac" class="graf graf--pre graf-after--p">yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git</pre><p name="c358" class="graf graf--p graf-after--pre"><a href="https://github.com/react-native-community/react-native-camera"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">You can get help from here if you get any common issues while integrating it.</em></strong></a></p><h4 name="6c1b" class="graf graf--h4 graf-after--p">Step 5:&#8202;—&#8202;Implementation and&nbsp;setup</h4><p name="2577" class="graf graf--p graf-after--h4">We are now totally set to do some magic with image and google vision API&nbsp;, So let set go for the magic to happen…</p><p name="9d09" class="graf graf--p graf-after--p">First of all let us make some cool UI for opening the camera and showing the result.</p><p name="d0c3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Code View: —</strong></p><figure tabindex="0" contenteditable="false" name="d922" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/85410ee520ca6dceceb4416636911dc7.js %}</div></div></figure><p name="7798" class="graf graf--p graf-after--figure">Result: —</p><figure tabindex="0" contenteditable="false" name="84e4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*v7NHTFCaky5fZEHnQlzIsA.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*v7NHTFCaky5fZEHnQlzIsA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Click on scan button to open&nbsp;camera</figcaption></figure><figure tabindex="0" contenteditable="false" name="f4d4" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*9L60TgxoKdBEbPCA9lwLfw.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*9L60TgxoKdBEbPCA9lwLfw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Camera on&nbsp;mode</figcaption></figure><figure tabindex="0" contenteditable="false" name="dcd0" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*SrdmYekkKZeudXhqWbDlqA.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*SrdmYekkKZeudXhqWbDlqA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Loading response</figcaption></figure><p name="0e65" class="graf graf--p graf-after--figure">logicView: —</p><figure tabindex="0" contenteditable="false" name="a973" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/e83f53f1ea97eaaad2eb5f271207f21c.js %}</div></div></figure><p name="cf6d" class="graf graf--p graf-after--figure">Result: —</p><figure tabindex="0" contenteditable="false" name="c733" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 363px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.29999999999998%;"></div><img class="graf-image" data-image-id="1*Kzn9ZqR44lC3dV6Una9pZw.jpeg" data-width="363" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*Kzn9ZqR44lC3dV6Una9pZw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Google Vision responses</figcaption></figure><p name="20a5" class="graf graf--p graf-after--figure">Here, we have used react-native fetch method to call the API using POST method and receive the response with that.</p><p name="a530" class="graf graf--p graf-after--p">In the code above you have <strong class="markup--strong markup--p-strong">“config.googleCloud.api + config.googleCloud.apiKey” </strong>which will be google cloud api and another is your api which you get after creating account and activating Google Vision Api in google console.</p><p name="45b8" class="graf graf--p graf-after--p">In the above images i have only printed webEntities responses but you can pass the features in the body and get the required responses.</p><blockquote name="1a9f" class="graf graf--blockquote graf-after--p"><a href="https://github.com/mdshadman/ReactNativeGoogleVision"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial can be found at<em class="markup--em markup--blockquote-em"> </em>ReactNativeGoogleVision</strong></a><strong class="markup--strong markup--blockquote-strong">&nbsp;.</strong></blockquote><h3 name="ee88" class="graf graf--h3 graf-after--blockquote">Conclusion</h3><p name="168a" class="graf graf--p graf-after--h3">In this blog, you learnt how to implement Google Vision API in React Native apps for Android. You also learnt how to integrate react-native-camera in react-native application. We also built the app in Android and ran on a device.</p><blockquote name="862a" class="graf graf--blockquote graf-after--p"><a href="https://github.com/mdshadman/ReactNativeGoogleVision"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial can be found at<em class="markup--em markup--blockquote-em"> </em>ReactNativeGoogleVision</strong></a><strong class="markup--strong markup--blockquote-strong">&nbsp;.</strong></blockquote><h3 name="d1b2" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="0993" class="graf graf--p graf-after--h3">Now that you have learnt about setting up to implement Google Vision API in React Native apps for Android, here are some other topics you can look into</p><ul class="postList"><li name="6f8d" class="graf graf--li graf-after--p">Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Integrate Firebase</a> | <a href="https://enappd.com/blog/firebase-analytics-in-react-native-app/101"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Analytics</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Push notifications</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Firebase CRUD</a></li><li name="ce44" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/geolocation-geocoding-react-native-apps/84"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Life cycle hooks</a> | <a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Redux implementation</a> | <a href="https://enappd.com/blog/how-to-make-api-calls-in-react-native-apps/125"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Make API calls</a> | <a href="https://enappd.com/blog/navigations-in-react-native-app/124"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Navigation</a> | <a href="https://enappd.com/blog/how-to-translate-in-react-native-app-globalization-internationalization-and-text-to-speech/120"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translation</a> | <a href="https://enappd.com/blog/react-native-qr-code-scanning-using-react-native-camera/117"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Barcode &amp; QR code scan</a> | <a href="https://enappd.com/blog/send-read-and-delete-sms-in-react-native/107"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Send &amp; Read SMS</a> | <a href="https://enappd.com/blog/google-vision-with-react-native/96"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Vision</a></li><li name="e480" class="graf graf--li graf-after--li">Payments&#8202;—&#8202;<a href="https://enappd.com/blog/implement-apple-pay-in-react-native-apps/93"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/stripe-integration-in-react-native-apps-using-firebase/108"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe payments</a></li><li name="4d3b" class="graf graf--li graf-after--li">Authentication&#8202;—&#8202;<a href="https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Google Login</a>| <a href="https://enappd.com/blog/facebook-login-in-react-native-apps/89"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Facebook login</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Phone Auth</a> | <a href="https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login</a> | <a href="https://enappd.com/blog/anonymous-login-in-react-native-apps-with-firebase/129"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous Login</a></li><li name="2ccd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Instagram / Whatsapp Story Feature in React Native</a></li><li name="01c3" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">React Native life cycle hooks</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Implement Redux</a> | <a href="https://enappd.com/blog/async-actions-with-redux-thunk-middleware-in-react-native-apps-1/100"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Async actions with Redux</a></li><li name="8db9" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><p name="28d0" class="graf graf--p graf-after--li">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://store.enappd.com/product/react-native-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="e4d4" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*sWyEeAfCMk7ULOkLUCdSug.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*sWyEeAfCMk7ULOkLUCdSug.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="e1ca" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>