React Native — Comunicação com módulos nativos (iOS)
Tags: javascript, reactnative, development, nativeapp
Published: 2023-09-08 20:22:57

---
title: React Native — Comunicação com módulos nativos (iOS)
published: true
date: 2020-12-29 16:23:10 UTC
tags: javascript,reactnative,development,nativeapp
canonical_url: 
---

### React Native — Comunicação com módulos nativos (iOS)

![](https://cdn-images-1.medium.com/max/1024/1*2LfbgI6v4FhPGIs9Pnmndg.png)
_Logo react native com uma mulher em cima_

### Módulos nativos

O post de hoje começa com uma pergunta, por que criar módulos nativos usando o react native ?

Se você trabalha com desenvolvimento mobile, em algum momento você irá esbarrar com alguma _lib_, algum _sdk_ que só possui versões pra Android ou iOS e você tem o aplicativo já em andamento com React Native.

Dado esse cenário, surge a necessidade de entender, estudar e aprender a criar a comunicação usando React Native, isso é possível e com isso a gente é capaz de extrapolar o comum e passar a desenvolver aplicativos mais poderosos ou até contribuir criando um pacote que não existia para abstrair o _SDK/Lib nativas_.

Para criar os módulos nativos temos duas opções, criar um pacote _NPM/Yarn_ ou criar o módulo nativo dentro do nosso projeto de aplicativo.

### Caso de uso

Nosso caso de uso será o _SDK_ do _Zoom.us_ onde vamos modificar um [pacote existente para react native](https://github.com/nagarro-dv/react-native-zoom-us-bridge). Com isso vamos criar novos métodos para suprir nossa necessidade. São métodos que existem no _SDK_, porém não existe no pacote que utilizamos para testar. Logo nosso time percebeu a necessidade de modificar o pacote pra atender nossas necessidades.

Primeiro passo foi estudar o código do pacote e estudar a [documentação oficial do React Native](https://reactnative.dev/docs) especificamente na parte de criação de módulos nativos, inclusive está sendo discutido uma nova arquitetura, chamada [_TurboModules._](https://github.com/react-native-community/discussions-and-proposals/issues/40)

Temos no código-fonte do pacote o seguinte trecho:

![](https://cdn-images-1.medium.com/max/913/0*4S40h3EAJ-o5XAq-)

Onde na linha um importamos o _NativeModules_ do _react-native_ e é a partir dele que temos acesso aos módulos nativos do iOS e Android, no nosso caso nesse primeiro artigo vamos focar no iOS. O alvo das nossas alterações será o _RNZoomUsBridge_ através dele vamos ter acesso as funções do _SDK._

Nosso alvo aqui é usar um _SDK_ já existente e usufruir dele, com isso nosso pacote só será a ponte entre o _React Native_ e o _SDK_, pra isso precisamos configurar um arquivo que irá dizer onde está o SDK, que no caso do iOS é a configuração do

_FRAMEWORK\_SEARCH\_PATHS._

O nome do arquivo que fica na raiz do pacote tem o mesmo nome do pacote e tem a extensão _.podspec._

![](https://cdn-images-1.medium.com/max/1024/0*aKIBvkNLk5zg5uTc)

Podemos ver na imagem acima, na linha vinte e cinco que configuramos o local do _ZoomSDK_ que vai ser instalado no projeto (aplicativo) e não no nosso pacote.

No pacote existem arquivos .h e .m, eles são arquivos responsáveis pela definição do módulo (.h) e o pela implementação do módulo (.m). O que interessa pro nosso caso de uso são o RNZoomUsBridge.h, RNZoomUsBridge.m, RNZoomUsManager.h e RNZoomUsManager.m.

Quando abrimos o primeiro arquivo temos o seguinte:

![](https://cdn-images-1.medium.com/max/812/0*RojUspDgEMYHFGeT)

Ele define que a interface RNZoomUsBridge vai ser um objeto RCTBridgeModule, que é importado diretamente do React.

Com isso podemos ir para implementação dessa interface que fica no arquivo RNZoomUsBridge.m:

![](https://cdn-images-1.medium.com/max/778/0*y1SKqetGXRyb3xmz)

No início do módulo temos as importações de outros módulos e ao ir mais para baixo desse módulo temos a implementação usando a assinatura do módulo do react native para ser entendido como um método no Javascript, o que chamamos de ponte.

O React usa o método abaixo para chamar, executar o módulo nativo, com isso temos uma implementação usando Promise, mas poderia ser outro tipo de implementação.

![](https://cdn-images-1.medium.com/max/737/0*WFn3-S5JcPRCN5m_)

Na linha cento e trinta e três dizemos o nome do método e o tipo de retorno, que no nosso caso é uma Promise, que pode dar certo ou errado. Se der certo a execução do método nativo não vamos retornar nada e se der errado mostramos uma mensagem de erro.

Podemos ver na linha cento e quarenta e um que chamamos o Manager e ele é responsável por executar nosso método hideMeeting.

Agora vamos olhar como está definido e implementado esse método no Manager.

![](https://cdn-images-1.medium.com/max/1018/0*xbwB4kKhAAEY32Du)

Como vimos anteriormente, os arquivos .h são definições das interfaces. Nela vamos definir quais métodos temos que implementar e utilizar.

Na nossa implementação do manager temos o seguinte:

![](https://cdn-images-1.medium.com/max/548/0*5Z_JSeJ6KvwfJ6qO)

Podemos ver que aqui importamos o _MobileRTC_, esse arquivo é importado diretamente do _SDK_ do _Zoom.us_ e com ele temos acesso a vários _métodos_, _interface_, _enums_ e tudo mais.

O que precisávamos pro nosso caso de uso era executar a ação de minimizar a tela de reunião do Zoom.us para executar outra ação. Lendo o código fonte do _SDK_ chegamos ao método _showMinimizeMeetingFromZoomUIMeeting_ e para implementar isso escrevemos o seguinte trecho:

![](https://cdn-images-1.medium.com/max/680/0*ysyNovq5GYoEpV0K)

Nesse método definimos ele como assíncrono e definimos quando ele irá parar a execução (definir como completa) usando [completionBlock.](https://developer.apple.com/documentation/foundation/operation/1408085-completionblock) Foi instanciado o objeto _ms_ que é referente ao _meetingService_ que é a reunião em execução e nele executamos a ação para minimizar a janela com **[ms showMinimizeMeetingFromZoomUIMeeting]** e para facilitar a leitura, deixamos alguns logs para identificar se tudo está ocorrendo como o esperado.

### Conclusão

Com isso vimos como usufruir de módulos nativos usando _objective-C_ e _SDK_ nativo. Claro que isso exige um mínimo de conhecimento das linguagens nativas de cada plataforma e pode parecer assustador no início. Esse foi um caso real que foi necessário ser feito para atingir os objetivos da nossa aplicação e a lib modificada pode ser encontrada nesse [repositório](https://github.com/iagocavalcante/react-native-zoom-us-bridge).

Para quem vem da web ou já tem familiaridade com React Native, vale a pena entender como a ponte (bridge) funciona e como a gente pode desenvolver apps melhores usufruindo desse poder.

Por hoje é só, até mais pessoal.

* * *