Usando KeyboardAwareScrollView em React Native

Muitas vezes criamos um formulário em React Native e gostaríamos que ele tivesse funções que embora simples complementam o uso da aplicação. Uma delas é uma ScrollView que lida com a aparência do teclado e rola automaticamente para o TextInput listado. Neste artigo iremos ver como fazer isso, utilizando a biblioteca react-native-keyboard-aware-scroll-view.

Instalando a Biblioteca -

A instalação pode ser feita através npm e de ou yarn:

npm i react-native-keyboard-aware-scroll-view --save
yarn add react-native-keyboard-aware-scroll-view

Iniciando o uso da Keyboard-aware-scroll-view -

Você pode usar o KeyboardAwareScrollView, KeyboardAwareSectionListou os KeyboardAwareFlatList componentes. Eles aceitam props ScrollView, SectionListe FlatListdefault respectivamente e implementam um componente personalizado de alta ordem chamado KeyboardAwareHOC para lidar com a aparência do teclado. O componente de alta ordem também está disponível se você quiser usá-lo em qualquer outro componente.

Importe react-native-keyboard-aware-scroll-view e envolva seu conteúdo dentro dele:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Rolagem automática nos campos de TextInput -

A partir de v0.1.0, o componente rola automaticamente para o foco TextInput. Para versões v0.0.7e anteriores, você pode fazer o seguinte. Para rolar para qualquer TextInputcampo, você pode usar o método interno scrollToFocusedInput. Exemplo:

_scrollToInput (reactNode: any) {
  // Add a 'scroll' ref to your ScrollView
  this.scroll.props.scrollToFocusedInput(reactNode)
}

<KeyboardAwareScrollView
  innerRef={ref => {
    this.scroll = ref
  }}>
  <View>
    <TextInput
      onFocus={(event: Event) => {
        // `bind` the function if you're using ES6 classes
        this._scrollToInput(ReactNative.findNodeHandle(event.target))
      }}
    />
  </View>
</KeyboardAwareScrollView>

Role para qualquer posição -

Há outra função integrada que permite rolar programaticamente para qualquer posição da exibição de rolagem:

this.scroll.props.scrollToPosition(0, 0)

Você pode utilizar em ScrollViewResponder eventos onKeyboardWillShowe e onKeyboardWillHide:

<KeyboardAwareScrollView
  onKeyboardWillShow={(frames: Object) => {
    console.log('Keyboard event', frames)
  }}>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Espero que este artigo tenha o ajudado, e agradeço pela leitura até aqui.