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
}
});
