React Native: criando módulo nativo Android com Kotlin

Faaala, galerinha! Tudo bem por aí? Hoje iremos ver como criar um módulo nativo Android para React Native, porém usando Kotlin! Bora lá?

Primeiramente é preciso ter instalado o React Native e o Kotlin na máquina que irá utilizar. Caso não tenham, podem ser instalados em https://reactnative.dev/docs/environment-setup e https://kotlinlang.org/docs/tutorials/command-line.html respectivamente. 

INTRODUÇÃO

Mas porque utilizar pedaços de código nativo Android quando o React Native permite o desenvolvimento híbrido para Android e iOS? Bom, não há nenhuma dúvida de que o React Native é uma ótima ferramenta para o desenvolvimento híbrido mobile, porém há vezes em que somente ele não consegue proporcionar o que queremos atingir, seja uma funcionalidade específica ou a utilização de algum recurso existente nativamente (seja Android ou iOS), como por exemplo aquela notificação comum em aplicativos de conversa onde fica uma bolinha flutuando quando o aplicativo é minimizado (chamado também de bubble notification).

ESCOLHENDO BIBLIOTECA

Então sem mais delongas vamos começar a criação do nosso módulo nativo, que será bem simples mas será de grande valia para mostrar como utilizar Kotlin e React Native juntos. O módulo que iremos criar será para mostrar um Toast de forma totalmente nativa, bora lá!

Existem algumas bibliotecas que ajudam a começar o desenvolvimento de um módulo nativo para react native, como react-native-create-library (que foi descontinuada), create-react-native-module, @react-native-community/bob, entre outras.

Iremos utilizar a última biblioteca citada, @react-native-community/bob, pois além de já possuir suporte para Kotlin Android, ainda conta com algumas outras bibliotecas úteis já inclusas que podem ajudar muito no desenvolvimento dos módulos.

INICIANDO MÓDULO

Para instalar a biblioteca basta acessar https://github.com/callstack/react-native-builder-bob e seguir os passos, inclusive qualquer dúvida e mais detalhes sobre como utilizar estarão neste link citado. Caso utilizem npx, não haverá necessidade de instalar a biblioteca.

Para iniciar a criação de um novo módulo, basta rodarmos o comando @react-native-community/bob create nome-do-nosso-módulo (para quem utiliza npx, basta colocar npx antes de tudo). Como será um módulo que implementará o Toast nativo, o nome será react-native-awesome-toast. 

Logo ao rodar o comando haverão algumas perguntas sobre o módulo que estamos criando que precisam ser respondidas, como nome do package, nome do autor, link do repositório, entre outras. Como estamos fazendo um módulo de teste, basta apertar a tecla Enter para as perguntas (caso a pergunta exigir uma resposta, terá que ser preenchida para continuar).

Depois de responder as perguntas precisamos escolher como será feito o módulo, e dentre as opções existentes, iremos selecionar a primeira (Native module in Kotlin and Objective-C), mas qualquer opção que tiver Native module in Kotlin já satisfaria os requisitos pois iremos trabalhar somente na parte Android com Kotlin.

Depois de escolher como será o módulo aparecerá uma mensagem parecida com a que está acima, informando que o projeto foi criado com sucesso, e que para começar precisamos rodar yarn bootstrap.

Para iniciarmos então basta acessarmos a pasta do projeto e rodarmos o comando yarn bootstrap. Esse script pré definido com a biblioteca irá instalar tudo que é preciso para começarmos a criar o módulo!

ENTENDENDO O PROJETO

Após termos instalado tudo, vamos abrir a pasta do nosso projeto em algum editor de códigos preferido para analisarmos. Ao abrir, pode-se identificar algumas pastas, e por hora iremos nos atentar nas pastas example, android e src.

A pasta example contém exemplos de aplicação React Native que utilizam o módulo Android e iOS que iremos criar, a pasta android (logo na raíz do projeto) contém a parte que iremos modificar diretamente com código em Kotlin e a pasta src (também logo na raíz do projeto) contém um arquivo index.tsx (Typescript) que define os métodos e propriedades do nosso módulo que serão acessadas pelo Javascript.

Dentro da pasta android da raíz do projeto há outras pastas, mas nosso foco está na pasta src, que adentrando até java/com/nomedonossomodulo serão encontrados 2 arquivos .kt (extensão do Kotlin). Os arquivos sempre terão como padrão NomeDoNossoModuloModule.kt e NomeDoNossoModuloPackage.kt.

O arquivo com final Package é responsável por conectar componentes nativos ao nosso aplicativo React Native (Javascript) utilizando de dois métodos: createNativeModules e createViewManagers. 

CreateNativeModules é o método responsável por adicionar um módulo novo na lista de módulos nativos que podem ser acessados pela nossa aplicação Javascript (no caso é o arquivo com final Module que já iremos ver).

CreateViewManagers é o método responsável por adicionar Views nativas diretamente na nossa aplicação Javascript, mas como nosso método não utilizará Views, iremos deixar esse método de lado.

Por fim, o arquivo com final Module é o que iremos modificar diretamente, adicionando métodos que serão chamados pelo Javascript e que implementarão códigos nativos em Kotlin, ou seja, é o arquivo que irá criar de fato nosso módulo. Dentro dele já há 2 métodos implementados: getName (que é um método override para explicitar ao Javascript como o método será chamado) e multiply (que é um método criado para teste, onde multiplica dois números que são enviados através do nosso código Javascript).

DESENVOLVENDO MÓDULO

Para começar, vamos apagar o método multiply (se existir). Como todo bom módulo que mostra um Toast qualquer, ele tem um método que pega um texto e com uma certa duração, mostra a mensagem. Então bora fazer esse método em Kotlin!

Como podemos ver na imagem acima, foi implementado o método show, que é um método react, ou seja, um método que é possível de ser acessado pelo React Native pois tem a anotação @ReactMethod em cima. Esse método implementa o Toast do Android (importação: android.widget.Toast) que tem como método o makeText, que recebe um contexto, uma string, e a duração do Toast). E por fim, para mostrar de fato o Toast, basta acessarmos o .show() no final. Obs: getReactApplicationContext() é um método do React Native que retorna o contexto da nossa aplicação.

Para tornarmos mais didático e prático, vamos criar constantes pré definidas para serem acessadas, que indicarão se a duração será longa ou curta.

CRIANDO CONSTANTES

Para criar constantes pré definidas para nosso módulo precisamos sobrescrever um método chamado getConstants(), que retorna às constantes, se houver, para serem acessadas pelo Javascript.

Como mostra a imagem acima, o método getConstants() foi sobrescrito, retornando um Map que contém duas propriedades: o conteúdo da variável short_duration (SHORT_DURATION) e o conteúdo da variável long_duration (LONG_DURATION), onde se referem a Toast.LENGTH_SHORT e Toast.LENGTH_LONG respectivamente. 

Como a biblioteca que estamos utilizando ajuda em muita coisa, ela também traz uma forma de tipagem para nosso módulo, e como modificamos algumas propriedades precisamos alterar de acordo. Essa tipagem está dentro da pasta src (raíz do projeto), no arquivo index.tsx. O arquivo estará de acordo com a imagem a seguir:

É bem simples modificar essa tipagem do nosso módulo, bastando colocar qualquer método ou propriedade em AwesomeToastType, como a imagem:

ALTERANDO APLICAÇÃO

Depois disso, podemos finalmente utilizar nosso método na nossa aplicação React Native! Vamos alterar o arquivo App.tsx dentro de example/src.

O código acima é o como deve ficar o arquivo App.tsx, e apesar de ter várias modificações, elas foram feitas para tornar mais visual o uso do nosso módulo, que é o foco aqui. Agora bora rodar nosso aplicativo!

E com isso implementamos nosso módulo nativo em Kotlin! Ainda tem formas de dar callback e utilizar promises para tornar os métodos mais usáveis, mas ficará para uma próxima. Espero que tenham gostado, e qualquer coisa só comentar aí!