text: import React, {useState} from 'react';
  import { Keyboard, KeyboardAvoidingView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
  import Tasks from './components/Task';
  
  export default function App() {
  
    const [task, setTask] = useState();
    const [taskItems, setTaskItems] = useState([]);
  
    const handleAddTask = () => {
      Keyboard.dismiss();
      setTaskItems([...taskItems, task]) 
      setTask(null); 
    }
  
    const completeTask = (index) => {
      let itemsCopy = [...taskItems];
      itemsCopy.splice(index,1);
      setTaskItems(itemsCopy);
    }
  
    return (
      <View style={styles.container}>
        <View style={styles.taskWrapper}>
          <Text style={styles.sectionTitle}>My Tasks</Text>
          <View style={styles.items}>
            {
              taskItems.map((item,index) =>{
                return(
                  <TouchableOpacity key={index} onPress={() => completeTask(index)}>
                    <Tasks text={item}/>
                  </TouchableOpacity>
                )
              })
            }
          </View>
        </View>
        <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={styles.writeTextWrapper}
        >
          <TextInput style={styles.input} placeholder="Write the task here!" value={task} onChangeText={text => setTask(text)} />
          <TouchableOpacity onPress = {() => handleAddTask()}>
            <View style={styles.addWrapper}>
              <Text>+</Text>
            </View>
          </TouchableOpacity>
        </KeyboardAvoidingView>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#DFEEEA',
    },
    taskWrapper: {
      paddingTop: 80,
      paddingHorizontal: 20
    },
    sectionTitle: {
      fontSize: 24,
      fontWeight: 'bold',
      color: '#2F5D62'
    },
    items: {
      marginTop: 30
    },
    writeTextWrapper: {
      position: "absolute",
      bottom : 20,
      width: "100%",
      flexDirection: 'row',
      justifyContent : 'space-around',
      alignItems: 'center'
    },
    input: {
      paddingVertical: 15,
      paddingHorizontal: 25,
      backgroundColor: '#fff',
      borderRadius: 60,
      borderColor: '#C0C0C0',
      borderWidth: 1,
      width: 250,
    },
    addWrapper: {
      width: 60,
      height:60,
      backgroundColor: '#fff',
      borderRadius: 60,
      justifyContent: 'center',
      borderColor: '#C0C0C0',
      borderWidth: 1,
      alignItems: 'center'
    }
  });
  