import React, { useState, useEffect, useRef } from 'react';
import Icon from 'react-native-vector-icons/Feather';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { styles } from './styles';
const MY_ROCKET_TODO_APP_KEY = 'my-ra-todo-app-key';
const Task = (props) => (
<View style={styles.taskWrapper}>
<TouchableOpacity onPress={() => props.setChecked()}>
name={props.checked ? 'check' : 'square'}
style={{ marginLeft: 15 }}
{props.checked && <View style={styles.verticalLine}></View>}
<Text style={styles.task}>{props.text}</Text>
style={{ marginLeft: 'auto', marginRight: 10 }}
export default function App() {
const [value, setValue] = useState('');
const [todos, setTodos] = useState([]);
const isInitialMount = useRef(true); //useEffect to run only on updates except initial mount
if (isInitialMount.current) {
// get it from async storage
AsyncStorage.getItem(MY_ROCKET_TODO_APP_KEY).then((storedData) => {
const storedDataParsed = JSON.parse(storedData) || [];
setTodos(storedDataParsed);
isInitialMount.current = false;
AsyncStorage.setItem(MY_ROCKET_TODO_APP_KEY, JSON.stringify(todos));
const handleAddTodo = () => {
setTodos([...todos, { text: value, key: Date.now(), checked: false }]);
const handleDeleteTodo = (id) => {
if (todo.key !== id) return true;
const handleChecked = (id) => {
if (todo.key === id) todo.checked = !todo.checked;
<View style={styles.container}>
<Text style={{ marginTop: '10%', fontSize: 16, color: 'white' }}>
<View style={styles.textInputContainer}>
onChangeText={(value) => setValue(value)}
placeholder={'Do it now!'}
<TouchableOpacity onPress={() => handleAddTodo()}>
<Icon name="plus" size={30} color="#900" />
<ScrollView style={styles.scroll}>
setChecked={() => handleChecked(task.key)}
delete={() => handleDeleteTodo(task.key)}