How to make a todo app in react native with CRUD

Hey There awesome developers. 

source code is attached at the end of this article 

1. Initializing Local States In the TodoScreen.js file, you'll notice that we initialize local states using the useState hook. These states include todo, todoList, and editedTodo. This allows us to manage and update the app's data dynamically. 

2. Adding a Todo Item The handleAddTodo function is responsible for adding a new todo item to the list. It checks if the input is empty and, if not, adds a new todo with a unique ID generated using Date.now().toString(). 

3. Deleting a Todo Item To remove a todo item, we use the handleDeleteTodo function. It filters out the todo with the specified ID from the list, effectively deleting it. 

4. Editing a Todo Item The handleEditTodo function enables editing of a todo item. It sets the editedTodo state and populates the input field with the selected todo item's title. 

5. Updating a Todo Item When you're done editing, the handleUpdateTodo function updates the edited todo item and refreshes the list. It maps through the existing todos and modifies the one that matches the edited todo's ID. 

6. Rendering Todo Items The renderTodos function defines the visual representation of a todo item. It handles both editing and deleting todos, providing a seamless user experience. 

import {

FlatList,

StyleSheet,

Text,

TextInput,

TouchableOpacity,

View,

} from "react-native";

import React, { useState } from "react";

import { IconButton } from "react-native-paper";

import { uuid } from "react-native-uuid";

import Fallback from "../components/Fallback";

console.log(Date.now().toString());

const TodoScreen = () => {

// Init local states

const [todo, setTodo] = useState("");

const [todoList, setTodoList] = useState([]);

const [editedTodo, setEditedTodo] = useState(null);

// Handle Add Todo

const handleAddTodo = () => {

// sturtcure of a single todo item

// {

// id:

// title:

// }

if (todo === "") {

return; // early return

}

setTodoList([...todoList, { id: Date.now().toString(), title: todo }]);

setTodo("");

};

// Handle Delete

const handleDeleteTodo = (id) => {

const updatedTodoList = todoList.filter((todo) => todo.id !== id);

setTodoList(updatedTodoList);

};

// Handle Edit todo

const handleEditTodo = (todo) => {

setEditedTodo(todo);

setTodo(todo.title);

};

// Handle Update

const handleUpdateTodo = () => {

const updatedTodos = todoList.map((item) => {

if (item.id === editedTodo.id) {

return { ...item, title: todo };

}

return item;

});

setTodoList(updatedTodos);

setEditedTodo(null);

setTodo("");

};

// Render todo

const renderTodos = ({ item, index }) => {

return (

<View

style={{

backgroundColor: "#1e90ff",

borderRadius: 6,

paddingHorizontal: 6,

paddingVertical: 8,

marginBottom: 12,

flexDirection: "row",

alignItems: "center",

shadowColor: "#000",

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.8,

shadowRadius: 3,

// elevation: for android

}}

>

<Text

style={{ color: "#fff", fontSize: 20, fontWeight: "800", flex: 1 }}

>

{item.title}

</Text>

<IconButton

icon="pencil"

iconColor="#fff"

onPress={() => handleEditTodo(item)}

/>

<IconButton

icon="trash-can"

iconColor="#fff"

onPress={() => handleDeleteTodo(item.id)}

/>

</View>

);

};

return (

<View style={{ marginHorizontal: 16, marginTop: 40 }}>

<TextInput

style={{

borderWidth: 2,

borderColor: "#000",

borderRadius: 6,

paddingVertical: 8,

paddingHorizontal: 16,

}}

placeholder="Add a task"

value={todo}

onChangeText={(userText) => setTodo(userText)}

/>

{editedTodo ? (

<TouchableOpacity

style={{

backgroundColor: "#000",

borderRadius: 6,

paddingVertical: 12,

marginVertical: 34,

alignItems: "center",

shadowColor: "#000",

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.8,

shadowRadius: 3,

}}

onPress={() => handleUpdateTodo()}

>

<Text style={{ color: "#fff", fontWeight: "bold", fontSize: 20 }}>

Save

</Text>

</TouchableOpacity>

) : (

<TouchableOpacity

style={{

backgroundColor: "#000",

borderRadius: 6,

paddingVertical: 12,

marginVertical: 34,

alignItems: "center",

shadowColor: "#000",

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.8,

shadowRadius: 3,

}}

onPress={() => handleAddTodo()}

>

<Text style={{ color: "#fff", fontWeight: "bold", fontSize: 20 }}>

Add

</Text>

</TouchableOpacity>

)}

{/* Render todo list */}

<FlatList data={todoList} renderItem={renderTodos} />

{todoList.length <= 0 && <Fallback />}

</View>

);

};

export default TodoScreen;

const styles = StyleSheet.create({});

7. Adding Styling Throughout the code, you'll notice styling applied to various components, such as buttons and todo items. These styles enhance the app's visual appeal. 

Conclusion Congratulations! You've successfully created a Todo app in React Native. This project serves as a great introduction to the world of mobile app development and React Native. 

In this tutorial, we've covered essential concepts like state management, handling user input, and creating a user-friendly interface. The skills you've gained can be applied to more complex app development in the future. 

Feel free to experiment further with your Todo app. You can add features like due dates, categories, or notifications to make it even more functional. 

You can find the full source code for this Todo app on our GitHub repository here. We encourage you to explore, customize, and share your creation with the world.