Make a React Hook out of your Native Module

Michał Chudziak
Feb 28, 2019 · 5 min read

If you like to stay up to date with the latest trends in web development (or you’re React Native geek like me 😅), you probably heard something about React Hooks. They leverage the ability to write functional components by providing an ability to use state or lifecycles without writing the class that is extending React.Component. If you want to learn more about them, make sure to read this article.

The idea behind hooks sounds excellent, and it should clean up a lot of boilerplate from our React codebases. It’s not different when we are speaking about React Native apps — they heavily depend on React and encapsulates its patterns as well.

If you are the early adopter and tried to use hooks in React Native application some time ago, you could get disappointed by the fact, that the newest releases of React Native don’t support this feature yet.

But lately, (as many other things in the universe) it has changed! The next release of React Native (0.59) supports React 16.8, and obviously hooks!

Functions like useState or useEffect are now in place, waiting for us to use them in our freshly written functional components. That’s great! But what if you want to write your custom hook? For example, you want to provide a cool way to consume your module in functional components. Be patient! You’ll learn that in the next few minutes. 👨‍🎓👩‍🎓

Let’s start with initializing the app. My app will be called NativeHookTester, but you can choose any name you want. 😁

react-native init NativeHooksTester --version react-native@next

NOTE: At the moment the next version is at 0.59.0-rc.2, but this tutorial should work with any RN ≥ 0.59

While using classes in your modern React apps are perfectly fine, and you shouldn’t invest much time into refactoring existing codebases to functional components using hooks, in our case, I’d like to do that to consume our hook. Let’s change the following lines:

into:

Not only that we turned our class into the function, but also we played a bit with rendered content. Now instead of a welcome message, we have a fancy <TextInput /> ! 🤑

NOTE: Remember to fix imports as well! If you wonder what’re the input styles: {width: 150, height: 30, backgroundColor: ‘white’, borderColor: ‘black’, borderWidth: 1} 😉

Custom hooks for native modules aren’t different from any other hooks. You can use the same pattern to encapsulate communication with some service, database or any other action. Since it’s not an article on writing native modules, I’ll use something that is available with React Native. I chose Clipboard API, but you can write your ow native module following these articles (iOS / Android).

Let’s start! 🚀 I created the file called useClipboard.js, I expect it to return the tuple that contains a value stored in the Clipboard, and a function to set the value in the Clipboard. It should look like this:

and our App() function should consume it in the following way:

So far, so good, we need to move further and import a NativeModule called Clipboard. If you take a closer look at what’s available under that module, you’ll see that it contains two methods that could potentially fit our needs. The first one is called getString() and the second one setString(). To consume them we could write code like this:

It looks good, but it won’t work… 😢I mean, technically it will, but not the way we want it to work. If we dig deeper into Clipboard code, we’ll discover that getString() function is async and we need an await statement to assign the value returned from promise to our contents variable.

But we don’t really want to make our hook an asynchronous function. We want to keep it as simple as possible, so ideally calling:

const [clipboardContents, setClipboardContents] = useClipboard();

in App() function body should do the job. To achieve that we’ll need some state inside our hook. Guess what — we can use the state hook inside our hook! 🤯

Consider the following code:

Looks good, hmm? Now we can set value from our input to the clipboard. After that, we should be able to read its value from the state.

But it’s not exactly what we want to do. As you can see after we refresh the app, we are not able to look at the contents of the clipboard. That’s because we are not precisely reading it. It sounds like it’s the time to deal with async stuff!

It turns out that our savior, in this case, will be no different. Asynchronous communication is some side effect, and yet another great hook will save us from oppression. This time we’ll use useEffect! 🛰

Currently clipboardContents is correctly filled with the data from Clipboard! 🎉

That’s it! If you want to see whole code, please check out this repo.

For more React & React Native content follow me on Medium, Twitter and Github. 🕺

Thanks, Mike!

Callstack Engineers

We are React Native community-trusted, extremely skilled…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store