Video details

Using React Hooks + Capacitor to Access Native Mobile APIs – Thomas Vidas, React Summit 2022

React
06.23.2022
English

React Summit 2022 #ReactSummit #GitNation Website – https://reactsummit.com/
Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/reactsummit-2022
Talk: Using React Hooks + Capacitor to Access Native Mobile APIs Using Capacitor, you can easily create native mobile iOS and Android applications using all of the React web tools you know and love. But how do we access the native APIs? With the @capacitor-community/react-hooks package, we can quickly and easily access native device APIs, like Camera, Filesystem, and Geolocation, using React Hooks!
This event would not take place without the support of sponsors:
🏆 Platinum Sponsors Ag Grid → https://www.ag-grid.com/ Toptal → https://www.toptal.com/freelance-jobs Rangle.io → https://rangle.io/
WPEngine → https://wpengine.com/ Vodafone → https://careers.vodafone.com/
🥇 Gold Sponsors StackHawk → https://www.stackhawk.com/ Bitvavo → https://bitvavo.com/ Ionic → https://ionic.io/ JetBrains → https://www.jetbrains.com/webstorm/ Kontent by Kentico → https://kontent.ai/ Decentology → https://www.decentology.com/ Xata → https://xata.io/ Docker → https://www.docker.com/ Shopify → https://www.shopify.com/careers Wix Engineering → https://wix.com NearForm → https://www.nearform.com/ Focus Reactive → https://focusreactive.com/ Sanity → https://www.sanity.io/ Snyk → https://snyk.io/ Contentful → https://www.contentful.com/ Nx → https://nx.dev/
🥈 Silver Sponsors Firebase → https://firebase.google.com/ Callstack → https://www.callstack.com/ Mercari → https://about.mercari.com/en/ vpTech/ → https://careers.veepee.com/en/vptech-2/ NativeBase → https://nativebase.io/ Stream → https://getstream.io/ SiteGround → https://www.siteground.com/ Yoast → https://yoast.com/ Novermber Five → https://www.novemberfive.co/ Twilio → https://www.twilio.com/ahoy BCGDV → https://bcgdv.com/ Fullscript → https://fullscript.com/ Utopia Music → https://utopiamusic.com/ SISU → https://www.sisu.tools/

Transcript

Hello. My name is Thomas Vetus and I'm the Capacitor Developer experience Engineer working at Ionic. Today I'm going to be going over how you can use React Hooks and Capacitor together to access this native mobile API. So first of all, you might be thinking, what the heck of Capacitor? I've never heard of this before. Don't worry. Capacitor is a tool built by Ionic that allows you to take your web application and compile it down to a native iOS project, a native Android project. It's open source MIT license. You can think of it kind of like react native or think of it like Flutter. The big difference is we're taking your HTML, your CSS, your JavaScript and putting it in iOS or Android project. If it works on the web, it'll work with Capacitor. Very powerful. Capacitor comes with a set of plugins so you can access stuff like the storage, the file system, the device information, or in this example, the camera. We also provide an API so you can communicate via our JavaScript bridge, so you can do stuff on the web, call our bridge and that will do stuff on native. It's pretty straightforward. We have tons of documents on how to build your own plugins as well as a huge community of existing plugins out there. Using a competitor plugin is pretty straightforward. So let's go over how to use the camera plugin. We import our camera from the Capacitor camera package. We have a camera object in this result type. Result type just tells us this is a Uri basis before things like that. So let's take a look at our camera object. A camera has a function object called Get Photo. Get photo allows us to take a new photo or to access our gallery via single function call. And that allows us to set the quality or if we want to open editing in the native editor. This is something we can't do in the web or on a PWA. So it's a very powerful tool to open the native and make it feel really native. So let's hop on back to the code camera. Get photo returns an image and from there we look up the HTML image element, like an image tag, and we set that image HTML element we set up to the image data we selected from the gallery. This works great in any React app or any web app, but this might not feel very reactive or very hooky if you're using hooks really heavily in your project. So we have a great community, our capacity or community GitHub organization that's built React Hooks package. The React Hooks wraps all of our official plugins. So the ones I mentioned before, the storage, the file system, in this case the camera, it makes them feel right at home and you react application of heavily using Hooks. Let's take a look at the React Hooks camera Plugin API. We have used Callback, which is a native react Hook and we have used Camera which is our capacity community camera React Hook and we have our results type that we had before from our Capacitor camera package. We call our Use Camera Hook to get our photo which is our photo object in our Get Photo, which calls that Camera Get Photo function I was showing in the other example, you can think of this most similar to like Use state where we have our state and then our set state. We have this Trigger Camera function which calls you callback called our Camera Get Photo. With the quality, with the allow editing and what we want, the results have to be feels much more at home and a React Hook heavy application. Let's go on over to a demo I've prepared. So, there's two big components here we have our app, which is just our big app TSX that most applications have. We have this other custom component called our Camera Hook button which hop on over there. And this is just a component that has a div that conditionally renders our image. If we selected a photo and a button that we can click that would trigger our camera that says click Me, we'll hop on over to the goodies we have in our slides example, we have photo and Get Photo which calls which is called our Use Camera Hook. Then from there we have Trigger Camera which calls our Use Callback Hook which calls the you can think of this like camera gift photo, getting this from a hook to Get Photo 100% quality. We don't want to open the native editor with our result type as a data URL. So once we trigger a camera so we put this button, we selected something that will set this photo to a value which will then conditionally render this image tag. So let's go ahead and see this in action. I've gone ahead and already compiled the iOS application and I put it on the iOS simulator. This is running the iOS simulator. It comes bundled with Xcode. You can get for free on any Mac app provides it. It's super great for texting, even just your web application to see what it looks like on iOS. So we have our Hello React Summit application. This is a native application. So right here, React Summit says Hello React Summit and click Me button from what we have right here, click Me. Let's go ahead and click it. So we hit the Trigger Camera Use Callback select from our photos and we'll pick the beautiful waterfall. And from there, TADA, we have this waterfall. It's super great. This code feels much more at home. I love React hooks. It feels much more at home. With writing a lot of the other code we could send this other. So when we first loaded, it will automatically trigger something, opens up a new date so we can select multiple photos. It's really powerful and it feels right at home with any other React code. So I'm going to hop on and plug our GitHub comfasthercommunity. This is maintained by Ionic, but all of these developers and all these plugins are maintained by our great Ionic community. We have some great Azure plugins stuff like Stripe, stuff like our React Hooks plugin, native audio or native video players, native http. It's really powerful. Go ahead and check it out. If you have a React web application that you want to make an Android and iOS application for. Again, I'm Thomas Vehicle, and thank you so much for staying for my life. Talk and I'll be in the chat if you guys have any questions. Thanks.