Untitled

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

const App = () => {
  const [text, setText] = useState('');
  const addItems=()=>setText(text);
  let name=[{key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},]

          
  


  return (
    <View style={styles.container}>
      <Text style={styles.header}>TODO LIST</Text>
      <View style={styles.inputBtnContainer}>
        <TextInput style={styles.input} onChangeText={setText} value={text} />
        <TouchableOpacity style={styles.roundButton}
        onPress={addItems}>
          <Text style={styles.addBtnIcon}>+</Text>
        </TouchableOpacity>
      </View>

<FlatList data={name}
renderItem={({item}) =><Text style={styles.textBox}>{item.key}</Text> }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    margin:20
  },
  header: {
    marginTop: 20,
    marginBottom:20,
    fontSize:22,
    textAlign: 'center',
  },
    inputBtnContainer: {
    flexDirection:'row',
    justifyContent:'space-evenly'
  },
  input: {
    height: 50,
    width: 250,
    borderRadius:8,
    borderColor:'purple',
    borderWidth: 1,
  },
  roundButton: {
    height: 35,
    width: 35,
    marginTop:5,
    marginStart:10,
    borderRadius: 30,
    borderWidth:0.5,
    borderColor:'purple'
  },
  addBtnIcon: {
    fontSize:25,
    textAlign:'center'
    },
  textBox:{
    height: 50,
    width: 250,
    padding:5,
    marginTop:50,
    borderRadius: 5,
    borderWidth:0.5,
    borderColor:'purple' 
  },  
});
export default App;