---
title: "Domando o teclado"
description: "Entrando em um app com milhões de usuários e unificando o gerenciamento do teclado como minha primeira grande contribuição."
url: "https://ianbandeira.dev/pt-br/projects/character-ai/stories/taming-the-keyboard"
language: "pt-BR"
---

# Domando o teclado

Entrando em um app com milhões de usuários e unificando o gerenciamento do teclado como minha primeira grande contribuição.

Ao longo da minha carreira, eu sempre construí coisas do 0 ao 1. Desde o começo. Montar a arquitetura do projeto, prototipar em baixa/alta fidelidade, passar pelo processo de build e, no fim, chegar em prod. Essa era a minha especialidade (e ainda é), mas na época também era uma limitação.

Então, entrei na c.ai. **Milhões de usuários, milhões de dispositivos.** Uma comunidade construída em volta de um app que já era, fazia anos, o maior app de chat com IA. Nada de Expo, só React Native bare. Um backend que eu nem ousava rodar localmente. Uma hierarquia já estabelecida quando o assunto era quem era dono do quê na codebase.

E lá estava eu, diante do dilema difícil de querer ser reconhecido pelo que minhas habilidades valem, o que sempre funcionou no passado para destacar, entre meus colegas, o nível de software que eu era capaz de construir, e tentando ao máximo não cagar tudo logo de cara.

## Então, como eu fiz isso?

Nas minhas duas primeiras semanas, me limitei a fazer coisas pequenas na codebase (como se deve, para entender o que realmente está acontecendo, o típico processo de onboarding) enquanto comecei a identificar as dores daquela codebase enorme.

A primeira que eu peguei tinha a ver com o **gerenciamento do teclado**. Na época, estávamos no processo de criar uma nova interface de chat, reformulando completamente todos os sistemas que existiam na legada. Isso significava que os componentes de gerenciamento do teclado eram uma teia de componentes tentando atender ao gerenciamento do teclado dos dois chats, junto com implementações customizadas para ter keyboard avoiding views nos bottom sheets legados, nos bottom sheets novos (do [gorhom](https://github.com/gorhom/react-native-bottom-sheet)), em modais, formulários, scrollviews, e por aí vai.

**Era um pesadelo.**

Aí comecei a propor o [React Native Keyboard Controller](https://kirillzyusko.github.io/react-native-keyboard-controller/) como a nossa **source of truth** quando o assunto era gerenciamento do teclado. O pessoal curtiu a ideia, então comecei a trabalhar nisso.

Acontece que eu não fazia ideia de quantas partes do app o gerenciamento do teclado tocava e, mesmo olhando o código e colocando a substituição no lugar, era um pesadelo descobrir como chegar em tal tela, e como descobrir de fato quais telas eram realmente acessíveis ou se eram código legado deixado para trás. Não tinha GitHub stacks na época, então fiquei preso no _rebase hell_ por um bom tempo, tentando me manter na minha tarefa enquanto também tentava limpar as telas legadas que eu encontrava.

Então, depois de **exatamente um mês** de vai e vem de reviews, testes, **45 commits** e **milhares de LOC's**, conseguimos lançar. Tivemos algumas regressões em coisas pequenas depois do lançamento, mas nada grave, tipo quebrar prod por completo.

Não foi tão perceptível para a comunidade, mas em termos de DX foi uma melhoria incrível, que continuou gerando valor mesmo um ano depois do lançamento da reformulação do chat. Com o tempo, também mexi em um monte de partes do app ligadas a essa reformulação do chat, e nós (o time de chat) conseguimos fazer uma baita melhoria na principal feature do app.

<BeforeAfter
  before="/stories/character-ai/chat-before.png"
  beforeAlt="O chat legado: balões escuros simples, avaliação por estrelas embaixo da última resposta e uma barra de mensagem básica."
  beforeLabel="Antes"
  after="/stories/character-ai/chat-after.png"
  afterAlt="O chat reformulado: balões translúcidos sobre um papel de parede ilustrado em tela cheia, com controles de voz e de reação."
  afterLabel="Depois"
  caption="O chat, antes e depois da reformulação."
/>

[Character.AI](https://ianbandeira.dev/pt-br/projects/character-ai.md)