React Native Todo App
Sure! Here's an example of a simple todo app built using React Native:
- Set up a new React Native project using the Expo CLI:
bashexpo init TodoApp
cd TodoApp
- Install the required dependencies:
javanpm install react react-native expo
- Create a new file named
App.js
and add the following code:
javascriptimport React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, FlatList } from 'react-native';
export default function App() {
const [todos, setTodos] = useState([]);
const [todoText, setTodoText] = useState('');
const handleAddTodo = () => {
if (todoText !== '') {
setTodos([...todos, todoText]);
setTodoText('');
}
};
const handleDeleteTodo = (index) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
const renderItem = ({ item, index }) => {
return (
<View style={styles.todoItem}>
<Text style={styles.todoText}>{item}</Text>
<TouchableOpacity onPress={() => handleDeleteTodo(index)}>
<Text style={styles.deleteButton}>Delete</Text>
</TouchableOpacity>
</View>
);
};
return (
<View style={styles.container}>
<Text style={styles.title}>Todo App</Text>
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
placeholder="Enter a todo"
value={todoText}
onChangeText={(text) => setTodoText(text)}
/>
<TouchableOpacity style={styles.addButton} onPress={handleAddTodo}>
<Text style={styles.addButtonText}>Add</Text>
</TouchableOpacity>
</View>
<FlatList
data={todos}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
style={styles.todoList}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
inputContainer: {
flexDirection: 'row',
},
input: {
flex: 1,
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginRight: 10,
paddingHorizontal: 10,
},
addButton: {
backgroundColor: 'blue',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 10,
borderRadius: 5,
},
addButtonText: {
color: 'white',
fontWeight: 'bold',
},
todoList: {
marginTop: 20,
},
todoItem: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
todoText: {
flex: 1,
fontSize: 18,
},
deleteButton: {
color: 'red',
marginLeft: 10,
},
});
- Open the
App.js
file and run the app using Expo CLI:
sqlexpo start
- You can now see the app running in your Expo development server. You can use the Expo Client app on your phone
Certainly! Here's an updated version of the todo app with the todo item as a separate component and a working checkbox:
- Create a new file named
TodoItem.js
and add the following code:
javascriptimport React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
const TodoItem = ({ item, index, isChecked, toggleChecked, deleteTodo }) => {
return (
<View style={styles.todoItem}>
<TouchableOpacity onPress={() => toggleChecked(index)}>
<View style={isChecked ? styles.checkboxChecked : styles.checkbox}></View>
</TouchableOpacity>
<Text style={[styles.todoText, isChecked ? styles.checkedText : null]}>{item}</Text>
<TouchableOpacity onPress={() => deleteTodo(index)}>
<Text style={styles.deleteButton}>Delete</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
todoItem: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
checkbox: {
width: 20,
height: 20,
borderColor: 'gray',
borderWidth: 2,
marginRight: 10,
},
checkboxChecked: {
width: 20,
height: 20,
backgroundColor: 'blue',
marginRight: 10,
},
todoText: {
flex: 1,
fontSize: 18,
},
checkedText: {
textDecorationLine: 'line-through',
color: 'gray',
},
deleteButton: {
color: 'red',
marginLeft: 10,
},
});
export default TodoItem;
- Update the
App.js
file with the following changes:
- Import the
TodoItem
component:
javascriptimport TodoItem from './TodoItem';
- Update the
renderItem
function to use theTodoItem
component:
javascriptconst renderItem = ({ item, index }) => {
return (
<TodoItem
item={item.text}
index={index}
isChecked={item.isChecked}
toggleChecked={toggleChecked}
deleteTodo={handleDeleteTodo}
/>
);
};
- Update the
handleAddTodo
function to add todos as objects with atext
property andisChecked
property:
javascriptconst handleAddTodo = () => {
if (todoText !== '') {
setTodos([...todos, { text: todoText, isChecked: false }]);
setTodoText('');
}
};
- Add two new functions
toggleChecked
andhandleDeleteTodo
:
javascriptconst toggleChecked = (index) => {
const newTodos = [...todos];
newTodos[index].isChecked = !newTodos[index].isChecked;
setTodos(newTodos);
};
const handleDeleteTodo = (index) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
- Update the
App
component's return statement to use theFlatList
andTodoItem
component:
javascriptreturn (
<View style={styles.container}>
<Text style={styles.title}>Todo App</Text>
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
placeholder="Enter a todo"
value={todoText}
onChangeText={(text) => setTodoText(text)}
/>
<TouchableOpacity style={styles.addButton} onPress={handleAddTodo}>
<Text style={styles.addButtonText}>Add</Text>
</TouchableOpacity>
</View>
<FlatList
data={todos}
Sure! Here's an updated version of the todo app with a progress indicator at the top to show the percentage of completed tasks:
- Update the
App.js
file with the following changes:
- Add a new state variable
completedCount
to keep track of the number of completed tasks:
javascriptconst [completedCount, setCompletedCount] = useState(0);
- Update the
toggleChecked
function to increment or decrement thecompletedCount
based on the checked state of the task:
javascriptconst toggleChecked = (index) => {
const newTodos = [...todos];
newTodos[index].isChecked = !newTodos[index].isChecked;
setTodos(newTodos);
if (newTodos[index].isChecked) {
setCompletedCount((prevCount) => prevCount + 1);
} else {
setCompletedCount((prevCount) => prevCount - 1);
}
};
- Update the
renderItem
function to pass thetoggleChecked
function as a prop to theTodoItem
component:
javascriptconst renderItem = ({ item, index }) => {
return (
<TodoItem
item={item.text}
index={index}
isChecked={item.isChecked}
toggleChecked={toggleChecked}
deleteTodo={handleDeleteTodo}
/>
);
};
- Update the
App
component's return statement to include the progress indicator:
javascriptreturn (
<View style={styles.container}>
<Text style={styles.title}>Todo App</Text>
<View style={styles.progressContainer}>
<Text style={styles.progressText}>
{todos.length > 0
? `${Math.floor((completedCount / todos.length) * 100)}% Complete`
: '0% Complete'}
</Text>
</View>
<View style={styles.inputContainer}>
{/* ...existing code */}
</View>
{/* ...existing code */}
</View>
);
- Add the following styles for the progress indicator:
javascriptprogressContainer: {
alignItems: 'center',
marginTop: 10,
},
progressText: {
fontSize: 16,
fontWeight: 'bold',
},
That's it! Now you should see a progress indicator at the top of the app, showing the percentage of completed tasks based on the number of checked todos.
To add a progress indicator bar to visually represent the completion progress, you can use the ProgressBar
component from the react-native-progress
library. Here's how you can incorporate it into the existing todo app:
- Install the
react-native-progress
library:
bashnpm install react-native-progress
- Import the
ProgressBar
component in theApp.js
file:
javascriptimport { ProgressBar } from 'react-native-progress';
- Update the
App
component's return statement to include the progress indicator bar:
javascriptreturn (
<View style={styles.container}>
<Text style={styles.title}>Todo App</Text>
<View style={styles.progressContainer}>
<ProgressBar
progress={todos.length > 0 ? completedCount / todos.length : 0}
width={200}
height={20}
borderRadius={10}
color="blue"
animated={false}
/>
<Text style={styles.progressText}>
{todos.length > 0
? `${Math.floor((completedCount / todos.length) * 100)}% Complete`
: '0% Complete'}
</Text>
</View>
{/* ...existing code */}
</View>
);
- Add the following styles for the progress indicator container:
javascriptprogressContainer: {
alignItems: 'center',
marginTop: 10,
},
progressText: {
fontSize: 16,
fontWeight: 'bold',
marginTop: 10,
},
That's it! Now you should see a progress indicator bar along with the percentage at the top of the app, representing the completion progress of the todos.