Código do Planner_App

App.js:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StyleSheet, Text, View, TouchableOpacity, ImageBackground } from
'react-native';
import TarefasScreen from './TarefasScreen';
import ProjetosScreen from './ProjetosScreen'; // Certifique-se de que você
tem essa tela criada
import 'react-native-gesture-handler';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {

return (
<ImageBackground
source={require('./assets/background.jpg')} // Caminho para sua imagem
de fundo
style={styles.container}
>

<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('Tarefas')}
>
<Text style={styles.buttonText}>TAREFAS</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('Projetos')} // Botão que leva à
tela de Projetos
>
<Text style={styles.buttonText}>PROJETOS</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} options={{ title:
'PLANNER APP' }} />
<Stack.Screen name="Tarefas" component={TarefasScreen} options={{
title: 'TAREFAS' }} />
<Stack.Screen name="Projetos" component={ProjetosScreen} options={{
title: 'PROJETOS' }} />
</Stack.Navigator>
</NavigationContainer>
);
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
header: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 40,
color: 'white', // Garantindo que o título seja visível sobre o fundo
},
buttonContainer: {
width: '80%',
alignItems: 'center',
},
button: {
backgroundColor: '#fff',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 20,
marginVertical: 10,
width: '100%',
alignItems: 'center',
},
buttonText: {
color: '#907A99',
fontWeight:'bold',
fontSize: 16,
},
});
TarefasScreen.js:
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, FlatList, TouchableOpacity } from
'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function TarefasScreen() {

const [task, setTask] = useState('');
const [tasks, setTasks] = useState([]);

useEffect(() => {
const loadTasks = async () => {
const savedTasks = await AsyncStorage.getItem('tasks');
if (savedTasks) {
setTasks(JSON.parse(savedTasks));
}
};
loadTasks();
}, []);

useEffect(() => {
const saveTasks = async () => {
await AsyncStorage.setItem('tasks', JSON.stringify(tasks));
};
saveTasks();
}, [tasks]);

const addTask = () => {

if (task) {
const newTasks = [...tasks, { id: Date.now().toString(), text: task,
completed: false, isEditing: false }];
setTasks(newTasks);
setTask('');
}
};

const toggleTaskCompletion = (id) => {

setTasks(tasks.map((item) =>
item.id === id ? { ...item, completed: !item.completed } : item
));
};

const deleteTask = (id) => {

setTasks(tasks.filter((item) => item.id !== id));
 };

const startEditingTask = (id) => {

setTasks(tasks.map((item) =>
item.id === id ? { ...item, isEditing: true } : item
));
};

const editTask = (id, newText) => {

setTasks(tasks.map((item) =>
item.id === id ? { ...item, text: newText } : item
));
};

const finishEditingTask = (id) => {

setTasks(tasks.map((item) =>
item.id === id ? { ...item, isEditing: false } : item
));
};

return (
<View style={styles.container}>
<Text style={styles.title}>Lista de Tarefas</Text>
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
placeholder="Nova tarefa"
value={task}
onChangeText={setTask}
/>
<TouchableOpacity style={styles.addButton} onPress={addTask}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
<FlatList
data={tasks}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.taskItem}>
<View style={styles.actionButtons}>
<TouchableOpacity onPress={() => toggleTaskCompletion(item.id)}>
<Text style={item.completed ? styles.taskCompleted :
styles.taskPending}>
{item.completed ? "☑️" : "⬜"}
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => deleteTask(item.id)}>
 <Text style={styles.deleteButton}>🗑️</Text>
</TouchableOpacity>
</View>

{item.isEditing ? (
<TextInput
style={styles.taskTextInput}
value={item.text}
onChangeText={(text) => editTask(item.id, text)}
onBlur={() => finishEditingTask(item.id)}
/>
) : (
<TouchableOpacity onPress={() => startEditingTask(item.id)}>
<Text style={item.completed ? styles.taskTextCompleted :
styles.taskText}>
{item.text}
</Text>
</TouchableOpacity>
)}
</View>
)}
/>
</View>
);
}

const styles = StyleSheet.create({

container: {
flex: 1,
padding: 20,
backgroundColor: '#fff',
},
title: {
fontSize: 24,
fontWeight: 'bold',
color:'#C8A3D9',
marginBottom: 20,
},
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
input: {
flex: 1,
height: 40,
borderColor: '#ccc',
 borderWidth: 1,
paddingHorizontal: 8,
borderRadius: 5,
},
addButton: {
backgroundColor: '#C8A3D9',
width: 40,
height: 40,
borderRadius: 20,
alignItems: 'center',
justifyContent: 'center',
marginLeft: 10,
},
addButtonText: {
color: '#fff',
fontSize: 24,
lineHeight: 30,
},
taskItem: {
flexDirection: 'row',
alignItems: 'center',
padding: 10,
marginVertical: 5,
backgroundColor: '#f9f9f9',
borderRadius: 5,
},
actionButtons: {
flexDirection: 'row',
marginRight: 10,
},
taskPending: {
fontSize: 18,
marginRight: 10,
},
taskCompleted: {
fontSize: 18,
color: '#4CAF50',
marginRight: 10,
},
taskText: {
flex: 1,
fontSize: 16,
},
taskTextCompleted: {
flex: 1,
fontSize: 16,
textDecorationLine: 'line-through',
 color: '#aaa',
},
taskTextInput: {
flex: 1,
fontSize: 16,
borderBottomWidth: 1,
borderColor: '#ccc',
},
deleteButton: {
fontSize: 18,
color: '#ff3333',
},
});

ProjetosScreen.js:
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, FlatList } from
'react-native';
import { TextInputMask } from 'react-native-masked-text';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function ProjetosScreen() {

const [projects, setProjects] = useState([]);

useEffect(() => {
// Load projects from AsyncStorage when the screen is loaded
const loadProjects = async () => {
const storedProjects = await AsyncStorage.getItem('projects');
if (storedProjects) {
setProjects(JSON.parse(storedProjects));
}
};
loadProjects();
}, []);

useEffect(() => {
// Save projects to AsyncStorage whenever they change
const saveProjects = async () => {
await AsyncStorage.setItem('projects', JSON.stringify(projects));
};
saveProjects();
}, [projects]);
 const addProject = () => {
setProjects([
...projects,
{
id: Date.now().toString(),
title: '',
startDate: '',
endDate: '',
description: '',
notes: '',
isCompleted: false, // Novo campo para indicar se o projeto foi
concluído
},
]);
};

const deleteProject = (id) => {

setProjects(projects.filter((project) => project.id !== id));
};

const toggleCompletion = (id) => {

setProjects(
projects.map((project) =>
project.id === id ? { ...project, isCompleted: !project.isCompleted }
: project
)
);
};

return (
<View style={styles.container}>
<FlatList
data={projects}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.card}>
<View style={styles.cardHeader}>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => toggleCompletion(item.id)}
style={[styles.completionCheckbox, item.isCompleted &&
styles.checked]}
>
{item.isCompleted && <Text
style={styles.checkedText}>✔</Text>}
</TouchableOpacity>
<TextInput
 style={styles.titleInput}
placeholder="Título do Projeto"
value={item.title}
onChangeText={(text) =>
setProjects(projects.map((proj) =>
proj.id === item.id ? { ...proj, title: text } : proj
))
}
/>
</View>
<TouchableOpacity onPress={() => deleteProject(item.id)}
style={styles.deleteButton}>
<Text style={styles.deleteButtonText}>X</Text>
</TouchableOpacity>
</View>
<View style={styles.dateContainer}>
<TextInputMask
style={styles.dateInput}
placeholder="Data de Início"
type={'datetime'}
options={{
format: 'DD/MM/YYYY',
}}
value={item.startDate}
onChangeText={(text) =>
setProjects(projects.map((proj) =>
proj.id === item.id ? { ...proj, startDate: text } : proj
))
}
/>
<TextInputMask
style={styles.dateInput}
placeholder="Data de Fim"
type={'datetime'}
options={{
format: 'DD/MM/YYYY',
}}
value={item.endDate}
onChangeText={(text) =>
setProjects(projects.map((proj) =>
proj.id === item.id ? { ...proj, endDate: text } : proj
))
}
/>
</View>
<TextInput
style={styles.descriptionInput}
 placeholder="Descrição"
value={item.description}
multiline
onChangeText={(text) =>
setProjects(projects.map((proj) =>
proj.id === item.id ? { ...proj, description: text } : proj
))
}
/>
<TextInput
style={styles.notesInput}
placeholder="Anotações"
value={item.notes}
multiline
onChangeText={(text) =>
setProjects(projects.map((proj) =>
proj.id === item.id ? { ...proj, notes: text } : proj
))
}
/>
</View>
)}
/>

<TouchableOpacity style={styles.addButton} onPress={addProject}>

<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
);
}

const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#fff',
padding: 20,
},
card: {
backgroundColor: '#f9f9f9',
borderRadius: 10,
padding: 15,
marginBottom: 20,
elevation: 3,
},
cardHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
 alignItems: 'center',
},
buttonContainer: {
flexDirection: 'row',
alignItems: 'center',
width: '80%',
},
completionCheckbox: {
width: 24,
height: 24,
borderWidth: 2,
borderColor: '#4caf50',
borderRadius: 4,
marginRight: 10,
alignItems: 'center',
justifyContent: 'center',
},
checked: {
backgroundColor: '#4caf50',
},
checkedText: {
color: '#fff',
fontSize: 16,
},
titleInput: {
fontSize: 18,
fontWeight: 'bold',
borderBottomWidth: 1,
borderColor: '#ccc',
paddingBottom: 5,
marginBottom: 10,
width: '80%',
},
deleteButton: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
marginLeft: 10,
},
deleteButtonText: {
color: '#fff',
fontSize: 18,
lineHeight: 22,
},
 dateContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
},
dateInput: {
width: '48%',
borderBottomWidth: 1,
borderColor: '#ccc',
paddingBottom: 5,
marginBottom: 10,
},
descriptionInput: {
height: 60, // Definindo uma altura maior para que apareçam duas linhas
borderBottomWidth: 1,
borderColor: '#ccc',
paddingBottom: 5,
marginBottom: 10,
},
notesInput: {
height: 90, // Definindo uma altura maior para que apareçam três linhas
borderBottomWidth: 1,
borderColor: '#ccc',
paddingBottom: 5,
marginBottom: 10,
},
addButton: {
position: 'absolute',
right: 20,
bottom: 20,
backgroundColor: '#C8A3D9',
width: 50,
height: 50,
borderRadius: 25,
alignItems: 'center',
justifyContent: 'center',
},
addButtonText: {
color: '#fff',
fontSize: 28,
lineHeight: 34,
},
});