ReactiNative ListView

import { StatusBar } from 'expo-status-bar';

import { useState } from 'react';

import { Button, StyleSheet, Text, View,TextInput,ScrollView, } from 'react-native';

export default function App() {

  const [enteredGoalText, setEnteredGoalText] = useState('');

  const [courseGoals,setCourseGoals] = useState([]);

  function goalInputHandler(enterdText){

    setEnteredGoalText(enterdText);

  };

  function goalAddHandler(){

    setCourseGoals(currentCourseGoal => [

              ...currentCourseGoal,

              enteredGoalText,

            ]);

  };

  return (

    <View style={styles.appContainer}>

        <View style={styles.inputContainer}>

          <TextInput style={styles.textInput}

                     placeholder="Your course is here"

                     onChangeText={goalInputHandler} />

         

          <Button title='Sumbit' onPress={goalAddHandler}/>

        </View>

        <View style={styles.goalsContainer}>

          <ScrollView alwaysBounceVertical={false}>

                  {courseGoals.map((goal)=>

                      <View  key={goal} style={styles.goalItem}>

                        <Text style={styles.goleText}>{goal}</Text>

                      </View>

                    )}

          </ScrollView>

        </View>

    </View>

  );

}

const styles = StyleSheet.create({

    appContainer:{

      flex:1,

      paddingTop:20,

      paddingHorizontal:16,

    },

    inputContainer:{

      flex:1,

      flexDirection:'row',

      justifyContent:'space',

      alignItems:'center',

      padding:24,

      borderBottomWidth:1,

      borderBottomColor:'#cccccc',

      borderPaddingLef:24

    },

    textInput:{

      borderWidth:2,

      borderColor:'#cccccc',

      width:'70%',

      marginRight:8,

      padding:8,

    },

    goalsContainer:{

        flex:4

    },

    goalItem:{

      margin:8,

      padding:8,

      borderRadius:6,

      backgroundColor:'#5e0acc',

      color:'white',

    },

    goleText:{

        color:'white',

    },

    listTxt:{

      paddingLeft:24,

      paddingTop:10

    }

});