DEV Community 👩‍💻👨‍💻

Yslan Ramos
Yslan Ramos

Posted on • Updated on

KeyboardAvoidingView: controle a posição do teclado no React-Native

No React-Native (RN), principalmente quando criamos formulários, precisamos garantir que os inputs não se escondam atrás do teclado virtual do celular. Para isso, usamos o componente nativo do RN chamado KeyboardAvoidingView.

Em seguida, vemos um simples código RN com um Input de texto e um botão:

import React from 'react';
import { View, TextInput, Button } from "react-native"

const App = () => {
  return (
    <View>
      <TextInput />
      <Button />
    </View>
  )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Aqui, um exemplo visual do resultado desse código:

Mobile

Nesse código, em específico, quando clicamos no Input de texto para digitar algo, o teclado virtual sobrepõe o botão:

Mobile with open virtual keyboard

Isso é um problema, pois para conseguir clicar no botão, o usuário teria que fechar o teclado. Para resolvermos isso, precisamos mudar nosso layout quando o teclado estiver aberto para caber na tela. O KeyboardAvoidingView faz exatamente isso! Com ele, contralamos oq será exibido com o teclado aberto:

KeyboardAvoidingView é um componente nativo do RN, sendo assim, importamos diretamente da biblioteca do react-native:

import React from "react";
import { View, TextInput, Button, KeyboardAvoidingView  } from "react-native";

const App = () => {
  return (
    <View>
      <KeyboardAvoidingView behavior="padding">
        <TextInput />
        <Button />
      </KeyboardAvoidingView>
    </View>
  )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Automaticamente, o KeyboardAvoidingView ajeita todos os seus componentes filhos para que sejam exibidos adequadamente:

Mobile With KeyboardAvoidingView

No codigo anterior, estou passando uma propriedade chamada behavior para o KeboardAvoidingView , que contém 3 estados diferentes:

  • position;
  • height;
  • padding.

Cada estado tem um comportamento diferente no iOS e no Android. Por causa dessa variação, não vou entrar em detalhes sobre cada um deles. Você pode tentar todos os estados acima e selecionar os adequados para o seu caso de uso, mas na maioria dos casos, o padding será suficiente.

Extra

Quando o teclado está sendo exibido, uma experiência normal que queremos no nosso app é que o teclado feche quando clicamos fora do input de texto. Para isso, usaremos o componente TouchableWithoutFeedback . Diferente do TouchableOpacity, esse componente não tem interação visual quando é acionado, perfeito para nosso caso! Quando o usuario clicar fora do input de texto, não queremos que nossa tela pisque ou demostre um comportamento de click.

Dentro do nosso KeyboardAvoidingView, adicionaremos nosso TouchableWithoutFeedback:

import React from 'react';
import { View, TextInput, Button, KeyboardAvoidingView,
  TouchableWithoutFeedback,
  Keyboard } from "react-native"

const App = () => {
  return (
    <View>
      <KeyboardAvoidingView behavior="padding">
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}> 
          <TextInput />
          <Button />
        </TouchableWithoutFeedback>
      </KeyboardAvoidingView>
    </View>
  )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Quando o usuário clicar na tela, o onPress será disparado e executaremos a função Keyboard.dismiss do RN, que fecha o teclado virtual.

Conclusão

O principal objetivo de usar o componente KeyboardAvoidingView é garantir que seus campos de entrada ou botões não se escondam atrás do teclado. Isso é usado para que sempre que um usuário toque no campo de texto, o teclado seja aberto e o campo será levantado para mostrar acima do teclado, melhorando a experiencia do usuário.

Referências

KeyboardAvoidingView

Using the KeyboardAvoidingView in React Native

Using KeyboardAwareScrollView and KeyboardAvoidingView in React Native

Top comments (2)

Collapse
 
aninhapardini profile image
Ana Luiza Pardini

Me ajudou pakas! Obrigadaaa s2

Collapse
 
guilherme03 profile image
Guilherme Duarte

Na minha aplicação RN, o teclado fecha quando toco/clico fora do input, mas, essa ação de clicar deve ser feita duas vezes. Por exemplo, nesse comentário que estou fazendo: se fosse dentro do meu app, após finalizar a digitação e clicar em "submit", apenas o teclado desapareceria. Um segundo toque em "submit" faria a ação do botão. Gostaria que a ação do botão ocorresse logo no primeiro toque, mesmo com o teclado aberto. Entendo que pensando na experiência do usuário é muito mais agradável. Tem algum conselho?

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!