The Project | About Us | Contribute | Donations | License

HOME

In this project, we will build a simple To-Do List application using React Native. This project will help you consolidate your understanding of React Native's core concepts, including components, state management, and handling user input.

Objectives

Create a functional To-Do List app.
Understand how to manage state in a React Native application.
Learn to handle user input and events.
Implement basic styling using Flexbox.

Project Structure

Setting Up the Project
Creating the To-Do List Component
Managing State
Handling User Input
Displaying the To-Do List
Styling the Application
Adding and Deleting To-Do Items
Conclusion

Setting Up the Project

First, let's set up a new React Native project.

npx react-native init ToDoListApp
cd ToDoListApp
npx react-native start

Creating the To-Do List Component

Create a new file named ToDoList.js in the components directory.

// components/ToDoList.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const ToDoList = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>To-Do List</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default ToDoList;

Managing State

We will use the useState hook to manage the state of our to-do items.

// components/ToDoList.js
import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, Button, FlatList } from 'react-native';

const ToDoList = () => {
  const [toDoItems, setToDoItems] = useState([]);
  const [inputValue, setInputValue] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>To-Do List</Text>
      <TextInput
        style={styles.input}
        placeholder="Add a new task"
        value={inputValue}
        onChangeText={setInputValue}
      />
      <Button title="Add Task" onPress={() => {}} />
      <FlatList
        data={toDoItems}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  item: {
    padding: 10,
    fontSize: 18,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default ToDoList;

Handling User Input

We need to handle the addition of new tasks. Update the onPress function of the Button component.

// components/ToDoList.js
const addTask = () => {
  if (inputValue.trim()) {
    setToDoItems([...toDoItems, inputValue]);
    setInputValue('');
  }
};

<Button title="Add Task" onPress={addTask} />

Displaying the To-Do List

We are already displaying the to-do items using FlatList. Let's ensure the list updates correctly when new items are added.

Styling the Application

Enhance the styling to make the app more visually appealing.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f8f8f8',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    backgroundColor: '#fff',
  },
  item: {
    padding: 10,
    fontSize: 18,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    backgroundColor: '#fff',
    marginBottom: 5,
  },
});

Adding and Deleting To-Do Items

To delete items, we can add a TouchableOpacity component to each item.

// components/ToDoList.js
import { TouchableOpacity } from 'react-native';

const deleteTask = (index) => {
  const newToDoItems = [...toDoItems];
  newToDoItems.splice(index, 1);
  setToDoItems(newToDoItems);
};

<FlatList
  data={toDoItems}
  renderItem={({ item, index }) => (
    <TouchableOpacity onPress={() => deleteTask(index)}>
      <Text style={styles.item}>{item}</Text>
    </TouchableOpacity>
  )}
  keyExtractor={(item, index) => index.toString()}
/>

Conclusion

In this project, you have learned how to:

Set up a React Native project.
Create and style components.
Manage state using the useState hook.
Handle user input and events.
Add and delete items from a list.

This To-Do List app serves as a foundation for more complex applications. Practice by adding more features, such as editing tasks or marking them as completed.

Project 1: To-Do List App

Objectives

Project Structure

Setting Up the Project

Creating the To-Do List Component

Managing State

Handling User Input

Displaying the To-Do List

Styling the Application

Adding and Deleting To-Do Items

Conclusion

React Native Course

Module 1: Introduction to React Native

Module 2: Core Components and Styling

Module 3: State and Lifecycle

Module 4: Navigation

Module 5: Networking and Data

Module 6: Advanced Concepts

Module 7: Deployment and Publishing

Module 8: Real-World Projects