TextInput

O componente TextInput em React Native é usado para capturar a entrada de texto do usuário. Ele fornece uma maneira simples de coletar dados de texto de usuários em formulários e outros campos de entrada de texto. Aqui está um exemplo básico de como usar o componente TextInput:

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

const MeuComponente = () => {
  const [texto, setTexto] = useState('');

  const onChangeText = (novoTexto) => {
    setTexto(novoTexto);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Digite aqui"
        onChangeText={onChangeText}
        value={texto}
      />
      <Text>Você digitou: {texto}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    width: 300,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 10,
  },
});

export default MeuComponente;

Neste exemplo, o componente TextInput está vinculado a um estado (texto) usando o hook useState. A função onChangeText é chamada sempre que o texto é alterado no campo de entrada e atualiza o estado texto. O valor atual do estado texto é exibido na tela.

Principais Propriedades do TextInput:

• value: Valor do campo de texto (deve ser controlado usando um estado).
• onChangeText: Função chamada sempre que o texto é alterado.
• placeholder: Texto exibido no campo de texto quando ele está vazio.
• secureTextEntry: Se verdadeiro, o texto será ocultado (útil para senhas).
• keyboardType: Tipo de teclado a ser exibido (por exemplo, ’numeric’, ’email-address’, etc.).
• multiline: Se verdadeiro, permite entrada de várias linhas de texto.
• editable: Se verdadeiro, o campo de texto pode ser editado; se falso, ele é somente leitura.
• onSubmitEditing: Função chamada quando o usuário pressiona “Enviar” no teclado.
• autoFocus: Se verdadeiro, o campo de texto será focado automaticamente quando o componente for montado.

Estas são apenas algumas das propriedades disponíveis. Você pode consultar a documentação oficial do React Native para obter uma lista completa de propriedades e detalhes sobre o componente TextInput.