React Hooks Basics— Building a React Native App with React Hooks

Understanding React Native Hooks. Building a small demo app with Hooks using Crowdbotics. Introducing flexbox — React Native vs. on the web.

Aman Mittal
Apr 18, 2019 · 11 min read
Image for post
Image for post

Tldr;

  • Requirements
  • Setting up Crowdbotics Project
  • Setup a React Native app
  • What are Hooks?
  • Implementing Hooks in react native
  • Building a Todo List App
  • What is flexbox?
  • Adding Hooks to the Todo List App
  • Rendering the list
  • Completing and Deleting an Item
  • Conclusion

Requirements

In order to follow this tutorial, you are required to have the following installed on your dev machine:

  • Know, how to run simple npm commands
  • JavaScript/ES6 basics
  • watchman the file watcher installed
  • react-native-cli installed through npm

Setting up a Crowdbotics Project

In this section, you will be setting up a Crowdbotics project that has React Native pre-defined template with stable and latest dependencies for you to leverage. However, at the time of writing this tutorial, the template does not use React Native version 0.59. So instead of going into too much hassle about upgrading this React Native app, I will be walking you through creating a new React Native project in the next section.

Image for post
Image for post

Setup a React Native App

Once you installed `react-native-cli` you can begin by generating a React Native project. Run the below command to initialize a new React Native project. Also, note that you can name your React Native app anything.

Image for post
Image for post

What are Hooks?

Hooks in React have been available since the version 16.7.0-alpha. They are functions that allow you to use React state and a component's lifecycle methods in a functional component. Hooks do not work with classes. If you are familiar with React, you know that the functional component has been called as a functional stateless component. Not any more.

Implementing Hooks in React Native

In the example below, let us take a look at how you will manage the local state of a component by using Hooks. Open up App.js file and paste this code.

Image for post
Image for post
Image for post
Image for post

Building a Todo List app with Hooks

In this section, you are going to build a Todo List application using React Native framework and Hooks. I personally love building Todo list applications when getting hands-on experience over a new programming concept or approach.

What is flexbox?

Creating a UI in a React Native app heavily depends on styling with flexbox. Even if you decide to use a third party library kit such as nativebase or react-native-elements, their styling is based on flexbox too.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Adding Hooks to the App

In this section, you are going to add a local state to the component using Hooks. We will start by initializing the local state for the App component with the new hooks syntax. For that, you have to require useState from react core. Also, note that the initial state passed below is passed as an argument to the useState() function.

Rendering the List

You are going to create a new component that will be responsible for displaying each task that a user adds. Create a new file called TodoList.js and add the following code to the file.

Image for post
Image for post

Completing and Deleting an Item

This is the last section to complete our application. We need two handler functions to implement functionalities of checking a todo list item mark and deleting a todo list item.

Image for post
Image for post

Conclusion

This completes our tutorial. I hope this tutorial helps you understand the basics of React Hooks and then implement them with your favorite mobile app development framework, React Native.


Image for post
Image for post

Building A Web Or Mobile App?

Crowdbotics is the fastest way to build, launch and scale an application.

Crowdbotics

The fastest way to build your next app.

Aman Mittal

Written by

👨‍💻Developer 👉 Nodejs, Reactjs, ReactNative | Tech Blogger with 1M+ views at Medium| My weekly dev newsletter 👉 tinyletter.com/amanhimself

Crowdbotics

The fastest way to build your next app.

Aman Mittal

Written by

👨‍💻Developer 👉 Nodejs, Reactjs, ReactNative | Tech Blogger with 1M+ views at Medium| My weekly dev newsletter 👉 tinyletter.com/amanhimself

Crowdbotics

The fastest way to build your next app.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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