TextInput

Nesta aula veremos como criar campos que permitam a inserção de dados.

Criando campo

No react native o campo de inserção de texto é denominado de 'TextInput', que funciona de forma similar ao 'Input' do HTML. Acompanhando a aula, implemente, no arquivo "App.js", o componente abaixo:

function Input() {
  return (
    <View>
      <TextInput>

      </TextInput>
    </View>
  )
}

Com esse componente básico inserido no componente principal, o App, será possível inserir informações no campo de texto.

Gerenciando o estado

Embora seja possível ver o texto sendo digitado no campo, ainda não estamos gerenciando o estado. Para fazer isso, utilizaremos um Hook denominado de useState( ), assim como no React tradicional.

Para visualizarmos melhor, de maneira provisória, podemos fazer uma estilização da caixa de texto.

Acompanhando a aula, implemente as modificações e ao final seu arquivo deve ficar como se observa abaixo:

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

export default function App() {
  return (
    <SafeAreaView>
      <Welcome />
      <Input />
    </SafeAreaView>
  );
}

function Input() {

  const [text, setText] = useState('')

  return (
    <View>
      <TextInput style={{ height: 40 }} placeholder="Digite aqui seu nome" value={text} onChangeText={(text) => setText(text)}>
      </TextInput>
      <Text>{text}</Text>
    </View>
  )
}

function Welcome() {
  return (
    <View>
      <Text>Bem vindo!</Text>
    </View>
  )
}