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

export default function AddLista({ addTodos}) {
  const [text, setTexto] = useState('');

  const changeHandler = (val) => {
    setTexto(val);
  };
  const guardar = (val) => {
	Keyboard.dismiss();
    setTexto("");
	addTodos(text);
  };

  return (
    <View>
      <TextInput 
        style={styles.input} 
        placeholder='new to do...'
        onChangeText={changeHandler} 
        value={text} 
      />
      <Button color='coral' onPress={() => guardar(text)} title='add' />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    marginBottom: 10,
    paddingHorizontal: 8,
    paddingVertical: 6,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
});