Skip to content
Snippets Groups Projects
Commit 76296960 authored by Fionn McGoldrick's avatar Fionn McGoldrick
Browse files

Adding task is in App.js now possible within App.js

parent 908372ec
No related branches found
No related tags found
No related merge requests found
import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native'; import { View, TextInput, Button, FlatList, Text, StyleSheet, TouchableOpacity } from 'react-native';
export default function App() { export default function App() {
const [task, setTask] = useState('');
const [tasks, setTasks] = useState([]);
const addTask = () => {
if (task.trim()) {
setTasks([...tasks, { id: Date.now().toString(), text: task }]);
setTask('');
}
};
const removeTask = (id) => {
setTasks(tasks.filter((t) => t.id !== id));
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text> <TextInput
<StatusBar style="auto" /> style={styles.input}
placeholder="Enter a task"
value={task}
onChangeText={setTask}
/>
<Button title="Add Task" onPress={addTask} />
<FlatList
data={tasks}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => removeTask(item.id)}>
<Text style={styles.task}>{item.text}</Text>
</TouchableOpacity>
)}
/>
</View> </View>
); );
} }
...@@ -13,8 +41,20 @@ export default function App() { ...@@ -13,8 +41,20 @@ export default function App() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
paddingTop: 50,
paddingHorizontal: 20,
backgroundColor: '#fff', backgroundColor: '#fff',
alignItems: 'center', },
justifyContent: 'center', input: {
borderBottomWidth: 1,
marginBottom: 10,
padding: 8,
},
task: {
fontSize: 18,
padding: 10,
backgroundColor: '#eee',
marginVertical: 5,
borderRadius: 5,
}, },
}); });
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment