Using React Hooks + Capacitor to Access Native Mobile APIs

Rate this content
Bookmark

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!

7 min
21 Jun, 2022

Comments

Sign in or register to post your comment.

AI Generated Video Summary

Capacitor is a powerful tool built by Ionic that allows web applications to be compiled into native iOS and Android projects. It comes with a set of plugins, including the camera plugin, and has a React hooks package for seamless integration with React applications. The Talk includes a demo showcasing the camera hook button and the rendering of selected photos. The presenter emphasizes the use of useEffect and useState for additional functionality. The Talk concludes with a mention of the Capacitor community and gratitude for attending.

1. Introduction to Capacitor and React Hooks

Short description:

Hello, my name is Thomas Vietas and I'm a Capacitor Developer Experience Engineer working at Ionic. Capacitor is a tool built by Ionic that allows you to take your web applications and compile it down to a native iOS project or a native Android project. It's very powerful and comes with a set of plug-ins, including the camera plug-in. We also have a React hooks package that wraps all the official plugins, making them feel right at home in your React application.

Hello, my name is Thomas Vietas and I'm a Capacitor Developer Experience Engineer working at Ionic and today I'm going to be going over how you can use React hooks and Capacitor together to access native mobile APIs.

So first of all, you might be thinking, what the heck is Capacitor? I've never heard of this before. Ahh! Don't worry. Capacitor is a tool built by Ionic that allows you to take your web applications and compile it down to a native iOS project or a native Android project. It's open source, it's MIT licensed. 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 an iOS or Android project. If it works on the web, it'll work with Capacitor.

It's very powerful. Capacitor comes with a set of plug-ins, 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'll do stuff on native. It's pretty straightforward and we have tons of docs on how to build your own plug-ins as well as a huge community of existing plug-ins out there.

Using the Capacitor plug-in is pretty straightforward, so let's go over how to use the camera plug-in. We import our camera from the Capacitor camera package, and we have a camera object in this result type, which just the result type just tells us is this a URI, is this Base64, things like that. Let's take a look at our camera object. A camera has a function object called getphoto. Getphoto allows us to take a new photo or to access our gallery via a 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 editor and make it feel really native. So let's hop on back to the codes. So camera.getphoto returns an image, and from there, we look up the HTML image element, like an image tag, and we set that image HTML element to the image data we've selected from the gallery. This works great in any react app or any web app, but this might not feel very Reacty or very hooky if you're using hooks really heavily in your project.

So we have a great community, our capacity of community GitHub organization, that's built a 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, and it makes them feel right at home in your React application that's heavily using hooks. So let's take a look at the React hooks camera plugin API. We have use callback, which is a native React hook, and we have use camera, which is our capacity of community camera React hook. We have our result 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, and our get photo, which calls that camera dot 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. Then we have this trigger camera function, which calls use callback, calls our camera dot get photo with the allow editing and what we want the result type to be.

2. Demo of Capacitor and React Hooks

Short description:

Feels much more at home in a React hooks heavy application. Let's go on over to a demo I pre-prepared. We have our app and a custom component called our camera hook button. We trigger the camera and render the selected photo. I've compiled the iOS application and put it on the iOS simulator. We have our Hello React Summit application. Let's click the button and select a photo. We can set this up with use effect or use state for more functionality. Check out the github.com/capacitor community for more capacitor plugins. Thank you for staying for my Lightning Talk!

Feels much more at home in a React hooks heavy application. Let's go on over to a demo I pre-prepared. So there's two big components here. We have our app, which is just our big app dot TSX that most applications have. We have this other custom component called our camera hook button, which let's hop on over there. 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. Let's hop on over to the goodies. We have in our slides example, we have photo and get photo, which calls our use camera hook. And from there we have trigger camera, which calls our use callback hook, which calls the, you can think of this like camera.getphoto, but getting this from the hook. It's just get photo, it's a hundred percent quality. You don't want to open the native editor with our result type, that's a data URL. Once we've selected, once we trigger our camera, we've flipped this button, we've 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 this iOS simulator. This is running the iOS simulator. It comes bundled with xcode, you can get it for free on any Mac, Apple provides it, 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. It says, Hello React Summit, and this Click Me button, from what we have right here. Click me. So let's go ahead and click it, so we hit the trigger camera use callback hook. I'll select for more photos, and we'll pick this 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, this feels much more at home with writing a lot of the other code. We can set this up with use effect so when we first load it, it will automatically trigger something. Or we can set it up with use state 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.com slash capacitor community. This is maintained by Ionic, but all these developers and all these plugins are maintained by our great Ionic community. We have some great capacitor plugins, stuff like Integrate with Stripe. Stuff like a 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 Betus with Ionic, and thank you so much for staying for my Lightning Talk, and I'll be in the chat if you guys have any questions.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2023React Summit 2023
28 min
You Can’t Use Hooks Conditionally… or Can You?
It’s the hooks rule number one: “Only call hooks at the top level”.
But what if I told you that this rule does not apply to every hook? One of them can actually safely be used conditionally. 
To understand how useContext is different from other hooks, and why it is exempted from this major rule, we need to know why this rule exists in the first place. We will build our own mental model of react’s rendering behavior, focused on how react keeps track of data at runtime: props, states, refs… and context values.
React Advanced Conference 2021React Advanced Conference 2021
10 min
Efficient State Management With Hookstate
If you’ve worked with the React useState hook before, you might have wondered why global state management can’t be just as easy. Why do we still need so much boilerplate to manage state with the Context API? What if we don’t want to be constrained opinionated tools like Redux Toolkit or forced to use actions and reducers in our React applications? This is where Hookstate comes in. Hookstate is not just another state management solution. Apart from being feature-rich, fast, and flexible, the library takes the idea of simplifying state management in React apps to a whole new level. In this talk, I’ll introduce Hookstate as a simple and efficient state management solution for React applications.
React Summit 2022React Summit 2022
7 min
Don't Forget React Memo
React developers intrigue us with the so-called React Forget compiler [that’s supposed to inject useMemo and useCallback into code automatically]. However, we still can't figure out best practices for useCallback, useMemo, and React.memo when we write it on our own. The worst scenario is if we continue to put it everywhere without understanding. As a result, it can bring noticeable harm to the performance of our application. In this talk, on real-life use cases, you will see solutions to the problem of using hooks wrong or overusing them!
React Advanced Conference 2021React Advanced Conference 2021
27 min
Limitless App Development with Expo and React Native
App development is hard, React and Expo make it easy!It's never been simpler to build and deploy powerful mobile apps with incredible features to both Android and iOS users all over the world.We’ll discuss building and deploying mobile apps seamlessly from the cloud using EAS, creating powerful dev clients (like browsers but for mobile app development) for testing your app, pushing OTA updates instantly to users, and much more — no native experience required!
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
React Summit Remote Edition 2021React Summit Remote Edition 2021
7 min
We Don’t Know How React State Hooks Work
We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code.

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
GraphQL Galaxy 2022GraphQL Galaxy 2022
156 min
Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB
WorkshopFree
Bring the power of graphs to iOS mobile app development in this hands-on workshop. We will explore how to use the Neo4j GraphQL Library to build GraphQL APIs backed by Neo4j AuraDB and how to integrate GraphQL into an iOS app using SwiftUI and the Apollo iOS GraphQL library as we build a news reader mobile app.
Table of contents:- Intro to Neo4j AuraDB- Building GraphQL APIs with the Neo4j GraphQL Library- Intro to SwiftUI- SwiftUI + GraphQL
PrerequisitesTo follow along during the workshop attendees will need a Mac laptop with a recent version of Xcode installed. Some familiarity with Swift and iOS app development will be helpful, although not required.
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
WorkshopFree
So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more
React Summit 2022React Summit 2022
92 min
Bringing your React Web App to native with Capacitor
WorkshopFree
So, you have a killer React app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over:
What is CapacitorHow does it compare to other cross-platform solutionsUsing Capacitor to build a native application using your existing web codeTidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.