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;
Leave a Comment