Executando verificação de segurança...
1
jovimoura
1 min de leitura ·

NAO TENHO IDEIA DE COMO LIDAR COM TECLADOS NO REACT NATIVE COM EXPO

Fala galera, blz?

Ultimamente estou desenvolvendo mais projetos mobile com react native e uma coisa q smp tive problema foi com comportamento do teclado tanto para android quanto para ios.

Ja tentei de tudo, criar um Wrapper para aumentar o espaco entre teclado e tela, animacoes, adicionar padding usar o Keyboard da lib nativa do react-native e ainda sim nao me sinto q resolvi esse problema de fato, sinto q estou apenas empurrando uma má funcionalidade com a barriga.

Entao queria saber de voce q trabalha com react native, oq vc faz? como vc lida com teclado? tem alguma dica ou um componente que vc criou para lidar com isso? ou alguma boa pratica/dica p me dar?

Carregando publicação patrocinada...
2
1
jovimoura
  • Autor
    Autor

Quando tenho mais de um input ou quando a tela n é muito "alta", o teclado fica por cima do input e oq eu queria é q quando clicar no input a tela scrollasse para cima deixando um gap pequeno entre teclado e input selecionado

2
scheremetta

Uma coisa que fazemos é colocar as telas que utilizam funcionalidade de teclado dentro de uma ScrollView para poder ter o rolamento para caso precise ver outros campos (poder descer a tela).

Gosto também de utilizar a lib que faz com que a ScrollView "desça" até o Input, confira um artigo de implementação.

Nossa implementação desse componente coringa, fica assim:
(lembrando que esse Keyboard funciona como uma ScrollView)

<KeyboardAwareScrollView
    // espaço extra pra "empurrar" e fazer esse padding pra quando o teclado aparecer
    extraHeight={Platform.OS === 'ios' ? 350 : 100}
    // ativa o comportamento no Android
    enableOnAndroid={true}
    // quando o teclado eh fechado, ele volta pra posicao inicial
    resetScrollToCoords={{ x: 0, y: 0 }}
    // tempo de delay pra aparecer
    keyboardOpeningTime={50}
    // aqui é os estilos do container da View
    contentContainerStyle={[
        {
            flexGrow: 1,
            padding: SPACINGS.SCREEN_PADDING,
        },
        contentContainerStyle,
    ]}
    // estilo da própria scrollview
    style={[style, { padding: 10, paddingBottom: safeAreaInsets.bottom }]}
    {...props}>
    {children}
</KeyboardAwareScrollView>

Qualquer dúvida, fico disponível para trocar uma ideia no Linkedin (/fscheremetta).

1
1
scheremetta

espero que tenha dado tudo certo!

mas mexer com essas coisas é chato mesmo haha

comecei a estudar e mexer com SwiftUI e o teclado buga magicamente... é a vida né