React Native via expo— simple TODO App [React Hooks] — (2020–2021)

Building a simple TODO app using React Native as my framework and Expo as my interface.

It is fun to learn new things especially when it comes with programming techniques. I switch back on learning React Native as the React Hooks have been available since the stable release of the Hooks.

To make it short and clear, Functional components makes life easier and Class components makes life crazier. Well, a bit exaggeration of how I defined the difference between two components and they have their own cons and pros using it. Read the React hook documentations.

  • Getting started
  • Creating starting point of the app
  • Setting up a navigation
  • Adding Constant for Actions
  • Creating Reducer and Context folder and files.
  • Adding Reducer functionality
  • Adding Context functionality using createContext and useReducer Hooks
  • Adding functionality to screens — AddNote.js and Note.js files
  • Adding up Components — NoteCard.js file
  • Running the app
  • Conclusion

Getting started

To create a React-Native app on the fly, let’s use Expo. Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

Install the expo-cli via npm globally.

Creating the simple-todo-app via Expo.

Now lets install the react-navigation/native, react-navigation/stack and react-native-paper. This will handle our navigation and provide UI.

Read the documentation of this packages: react-navigation and react-native-paper.

Now let’s use the uuid to generate random id but first to be able to work the uuid lets install the react-native-get-random-values. According to uuid:

Import it before uuid. Since uuid might also appear as a transitive dependency of some other imports it's safest to just import react-native-get-random-values as the very first thing in your entry point.

And now installation of uuid.

We install all that we need to build this simple app.

Creating starting point of the app

Before we start creating our starting point we to config our react-native-paper according to react-native-paper docs:

If you use Expo, you don’t need to install vector icons. But if you have a babel.config.js or .babelrc file, make sure that it includes babel-preset-expo.

If you created your project using Expo, it’ll look something like this:

Now let’s move to App.js. This file is our entry point for our application.

Run the app.

Then we will modified this file.

Run the app.

Next we will set up our navigation and we will change the App.js file.

Setting up a navigation

Create a folder name “app” inside the app folder create a folder again name “navigation” and then inside the navigation folder create a file name “index.js”. In that file we will put our navigation code and import it in the App.js to our entry file.

simple-todo-app/app/navigation/index.js

Open the index.js file.

import { NavigationContainer } from ‘@react-navigation/native’

— will provide a container for our navigation.

import { createStackNavigato } from ‘@react-navigation/stack’

— responsible for providing a way for your app to transition between screens and manage navigation history.

Then go back to App.js and modified the code.

We will delete the react-native imports and the const styles. Then:

import { Provider as PaperProvider } from ‘react-native-paper’

According to react-native-paper: The PaperProvider component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.

Let’s create a screens folder and two files name “Notes.js” and “AddNote.js”.

simple-todo-app/app/screens/Notes.js

simple-todo-app/app/screens/AddNote.js

Add some code to display some text.

simple-todo-app/app/screens/Notes.js

Add some code to display some text.

simple-todo-app/app/screens/AddNote.js

Let’s go back to the navigation/index.js and add the Notes and AddNote components. According to react-navigation docs:

simple-todo-app/app/navigation/index.js

NavigationContainer is a component which manages our navigation tree and contains the navigation state. This component must wrap all navigators structure.

createStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator. Both of them are React components used for configuring the navigator. The Navigator should contain Screen elements as its children to define the configuration for routes.

Run the app.

Adding Constant for Actions

This time let’s a constant for our actions that utilize by the reducer and other file. It just bunch of constant variable with a value of strings.

Create a folder name “constant” and inside the that folder create a file name “Action.js”

simple-todo-app/app/constant/Action.js

Open the Action.js. simple-todo-app/app/constant/Action.js

Creating Reducer and Context folder and file

Go back inside the app folder and create a folder name “context” inside of the context folder create a file name “NoteContext.js”.

app/context/NoteContext.js

Then again inside the app folder create a folder name “reducer” inside of the context folder create a file name “NoteReducer.js”.

app/reducer/NoteReducer.js

Adding Reducer functionality

Open the NoteReducer.

simple-note-app/app/reducer/NoteReducer.js

In this file we create a noteReducer where we defined our state and action. we import the Action.js.

import { ADD_NOTE, REMOVE_NOTE, UPDATE_NOTE } from “../constant/Action”

The reason I do this is the avoid the typo and unwanted error.

Adding Context functionality using createContext and useReducer Hooks

Let’s set up our NoteContext.js file so that we can able to access our state.

simple-todo-app/app/context/NoteContext.js

We import the createContext and useReducer hooks. createContext provides a Provider component allowing us to change or cosume the context that we create. While the useReducer is mostly like we use a useState hook but in a deeper sense and also lets you optimize performance for components.

Read createContext and useReducer docs.

Now let’s import the Notecontext.js to App.js

Open App.js

Adding functionality to screens — AddNote.js and Note.js files

First let’s start with the AddNote.js

Import useState, useContext, useMemo hooks. we use a useState hook for sub-Value then we pass it to the useContext. useMemo is not necessary to use it here but I decided to use it in this section. Read the useMemo docs.

Import uuid and react-native-get-random-values — generate a random number.

Import react-native-paper — for our User-interface.

Import { Context } from “../context/NoteContext” — where we can access the the context we create.

Import { ADD_NOTE } from “../constant/Action” — we access it for the dispatch.

We use useState hooks to manage our sub-values and pass in to our Context.

const [noteTitle, setNoteTitle] = useState(“”);

const [noteValue, setNoteValue] = useState(“”);

to

const { dispatch } = useContext(Context);

The uuid version 4 “v4” we give it an alias as “uuidv4” using it to generate a random id

id: uuidv4() ,

to make the uuid to work we import the the “react-native-get-random-values first. Then for the we use react-native-paper for our TextInput, and FAB.

Then our Note.js file.

Import the { Context } from “../context/NoteContext” — to consume the context accumilated using map().

Run the app.

Adding up Components — NoteCard.js file

Now let’s add NoteCard components. Create a folder name “component” inside this folder create a file name “NoteCard.js”.

simple-todo-app/app/component/NoteCard.js

We will pass a props in this components.

({ title, value, date, onPressDel, onPressCom, complete })

react-native-paper for handling the UI

{ Card, Title, Paragraph, Button, FAB }

Then we import NoteCard.js component in Notes.js

import { REMOVE_NOTE, UPDATE_NOTE } from “../constant/Action”

import NoteCard from “../components/NoteCard”

We use the map() and access the context added by the AddNote component. Then we pass that data down to our NoteCard component and import that component in the Note component to display its context.

Running the app

Conclusion

Diving to the iOS and Anroid development setup for a beginner’s point of view is too much. Expo toolkit is lessen that burden instead digging on setting-up the developer start to dive-in to the code itself. And when you’re confident enough you can eject from Expo and config the app the way you wanted to configure. With the new and future development of functional component in React gives the react-native a boost to a brighter future.

Here the code: https://github.com/jrTadena/react-native/tree/master/todo-app.

Creating this simple app is fun hope you notify me if there’s something wrong to the code. Thank you.