flatlist react native

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

import { useState } from 'react';

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

// import { LinearGradient } from 'expo-linear-gradient';

export default function App() {

  const [goal,setgoal]=useState('');

  const [CourseGoal,setCourseGoal]=useState([]);

  const goalInputHandler=(enterdText)=>{

    // console.log(enterdText);

setgoal(enterdText);

  }

  const addGoalHandler=()=>{

    // console.log(goal);

    setCourseGoal(prevGoal=>[...prevGoal,{text:goal,id:Math.random().toString()}]);

    // console.log(CourseGoal);

  }

  return (

   

    <View style={styles.container}>

      {/* <View style={styles.container1}>

      <Text>good morning sir</Text>

      </View>

      <Text style={{margin:20,borderWidth:2,borderColor:'red',padding:16}}>good morning sir</Text>

      <View style={{width:"50%",marginLeft:"20%"}}>

      <Button  title="Tap Me" color="#841584" />

      </View>

      <Text style={styles.container1}>hello</Text> */}

      {/* <StatusBar style="auto" /> */}

      <View style={styles.container1}>

      <TextInput placeholder='enter your goal' style={styles.input}  onChangeText={goalInputHandler}/>

     <View style={{padding:"20"}}><Button title='add goal' color="#ff0034" onPress={addGoalHandler} /></View>

     </View>

     <View style={styles.container2}>

      {/* <Text>list of goals... </Text> */}

{/* <ScrollView >

 

    {

CourseGoal.map((e,index)=> <View key={index} style={styles.goalItem}><Text style={styles.goalItemtext}>{e}</Text></View>)

    }

   

</ScrollView> */}

<FlatList data={CourseGoal} renderItem={(itemData)=>{return(

  <View style={styles.goalItem}><Text style={styles.goalItemtext}>{itemData.item.text}</Text></View>

);

}}

keyExtractor={(item,index)=>{

  return item.id

}}

/>

 

 

   

</View>

{/* <LinearGradient

       

        colors={['#45485', '#3b5998', '#192f6a']}

        style={styles.button}>

        <Text style={styles.text}>Sign in with Facebook</Text>

      </LinearGradient> */}

{/* <StatusBar style="auto" /> */}

   

    </View>

   

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    margin:30,

   

    // backgroundColor: '#fff',

    // alignItems: 'center',

    // justifyContent: 'center',

  // backgroundImage:'linear-gradient(to bottom,#ff0000,#0000ff)',

  },

  input:{

marginBottom:12,

borderWidth:1,

height:40,

width:'80%',

padding:8,

marginRight:5

},

  container1: {

    marginTop:10,

    flexDirection:'row',

    justifyContent:'space-between',

    margin:2,

    flex:1,

    borderBottomWidth:1,

    // backgroundColor:'gray'

  },

  container2:{

    flex:5,

    // backgroundColor:'green'

  },

  goalItem:{

    backgroundColor:'#5e0acc',

   

    margin:8,

    padding:8,

    borderRadius:7

  },

  goalItemtext:{

    color:'white',

  }

});