Making a Todo List Using React Native
By: Faiza Anan Noor
Tags: Programming, React Native, JavaScript, Mobile Development, React

Assalamu Alaikum! In this particular story, I’m thinking of demonstrating how we can make a Todo-List using React Native!

I’m thinking of keeping it pretty short with minimal to almost no styling at all. The main idea of it is to demonstrate how a todolist can be made with react native as fast as possible. You can experiment with the styling yourself once you’re done implementing the whole thing. But in the future, I will show you ways how you can create good UIs using React Native.

Prerequisites:

You need to have a working level understanding of the following things in order to fully comprehend what’s going on in this walkthrough.

HTML CSS JS ReactJs

PROCEDURE:

So to get started we first need to download expo, which is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

Assuming that you have Node 12 LTS or greater installed, you can use node package manager or npm to install the Expo CLI command line utility by running the following command in your cmd.

npm install -g expo-cli

Then run the following commands to create a new React Native project called “todolist”. You’ll be asked to choose from a bunch of options called “Blank, Miniminal etc”. Just choose “Blank” for now since we are going to be starting with just the barebone features.

expo init todolist cd todolist

Now to start a development server, run the following command:

npm start

you can also use:

expo start

Now you can choose to run this on a virtual device/emulator, or your phone.

FOLDER STRUCTURE:

The folder structure will look like this:

Here we will create a new Folder called “components” and add two new files called AddItem.js and ListItems.js.

Now let’s write the following codes in our AddItem.js and ListItem.js and import them to our main App.js file.

In AddItem.js:

import React from 'react'; import { View, Text } from 'react-native'; export default function AddItem() { return ( <View> <Text>ADD Item</Text> </View> ); }

In ListItems.js:

import React from 'react'; import { View, Text } from 'react-native'; export default function ListItems() { return ( <View> <Text>List Item</Text> </View> ); }

Now let’s import these two in our App.js , so that will make the App.js look like this:

import { StatusBar } from 'expo-status-bar'; import React from 'react'; import AddItem from './components/AddItem'; import ListItems from './components/ListItems'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Text>Todo List</Text> <AddItem></AddItem> <ListItems></ListItems> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

Now in AddItem.js let’s create a form for adding items to our todo lists.

For this we’ll be using TextInputs and Buttons.

Now let’s import Button and TextInput components from ReactNative and then use them in the following way:

import React from 'react'; import { View, Text, TextInput, Button } from 'react-native'; export default function AddItem() { return ( <View> <Text>Enter task to add to list</Text> <TextInput style={{ borderBottomColor: 'black', backgroundColor: '#f4f4f4', margin: 4, }} ></TextInput> <Button title="Submit"></Button> </View> ); }

Here we have created a submit button and applied minimal syling to our TextInput.

Lets now install uuid . UUIDs are generally used for identifying information that needs to be unique within a system or network thereof. In our case we’ll assign such unique identifier to each todo item.

npm i uuid

After this we can import uuid in App.js in the following way:

import { v4 as uuidv4 } from ‘uuid’;

Now let’s import useState from react and then declare a useState hook for keeping our todolist items and for setting the list with new values in the following way:

const [list, setList] = useState([]);

Now after this declaration let’s declare this function for creating a new todo item with a unique id found from uuid and the text passed in from the form.

const addItem = (text) => { const newItem = { id: uuidv4(), task: text, }; setList([newItem, …list]); };

Let’s also declare another function for deleteItem which will delete the item that is passed in using its id in the following way:

const DeleteItem = (id) => { const newList = list.filter((item) => item.id !== id); setList(newList); };

Now in App.js we need to pass these functions as props.

<AddItem addItem={addItem}></AddItem> <ListItems deleteItem={DeleteItem} listItems={list}></ListItems>

So App.js will finally look like this:

import { StatusBar } from ‘expo-status-bar’; import React, { useState } from ‘react’; import AddItem from ‘./components/AddItem’; import ListItems from ‘./components/ListItems’; import { v4 as uuidv4 } from ‘uuid’; import { StyleSheet, Text, View } from ‘react-native’; export default function App() { const [list, setList] = useState([]); const addItem = (text) => { const newItem = { id: uuidv4(), task: text, }; setList([newItem, …list]); }; const DeleteItem = (id) => { const newList = list.filter((item) => item.id !== id); setList(newList); }; return ( <View style={styles.container}> <Text>Todo List</Text> <AddItem addItem={addItem}></AddItem> <ListItems deleteItem={DeleteItem} listItems={list}></ListItems> <StatusBar style=”auto” /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ‘#fff’, alignItems: ‘center’, justifyContent: ‘center’, }, });

Now since our App.js is done now let’s complete our other two components:

In AddItem.js, we’ll create another useState hook for saving and updating the item that will be added to the todolist.

const [item, setItem] = useState(‘’);

The final look of our AddItem.js will be like:

import React, { useState } from 'react'; import { View, Text, TextInput, Button } from 'react-native'; export default function addItem(props) { const [item, setItem] = useState(''); return ( <View> <Text>Enter task to add to list</Text> <TextInput onChangeText={(textVal) => { setItem(textVal); }} style={{ borderBottomColor: 'black', backgroundColor: '#f4f4f4', margin: 4, }} ></TextInput> <Button onPress={() => { props.addItem(item); }} title="Submit" ></Button> </View> ); }

Here, whenever we change the text in the TextInput field, the value of the variable “item” will be set to that. And whenever we click “Submit” Button that value set is going to passed on to App.js using the addItem passed as prop to it. Then using this value, a new item can be added to our todo list.

Now for the showing Items and delete function, we can follow similar steps.

The final look of our ListItems.js will be like:

import React from 'react'; import { View, Text, TouchableOpacity, FlatList, Button } from 'react-native'; export default function ListItems(props) { return ( <View> <FlatList data={props.listItems} renderItem={({ item }) => ( <View> <TouchableOpacity style={{ padding: 15, backgroundColor: '#f8f8f8', borderBottomWidth: 1, borderColor: '#eee', width: 180, marginTop: 5, justifyContent: 'space-between', flexDirection: 'row', display: 'flex', }} > <Text> {item.task}</Text> <Button title="Delete" onPress={() => { props.deleteItem(item.id); }} ></Button> </TouchableOpacity> </View> )} ></FlatList> </View> ); }

Here we have created a FlatList to show all our items. It takes in our listItems passed from App.js as its data. And then it renders that data in components called “TouchableOpacity”.

So there is also a delete Button next to each item, clicking which the id of a particular item will be sent on to the App.js component. And then using this id, the deleteItem function will help us to delete this particular item clicked. It will filter out the data containing this item and then set the list without this item.

So then our final operation/output will be like: