We live in the world with a vast array of mobile devices, primarily dominated by two platforms: iOS and Android. It’s a two-horse race, and I’m sure we can all agree on that. Building a mobile application for both platforms is not an easy task, though.

For iOS, you write code using Objective-C or Swift, and for Android, you will find yourself using Java or Kotlin. Apart from different programming languages used to create an app that can run on each of the two platforms, the toolchains are entirely different.

Many modern-day developers use a specific tech stack to build web applications: HTML, CSS, and JavaScript. Different frameworks fall under the category commonly known as hybrid frameworks. As such, you can use (almost) one set of source code for developing apps for both iOS and Android platforms.

In recent years, hybrid frameworks have evolved from using web views to use native APIs. The cross-platform approach for developing a mobile application comes with its own pros and cons.

One great option that falls under the umbrella of cross-platform development is React Native. It was developed and used by Facebook, and many others use it as well, including Tesla, Walmart, Uber Eats, Instagram, Discord, Wix, and more. React Native is based on Facebook’s web library ReactJS.

What is this tutorial is about?

React Hooks have been available since the release of React version 16.8.x . In this tutorial, you’re going to receive a quick introduction on how to use them in a React Native app.

These functions allow using React state and a component’s lifecycle methods in a functional component. If you’re familiar with React, you know that the functional component has been called as a functional stateless component since the introduction of classes —but not anymore.

Previously, a class component allowed you to have a local state. Using React Hooks, there is no requirement to refactor a React Native class component into a functional component, only because you want to introduce local state or lifecycle methods in that component.

However, they do not work with classes. React provides a few built-in Hooks such as useState and useEffect. You can also create your own Hooks to re-use, to manage state between different components.

Table of contents

Getting started

The entry point of a React Native app

Setting up a stack navigation

Adding the second screen to the stack navigator

Adding a Floating Button component

Adding a custom header component

Implementing Hooks

Adding a FlatList component to render notes

Using Navigation parameters to update the state

Running the app

Conclusion

Getting started

To quickly create a React Native app, let’s use a tool called Expo. It’s a managed development toolkit that provides a client to preview and make changes to React Native apps using JavaScript. You don’t need tools such as Xcode or Android Studio to get started.

To generate a new app, open a terminal window and enter the following command to install the command-line tool provided by Expo:

The next step is to run the expo init command and choose the default template: blank .

Once the project directory is generated, navigate inside it. The demo you’re going to build requires the use of a navigation pattern between two screens. The first screen is going to display a list of items, and through the second screen, you can add an item to the list. This is a typical stack navigation pattern, and using the react-navigation library, you can add this to your React Native app.

The react-navigation library is a third party library that needs to be installed in a React Native or Expo app separately as a dependency. You can either use npm or yarn , but I’m going to stick with yarn . Each navigational pattern comes as a dependency, too. Since this demo requires only one pattern, let’s install that, as well.

The third library you’re going to install is called react-native-paper , which will provide a collection of custom UI components based on Material Design that you can integrate directly. Go back to the terminal window and execute the following command:

React Navigation is made up of some core utilities, which are then used by navigators to create the navigation structure in your app. After the above step, Expo requires you to configure these core utilities as dependencies:

That’s all for the setup. Let’s build something.