React Native Todo App

Sure! Here's an example of a simple todo app built using React Native:

1. Set up a new React Native project using the Expo CLI:

bashCopy code
expo init TodoApp
cd TodoApp

2. Install the required dependencies:

javaCopy code
npm install react react-native expo

3. Create a new file named App.js and add the following code:

javascriptCopy code
import 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,
  },
});

4. Open the App.js file and run the app using Expo CLI:

sqlCopy code
expo start

5. 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:

1. Create a new file named TodoItem.js and add the following code:

javascriptCopy code
import 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;

2. Update the App.js file with the following changes:

• Import the TodoItem component:

javascriptCopy code
import TodoItem from './TodoItem';

• Update the renderItem function to use the TodoItem component:

javascriptCopy code
const 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 a text property and isChecked property:

javascriptCopy code
const handleAddTodo = () => {
  if (todoText !== '') {
    setTodos([...todos, { text: todoText, isChecked: false }]);
    setTodoText('');
  }
};

• Add two new functions toggleChecked and handleDeleteTodo:

javascriptCopy code
const 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);
};

3. Update the App component's return statement to use the FlatList and TodoItem component:

javascriptCopy code
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}
     

Sure! Here's an updated version of the todo app with a progress indicator at the top to show the percentage of completed tasks:

1. Update the App.js file with the following changes:

• Add a new state variable completedCount to keep track of the number of completed tasks:

javascriptCopy code
const [completedCount, setCompletedCount] = useState(0);

• Update the toggleChecked function to increment or decrement the completedCount based on the checked state of the task:

javascriptCopy code
const 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);
  }
};

2. Update the renderItem function to pass the toggleChecked function as a prop to the TodoItem component:

javascriptCopy code
const renderItem = ({ item, index }) => {
  return (
    <TodoItem
      item={item.text}
      index={index}
      isChecked={item.isChecked}
      toggleChecked={toggleChecked}
      deleteTodo={handleDeleteTodo}
    />
  );
};

3. Update the App component's return statement to include the progress indicator:

javascriptCopy code
return (
  <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>
);

4. Add the following styles for the progress indicator:

javascriptCopy code
progressContainer: {
  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:

1. Install the react-native-progress library:

bashCopy code
npm install react-native-progress

2. Import the ProgressBar component in the App.js file:

javascriptCopy code
import { ProgressBar } from 'react-native-progress';

3. Update the App component's return statement to include the progress indicator bar:

javascriptCopy code
return (
  <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>
);

4. Add the following styles for the progress indicator container:

javascriptCopy code
progressContainer: {
  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.