Aprenda a criar Modulos Nativos (Native Modules) do Android no React Native. Aprenda a criar uma ponte entre código escrito em Java no Android e código escrito em JavaScript no React Native. Ensina o básico de como criar um Modulo Nativo com função para mostrar uma notificação Toast do Android. Serve de base para criar qualquer módulo nativo. Quando o React Native ainda não tiver a funcionalidade ou você precisar de performance, podes criar um Native Module e fazer uma ponte entre o Java e o JavaScript!

Modulos Nativos do Android no React Native (Native Modules)

Modulos Nativos do Android no React Native - Aula de Native Modules

```markdown
# Resumo do Mini Curso sobre Módulos Nativos no React Native

Neste mini curso, vamos aprender sobre **módulos nativos** no **React Native**, focando especificamente na plataforma **Android**. O objetivo é criar um módulo nativo simples que permitirá a interação entre código **Java** do Android e código **JavaScript** do React Native.

## Motivos para Usar Módulos Nativos

Existem várias razões para a criação de módulos nativos:

1. **Acesso a APIs do Android**: Existem APIs que ainda não estão disponíveis no React Native, e, através de módulos nativos, você pode criar uma solução personalizada.
2. **Reuso de Código em Java**: Se você já possui código implementado em Java, pode portá-lo para o React Native sem a necessidade de reescrevê-lo em JavaScript.
3. **Performance**: Em alguns casos, é mais eficiente implementar certas funcionalidades diretamente em Java.

## Criando o Módulo Nativo

Para o desenvolvimento do módulo, será utilizado o comando **React Native init** para iniciar um novo projeto, pois precisamos de acesso direto ao código do Android. Para referências, é recomendável acessar a documentação oficial do React Native, onde encontrará guias específicos para Android e iOS.

### Exemplo: Exibindo Notificações com Toast

Como exemplo prático, vamos aprender a mostrar notificações usando o **Toast** do Android, que exibe mensagens breves na tela. A ideia é criar um módulo que permita acessar essa funcionalidade a partir do código JavaScript do React Native.

Na próxima aula, começaremos a implementação do projeto, focando em como executar essa tarefa.

**Até a próxima!**
```

Lá pessoal, nesse mini curso nós vamos aprender sobre módulos nativos no React Native e vai
ser pela plataforma Android.
Então a gente vai aprender a criar um módulo nativo, native module, bem simples, para você
aprender como é que faz aquela conexão lá do parte do Android escrevendo código em
Java e para o React Native que está escrevendo código JavaScript.
Então, uma das razões primeiro, para gente qual é o motivo de usar esses módulos nativos.
Talvez o React Native ainda não tenha o módulo correspondente porque a plataforma Android
talvez tenha um API que não dê ainda para acessar no React Native porque não foi criada ainda
o módulo no React Native, então você pode criar seu próprio módulo.
Uma razão é se você já tem código em Java e queria só portar para o React Native
mas sem ter que implementar tudo de novo no JavaScript.
Então você pode fazer aquela conexão, aquela ponte, só para poder acessar o código que
já está escrito em Java.
E outras razões também é em termos de performance e outras coisas que é melhor escrever em Java
mesmo da maneira da plataforma específica de Android.
Então como a gente vai fazer isso?
Eu já tenho aqui o emulador do Android já rodando e vou criar um novo projeto usando
o React Native init.
Não vou usar expert, tá bom?
Porque a gente precisa acessar a parte, o código do Android, então a gente precisa
usar na mão mesmo o React Native comando init.
Antes de começar, se você quiser referência, vai aqui na página do React Native, clica
Get Started.
Aqui do lado esquerdo no menu, se você olhar lá para baixo, tem os guias específicos da
plataforma iOS e Android.
O que eu vou fazer agora é mais específico para o Android, tá?
Então você pode clicar em Native Modules aqui para ter uma referência.
O que a gente vai fazer para ter uma ideia.
Então o que a gente vai fazer aqui para aprender a fazer o nosso modo nativo?
Nós vamos aqui, vamos mostrar uma notificação.
Vamos supor que você tenha o seu aplicativo, mas você não dá para acessar um certo
widget, um certo elemento do Android.
Por exemplo, esse widget aqui chamado Toast é para mostrar essa mensagem aqui, olha aqui
esse celular aqui.
Você pode mostrar a mensagem aqui dizendo a notificação.
Então como a gente pode pegar esse cara aqui que é do Android e fazer uma módula que é
acessível lá do React Native se a gente escrever o código em JavaScript, tá?
E isso que a gente vai fazer é só um conceito básico, mas que você pode aplicar para qualquer
tipo de widget, para qualquer API que tenha disponível do Android, tá?
Então se você quiser dar uma olhada aqui, eu vou clicar em Java, eu vou fazer tudo em
Java, tá?
Você pode ver como é que funciona esse negócio do Toast, tá?
E a gente vai olhar mais isso na próxima aula, quando a gente começa a criar o nosso
projeto, tá bom?
Então por essa aula é só e até a próxima.


0014-01 Modulos Nativos do Android no React Native - Aula de Native Modules

Gerando o Projeto – Modulos Nativos do Android no React Native

```markdown
# Resumo da Transcrição

Neste vídeo, o apresentador demonstra como iniciar um projeto com React Native. Aqui estão os passos principais que ele seguiu:

1. **Criação do Projeto**:
   - O apresentador utiliza o comando `react-native init` para criar um novo projeto chamado "módulos".
   - Ele menciona que o processo pode levar algum tempo e que os espectadores podem pular essa parte, se desejarem.

2. **Navegação até o Projeto**:
   - Após a criação do projeto, ele navega para o diretório do projeto usando `cd módulos`.

3. **Abertura do Editor**:
   - O editor de texto é aberto para começar a editar os arquivos do projeto.

4. **Execução do Aplicativo**:
   - O apresentador roda o aplicativo com o comando `react-native run-android`, que inicia o Metro Bundler e compila o código Java.
   - Ele informa que o processo de compilação pode demorar, mas os espectadores têm a opção de pular essa parte.

5. **Verificação do Emulador**:
   - Após a compilação, o emulador Android é iniciado e o apresentador verifica se o aplicativo está funcionando.
   - Ele edita o arquivo `App.js` e adiciona um texto de boas-vindas: "Bem-vindo ao React Native", e salva as alterações.

6. **Habilitação do Reload Automático**:
   - Ele abre a tela de desenvolvimento e habilita o recurso de reload automático para visualizar as mudanças em tempo real.

7. **Conclusão**:
   - O vídeo termina com a confirmação de que o projeto foi criado e rodado com sucesso no emulador Android, e ele indica que na próxima aula começará a escrever um módulo nativo para Android.

---
```

Olá pessoal estamos de volta então vamos começar a primeira coisa que a gente vai fazer é
general projeto já tenho aqui aberto em a tela do terminal eu vou usar o comando react
traço native a pção init e vou dar o nome ao meu projeto tá eu vou chamar de módulos
e o seu nome do meu projeto vai levar um tempinho para poder gerar se você quiser pular essa parte
do vídeo por favor senta-se à vontade
e eu vou dar cd para a parte do projeto módulos nativos vou abrir meu editor de texto
tá
deixa eu pôr aqui do lado direito da tela
e agora depois disso eu vou rodar o aplicativo tá eu vou usar o comando aqui de voltar o terminal
react native run pra Android e vai abrir uma nova janela aqui do metro bundler
e do na outra janela que eu já tava ele vai compilar código Java a usando o grato o groto aqui
e aí
e então vai demorar um pouquinho você quiser pular esta parte do vídeo senta-se à vontade
e aí
e terminou de compilar a parte do Java do Android aqui nessa tela vamos dar uma olhada lá no metro
bundler ainda tá fazendo o bundle né criando aquele bundle de JavaScript em 30% vai aumentar
onde finalmente terminar o emulador vai rodar e ligar
e aí
e aí
e aí
e aí
e aí
e aí
e então eu tô ligado aqui o meu emulador e finalmente tá rodando aqui
vamos ver se funcionou e vou lá editor de texto o arquivo é apta jfs
e aqui no classe do app do função render eu vou dizer
e vejo o álcool bem vindo ao react native vou salvar a ver se e aparece aqui
e eu vou abrir aqui a tela de desenvolvimento usando comando m no meu caso
e aí vou habilitar o rdu
o relógio para ver automaticamente também vindo ao react native funcionou corretamente
então criamos o projeto e rodamos o projeto no
emulador do Android tá então por essa aula só e te vejo na próxima
e aí vai começar a escrever nosso módulo nativo no Android


0014-02 Gerando o Projeto – Modulos Nativos do Android no React Native

Classe de Java do Modulo Nativo – Modulos Nativos do Android no React Native

# Resumo da Aula sobre o Widget Toast do Android

Nesta aula, aprendemos sobre o widget `Toast` do Android, que permite exibir mensagens breves na tela, como "Sending message".

## Principais Conceitos

- **Toast**: É uma notificação simples que aparece por um curto período de tempo.
- **Make Text**: O método usado para criar uma `Toast`, que requer os seguintes parâmetros:
  - **Contexto**: O contexto do aplicativo.
  - **Texto**: A mensagem que você deseja exibir.
  - **Duração**: Pode ser `Toast.LENGTH_SHORT` ou `Toast.LENGTH_LONG`.

### Importação e Uso no Java

Para utilizar o `Toast` em Java:
1. Importar o pacote: `android.widget.Toast`.
2. Usar o método `makeText()` para construir a mensagem.
3. Chamar o método `show()` para exibir a `Toast`.

## Implementação no React Native

1. **Criar Classe Java**:
   - Navegar até a pasta do projeto `android/app/src/main/java/com/[seu_projeto]`.
   - Criar um arquivo `ModuloToast.java`.

2. **Definição da Classe**:
   - Definir como `public class ModuloToast`.
   - Criar um construtor para a classe.
   - A classe deve estender `ReactContextBaseJavaModule` do pacote `com.facebook.react.bridge`.

3. **Estrutura do Módulo**:
   - O pacote da classe deve ser definido como `package com.[nome_dos_módulos_nativos]`.

### Próximos Passos

Na próxima aula, vamos continuar a implementação da classe e adicionar a lógica necessária para o funcionamento da `Toast` no módulo nativo.

---

Essa aula proporciona uma base para compreensão do uso de widgets e integração entre Java e React Native.

Nesta aula vamos aprender mais sobre o widget toast do Android para a gente poder ver o que a gente vai fazer no nosso módulo nativo.
Eu vou aqui no navegador, vamos botar aquela página de documentação do Android.
Estou aqui developer.android.com, no Guia, né?
Você pode ver aqui se quiser subir ao link.
Estou aqui no visão geral de notificações toast.
Esse toast nada mais, nada menos, que essa mensagem aqui, olha aqui,
mensagem que aparece, sending message, aqui você pode botar qualquer mensagem que você quiser.
Então vamos aprender a pegar esse cara e disponibilizar do Java para o JavaScript lá no React Native.
Então vamos lá.
Vamos só aprender como é que o básico desse widget.
Então você precisa saber um pouco de Java para poder entender o que está acontecendo.
Então vamos aqui no Java.
Então para poder fazer uma toast, o que é que faz?
É só pegar o importar, obviamente, depois de importar esse cara e esse toast.
Você pega aqui toast e fala ponto make text, esse método, que leva aqui o contexto e a duração,
o contexto do aplicativo, o texto é qualquer string que a gente quiser.
E a duração pode ser o toast.link.short, que é constante, tá?
Temos as constantes, temos também a toast.link.underscore.long, que é mais longo,
a duração mais longa, tá?
Aí você pode dar uma olhada aqui, vamos lá, vamos ver aqui se tem...
Então depois que a gente criar essa toast, nós podemos achar o método show nessa toast
para poder mostrar a mensagem.
Então o objeto toast tem aqui a documentação, que eu vou ver aqui.
Então esse toast é parte do pacote android.widit.toast, tá?
E a gente vai usar para poder importar.
Então aqui tem o sumar, resume de tudo, as constantes podem ser length long, length short,
eu construo toast, mas a gente vai usar o que é o método make toast, make text,
esse método aqui, tá?
Leva três parâmetros, contexto, aplicativo, uma sequência de caracteres e a duração, tá?
E você pode ver mais referência aqui se quiser, se estiver curioso,
eu brincaram desses métodos, tá?
Então vamos lá, vamos lá para o código do react-native aqui.
Então primeiro de tudo a gente vai ter que criar uma classe de Java, tá?
Para poder armazenar a lógica, código do nosso modo.
Então vamos aqui na pasta android, dentro do projeto,
barra app, barra src, barra main, barra java, barra com,
barra o nome do seu projeto, nesse caso módulos nativos, tá?
E finalmente a gente tem dois arquivos agora,
você dá uma olhada meio em octavio de ponto java e meio em apacate de ponto java.
Note que o pacote é com ponto o nome do projeto, tá?
Esse é o pacote.
Então eu vou criar aqui dentro dessa pasta módulos nativos,
um novo, no novo clássico, um arquivo para armazenar a classe, tá?
Eu vou chamar esse cara aqui,
chamar aqui módulo-tools, tá?
Módulo-tools.java.
Agora vamos criar uma classe primeiro, vamos criar uma classe public class, tá?
O nome da classe módulo-tools, o mesmo nome do ar-heel, tá?
Vamos usar essa classe aqui, vamos criar o nosso construtor,
então o construtor vai ser public-módulo-tools,
eu só queria assim, sei nada mesmo, tá?
Agora, o que a gente vai fazer aqui?
Então a gente tem essa classe módulo-tools, mas não tem nada ainda.
Então primeiro a gente tem que derivar essa classe de outra classe.
Essa outra classe vai ser react-context-based-java-módulo,
nome bem longo, para poder definir esse cara como um módulo nativo.
Então a gente vai usar o extends para poder derivar de outra classe, né?
Chamada react-context-based-java-módulo, tá?
Então é bem longo o nome.
Então como a gente usou esse cara, a gente vai ter que portar aqui em cima,
e eu vou dar um import aqui desse cara, mas da onde é que vem?
Então esse cara vai vir lá do pacote do Facebook, tá?
Então a gente vai dizer o que?
com.facebook.vac.bridge, tá?
ponto, o nome desse módulo.
Então esse pacote vem desse cara aqui.
Agora esqueci de definir o pacote desse arquivo,
vai ser o package com ponto nome dos módulos nativos.
Tá?
O mesmo nome aqui dos outros, para a gente poder acessar ele no próprio módulo pacote, né?
Tá? Então...
Vamos reagir ao que a gente fez aqui.
Nós fizemos um arquivo chamado módulo-toast.java.
Toast é qualquer...
Pode ser qualquer nome que você quiser, mas eu chamei de módulo-toast,
que vai ser o módulo que vai ter as funcionalidades do toast.
Então criamos uma classe, construtor ainda não tem nada.
Tá?
Agora essa classe tem que ser derivada de outra classe.
Então vamos estender da classe react context-base-java-módulo.
Essa aqui vai ser a classe base, tá?
Que vem do pacote com Facebook-vac-bridge.
Tá bom?
Então vamos dar uma pausa aqui e te vejo na próxima aula.


0014-03 Classe de Java do Modulo Nativo – Modulos Nativos do Android no React Native

NativeModules e getName – Modulos Nativos do Android no React Native

# Resumo da Aula sobre Módulos Nativos no React Native

Na aula de hoje, continuamos a implementação de um módulo nativo em Java para o React Native, especificamente dentro do arquivo `ModuleToast.java`, localizado na pasta `android.app.src.man.java.com.modules.nativos`.

## Principais Tópicos Abordados

- **Definição da Classe**: Criamos uma classe que extende `ReactContextBaseJavaModule`, tornando-a um módulo nativo.
  
- **Construtor**:
  - Criamos um construtor que recebe um parâmetro do tipo `ReactApplicationContext`.
  - Importamos `ReactApplicationContext` do pacote do `ReactContextBaseJavaModule` e, em seguida, chamamos o construtor da classe pai.

- **Uso no app.js**:
  - No arquivo `app.js`, importamos `NativeModules` do `React Native`.
  - Para visualizar os módulos nativos disponíveis, foi adicionado um `console.log` no método `componentDidMount`.

- **Método GetName**:
  - Definimos o método `getName`, que retorna o nome do módulo nativo (por exemplo, "MeuToast").
  - É importante adicionar a anotação `@Override` para redefinir o método da classe base.

## Próximos Passos

- Aguarde a próxima aula para entender como registrar o módulo e finalizá-lo.

**Agradeço a participação de todos e nos vemos na próxima aula!**

Fala pessoal, estamos de volta com a nossa aula sobre módulos nativos do Android no React Native.
Vamos continuar a nossa implementação da classe de Java do módulo nativo.
Estamos aqui no arquivo módulo tos.java.
Está dentro da pasta android.app.src.man.java.com.módulos.nativos.
Módulos nativos são o nome do projeto.
Estamos aqui.
Criamos nossa classe que estende de React Context Base Java Modulo.
Isso vai definir essa classe como um módulo nativo.
Agora estamos aqui no construtor, ainda não tem nada.
Então, o que a gente vai fazer no construtor?
Para o construtor, ele vai...
Esse construtor aqui, vamos criar um construtor que leva um parâmetro que vai ser o contexto do aplicativo React.
Então, a gente vai chamar o seguinte.
A gente vai ter essa variável React Context, o contexto do aplicativo do React,
que a gente vai ser do tipo que React Application Context.
Então, para poder usar esse cara, vamos importar aqui em cima.
Importa esse cara.
Mas da onde vem esse cara?
Ele vai vir lá do mesmo...
Pacote do React Context Base Java Modulo.
Então, vou copiar e colar esse cara, do bridge.
Tá bom?
E com isso, a gente vai só chamar aqui o construtor do Py, da Classify,
com o super e passar esse contexto do React.
Só isso.
Super com o contexto do React.
Tá bom?
Agora.
O seguinte, quando você estiver aqui no seu app.js, estou aqui no arquivo app.js, dentro da parte do nosso projeto,
nós temos o import do React Native.
Para a gente poder usar o nosso modelo que a gente vai ver já,
a gente vai ter que importar o native modules do React Native.
Agora, se eu pô aqui, native modules.
Esse aqui, está dentro do...
Quando você importe o React Native, vai ter esse pacote aqui,
esse modelo que você vai usar ponto native modules.
Por isso que eu estou lutando aqui com chave, tá?
E dentro desse native modules, se você não ver aqui, deixa eu dar um console log.
Eu estou aqui no app, tá?
No class app, eu vou adicionar component, dead mount,
quando ele montar, eu vou dar um console log aqui do native modules, para você ver, tá?
Vou dar o console log aqui, para você ver o que aparece.
Deixa eu salvar.
Agora, eu vou devolver o meu embalador, comando M,
eu vou habilitar o debug de JavaScript remoto,
e vou abrir o console aqui, para ver se ele deu algum console log.
Então, deu o console log aqui do native modules,
você note que tem vários modules nativos já, várias coisas aqui,
e a gente vai adicionar um novo module, esse objeto aqui,
então ele vai aparecer aqui.
Acho que já tem um torce Android, não sei o que, tem umas funções aqui.
Tá?
Mas a gente está fazendo a mesma coisa, só para ver como é.
Tá certo?
Então, voltando aqui, a gente viu que vai aparecer lá no native modules,
quando a gente terminar tudo.
Voltando aqui no module Toast.
Então, qual é o nome que vai aparecer aqui nesse native modules?
Essa é a pergunta, né?
Qual será que é o nome?
Então, a gente pode definir o nome da propriedade que irá aparecer nesse objeto native modules,
usando um método aqui, dentro do nosso module Toast,
esse método é chamado de GetName.
Esse método aqui não leva nenhum parâmetro,
mas ele vai retornar uma stream, que vai ser público,
e a gente vai retornar o nome do module nativo.
Pode ser qualquer coisa que você quiser.
Então, eu vou dizer, por exemplo, poderia ser a mesma coisa o module Toast,
ou até diferente, eu pode dizer,
vamos falar meu Toast, tá?
Só para poder diferenciar, para você ver que não precisa ser o mesmo nome da classe aqui.
Então, ele vai aparecer lá no native modules, naquelaquele objeto,
com esse nome aqui chamado meu Toast, tá?
Mas note que isso ainda não vai aparecer agora, porque a gente não fez o registro, tá?
Então, tem que esperar até o final, para você finalmente ver o que vai aparecer.
Tem que também que adicionar essa anotação aqui de override,
essa anotação para você poder redefinir o GetName com um novo nome aqui, tá?
Override da classe base lá, tá?
Não se esqueça da anotação.
Com isso, a gente vai salvar esse cara,
e vamos dar uma pausa aqui e te vejo na próxima aula, tá?
Até lá.


0014-04 NativeModules e getName – Modulos Nativos do Android no React Native

ReactMethod show (Toast) – Modulos Nativos do Android no React Native

```markdown
# Resumo da Aula sobre Módulos Nativos no React Native

Nesta aula, continuamos a implementação da classe `Modulotors` no contexto de módulos nativos do Android utilizando React Native. 

## O que já foi feito
- Implementamos o construtor e a função `getName`, que retorna o nome da propriedade que aparecerá no objeto `nativeModules`.

## Próximos passos
- Criar uma nova função que poderá ser chamada do JavaScript. 
- Essa função irá realizar a lógica no Java para exibir um toaster (notificação).

## Implementação da Função `show`
1. **Definição da Função**:
   - Chamamos a função de `show`, que deve ser definida como `public void` e não retornar nada (void).
   - Precisamos da anotação `@ReactMethod` para torná-la acessível do JavaScript.

2. **Importação**:
   - Importamos a anotação `ReactMethod` do pacote `com.facebook.react.bridge`.

3. **Uso da Função no App**:
   - No arquivo `app.js`, usamos `nativeModules.meutoast.show` para invocar a função `show`, passando uma mensagem como argumento.
   - A mensagem recebe um string do lado do JavaScript, que será utilizada na exibição do toaster.

## Lógica do Toaster em Java
- Utilizamos `Toast.makeText` que requer três argumentos:
  1. **Contexto**: Obtido com `getReactApplicationContext()`.
  2. **Mensagem**: Passamos a mensagem recebida como parâmetro.
  3. **Duração**: Usamos `Toast.LENGTH_LONG` para definir a duração do toaster.

- Não se esqueça de importar `android.widget.Toast` para usar a classe Toast.

## Revisão
- A função `show` foi criada de forma a receber uma mensagem e chamar a notificação (toast) com os parâmetros corretos.
- O módulo finalizado será acessível via `nativeModules.mytoast.show`.

## Conclusão
Estamos pronto para testar a implementação e continuaremos na próxima aula. 

Até mais!
```

Fala pessoal, estamos de volta na sala de módulos nativos do Android no React Native.
Vamos continuar a nossa implementação da classe Modulotors.
Já fizemos o constutor, fizemos o getName.
O getName vai ser retornar o nome da propriedade que irá aparecer lá no nosso objeto de nativeModules,
que vem do pacote o React Tractionate.
Se você notar aqui no pacote, por exemplo, a source code no seu key,
note que o Tosandroids tem propriedades e tem outras propriedades que são funções.
Então a gente vai fazer isso agora.
Vamos criar uma função que pode ser chamada do JavaScript e que vai fazer a lógica lá no Java.
Vamos escrever a lógica no Java e ele vai fazer aquela ponte e esse método de Java vai ser disponível lá do JavaScript.
Vamos fazer isso no nosso código, Modulotost.
Vamos adicionar um método aqui, por exemplo.
A gente agora quer criar aquela função para poder mostrar o toaster.
Vamos fazer isso.
Vamos chamar a função de show para mostrar o toaster.
Essa função aqui, vamos ver que ela vai retornar nada.
A gente tem que ser void, é muito importante você entender que para esse método que React tem que ser void,
assinatura e public void.
E temos que adicionar a anotação chamada React method para poder disponibilizar.
Esse método vai ser chamado do lado React, do JavaScript.
Então não se esqueça da anotação React method e da assinatura tem que ser void.
Não pode retornar.
Uma coisa.
Então vamos importar o React method, essa anotação vem lá da onde.
Então vai ter também vi do bridge.
Então eu vou só duplicar essa linha e adicionar o React method do mesmo pacote dos outros.
Não se esqueça do import.
React method, vem lá do com o Facebook React bridge.
Legal. Temos o show aqui.
Mas queremos que a gente mostre uma mensagem lá do JavaScript, a gente pode fazer o seguinte, vamos aqui no app.js.
Vamos supor que no component.mountain aqui do app, eu quero mostrar uma mensagem.
Por exemplo, quero dizer show, sei lá, ou lamun, alguma coisa.
Carregando, vamos botar carregando.
Então a gente quer fazer algo assim.
Mas esse show vai vir da onde?
Vai vir lá desse módulo.
Então esse módulo vai estar lento do native modules.
Então a gente vai chamar assim native modules, ponto.
Ponto o nome do módulo que é definido pelo valor de retorno do getname.
Se lembra, getname está voltando, retornando a mailtoast.
Então vai ter que chamar de mailtoast, ponto show.
Então vamos começar com esse exemplo bem básico.
A gente quer chamar uma função chamada show do mailtoast módulo, do módulo toast, que tem a mensagem carregando.
Para poder mapear daqui do JavaScript, o Java, esse cara aqui, essa string vai aparecer no Java, como o parâmetro do método show.
E vai ser uma string.
Eu vou chamar de mensagem.
Legal, temos acesso àquele argumento.
Agora vamos fazer a toast.
Para poder fazer essa toast em Java, você fala toast, ponto make text.
Se lembra aquela documentação que a gente viu anteriormente? Tem três argumentos.
Primeiro vai ser o contexto do aplicativo.
Nesse caso, para poder obter o contexto, vamos chamar a função aqui.
Essa função, vou chamar get, react, application, context, para a gente obter o contexto do react.
Se lembra o react context?
Agora vamos dar a mensagem.
Poderia ser qualquer coisa, ou la mundo, alguma coisa aqui.
Mas eu vou usar o parâmetro aqui que foi dado lá pelo JavaScript.
Agora, duração é terceiro argumento.
Duração aqui pode ser aquela short ou long.
Eu vou usar qualquer, só uma equipe, para deixar simples toast, ponto, acho que é length, long, se não me engano.
Deixa eu dar uma olhada no navegador.
Length, long, está certo.
É um final int.
Vamos ver aqui, voltar.
Length, long, está certo.
Com isso, semicolon, ponto e virgo.
Vamos ver se o cara vai dar.
Vamos importar também o toast.
Vamos dar onde é que vem o toast.
Vamos importar lá em cima.
Import android.wg.toast.
Vou ser olhado a documentação.
Android.wgtoast.
Certo?
Vamos salvar.
Ainda não vai funcionar, então vai dar erro.
Vamos aqui.
Com isso, a gente fez o nosso método que vamos revisar.
Nosso método show, que leva um parâmetro a mensagem.
Chama o toast para criar uma toast, aquela notificação aqui no fundo, aqui embaixo.
Primeiro argumento, são 3 argumentos.
Primeiro é o contexto.
A gente usa o funcão get react application context para poder obter o contexto.
Depois passa a mensagem como segundo argumento.
Terceiro argumento é a duração.
E eu vou usar a constante toast.length long.
Não se esqueça de dar a notação reactmeta para poder aparecer lá no objeto que a gente definiu com o nome meu toast.
Vamos usar nativemodules.mytoast.show com a mensagem dessa maneira.
Vou deixar aqui comentado porque ainda não vai funcionar.
Então, eu te vejo na próxima aula, onde a gente vai continuar.
Até mais.
Tchau.


0014-05 ReactMethod show (Toast) – Modulos Nativos do Android no React Native

createViewManagers e createNativeModules – Modulos Nativos do Android no React Native

```markdown
# Resumo da Aula sobre Módulos Nativos do Android e React Native

Nesta aula, o instrutor continua a implementação de um módulo nativo chamado `Toast` no React Native. A seguir, estão os principais pontos abordados:

1. **Implementação do Método Show**:
   - O método `show` foi implementado para o componente `Toast`.
   - O instrutor menciona a possibilidade de encadear métodos, usando `toast.show()` diretamente.

2. **Registro do Módulo**:
   - É necessário criar uma nova classe que implementa `ReactPackage` para registrar o módulo `Toast`.
   - A classe é chamada `PacoteToast.java`.

3. **Criação da Classe PacoteToast**:
   - A classe implementa a interface `ReactPackage` do React, importando do pacote correto.
   - O construtor pode ser omitido, mas um construtor vazio também pode ser adicionado.

4. **Método CreateViewManagers**:
   - Este método deve retornar uma lista vazia de `ViewManager`, utilizando `Collections.emptyList()`.

5. **Método CreateNativeModules**:
   - O método `createNativeModules` será responsável por criar uma lista de módulos nativos.
   - Uma lista chamada `listaModulos` é criada e uma nova instância do módulo `Toast` é adicionada a essa lista, passando o `ReactContext`.
   - O retorno do método é a lista de módulos, que contém a instância criada.

6. **Considerações Finais**:
   - O instrutor enfatiza a importância de importar as classes corretas e de definir corretamente os métodos.
   - A aula termina com a promessa de continuar na próxima sessão.

O instrutor se despede e convida os alunos para a próxima aula.
```


Olá pessoal, estamos de volta.
Nossa aula para poder aprender a fazer módulos nativos do Android e no React Native.
Então vamos aqui continuar.
Estou dentro da classe módulo toast.
Acabamos de fazer o método show.
Vamos na toast mas esqueci de mostrar toast.
Você tem a opção de pôs caro na variável ou você pode fazer uma corrente já com o
ponto show aqui.
Está na mesma.
Então vamos...
Pode fazer assim e falar toast positivo.
Pode dar no chain.
Tanto faz.
Então vou deixar assim mesmo.
Então toast.show e eu pôs essa nova toast na variável e chamei o método show.
Atenção.
Não se esqueça aí.
Pronto.
Agora só nos registrar esse módulo.
A gente vai ter que criar uma nova classe.
Para criar uma classe que vai entender do React Package, pacote react.
Então aqui dentro da parte da módulo os nativos.
Vamos criar aqui o nosso pacote.
Vamos ver aqui.
Vamos chamar de pacote toast.java.
Então vamos criar uma classe.
Criar uma classe chamada pacote toast.
Esqueci do nome class.
Vamos ver se eu não esqueci class aqui.
Tem class.
No pacote toast.
Nem precisa de construtor.
Se você quiser construtor sem vazio pode escrever também mas eu não vou escrever.
Então para esse cara aqui ele vai ter que implementar uma interface para o React Package.
Deixa eu dar aqui.
So implementa.
implementa react package.
Se você interface aqui react package que vai vir da onde?
Import react package.
Vai vir do com facebook.react.pacage.
Não tem bridge.
Cuidado não tem bridge aqui não importa.
com facebook.react.pacage.
Não esqueci de definir o pacote package modos nativos do com.
Tá bom.
Então criamos a classe pacote toast que implementa react package.
Agora vamos fazer aqui.
Tá bom.
Essa primeira função aqui não vai ter nada para a gente fazer é só retornar uma lista
vazia tá.
Essa é a função chamada create view managers tá.
Create view managers.
Não vamos retornar nada somente uma lista vazia.
Para isso tá eu vou usar o collections.
Return.
Vou retornar o que?
Lista vazia usar o collections.emptylist.
Vão lista vazia para poder usar o collections tem que importar.
Vou importar aqui em cima.
Java util.collections.
Tá bom.
Legal agora vamos definir a assinatura dessa função.
Essa função vai retornar uma lista.
Então vamos dizer aqui list mas é lista de que tá bom.
Lista de chamado view manager tá view manager.
Então vamos ter que importar esse cara também mas da onde é que vem.
Então vai vir da onde com.facebook.react.
Pode aqui ponto UI UI UI UI UI manager.
Manage tá.
Ponto view manager.
Vamos cuidar com os imports.
Então ele vai retornar a lista de view manager.
Vou botar aqui public tá.
Público.
Agora o parâmetro tá parâmetro vai ser o contexto do react.
Aquela mesma coisa react a application context.
React context tá.
Mas a gente não tá usando né.
Mas deixa aí mesmo tá.
Então vamos importar react application context import com Facebook ponto react ponto bridge
ponto react application context tá.
Tá bom então vamos terminar com o override a anotação override pra esse método tá
bom.
Se aumentar aqui pra você ver melhor.
Vamos usar o método create view manager.
Definimos né na verdade que já tava lá.
Então vamos dar um override com a anotação.
Ele retorna uma lista vazia os collections ponto empty list chamei esse método.
Note que ele retorna uma lista de view manager lista de view manager.
O parâmetro é o react context que a gente não usou.
Tá bom.
Legal.
Tudo certo aí.
Agora vamos continuar com outro método tá esse método aqui a gente vai se importar
é o create native módulos tá esse método aqui vai retorna uma lista tá e a gente vai
fazer uma instância do nosso módulo toast tá.
Então vamos primeiro aqui tá criar uma lista tá vamos criar uma lista.
Vou chamar-se lista de módulos.
Agora a lista de que é lista de que vai ser uma lista de native módulo tá vamos já
já importar.
Lista de native módulos eu vou usar o realist mesmo tá o realist você pode digitar native
módulo de novo aqui se quiser mas também não precisa pode ser assim também.
Depende de você tá qualquer maneira eu deixar aí mesmo.
Vamos importar agora onde é que vem o list Java ou Tio import Java ou Tio ponto list tudo
certo né.
Onde é que vem o realist mesmo coisa Java ou Tio a realist tá agora onde é que vem
native módulo vem do bridge tá então vou aqui e duplicar essa linha a native módulo
então com Facebook react bridge native módulo tá tá certo então criamos uma lista de módulos
nativos né.
Agora eu pego o que eu pego a lista de módulos vou adicionar o item a lista mas adicionar
o que né o que tá vamos já já ver no final você retorna a lista de módulos tá.
Return módulos.
Agora o que que vai adicionar essa lista.
Vai ser o novo módulo tos tá então se lembra do módulo tos módulo tos você quase aqui
vamos fazer nova instância usando o new módulo tos tá bom se lembra que a gente tem que
passar o contexto do react então vamos fazer o react context tá bom.
react context mas da onde é que vem esse cara vai vindo o parâmetro tá que a gente
ainda não definiu então vamos definir que o reac context vem com o parâmetro é aquela
mesma coisa viá que apliquei esse contexto tipo tá já que a gente já tá aqui vamos
terminar de definir o valor de retorno tipo vai ser uma lista de native módulo né e
vai ser público public e não se esqueça do override override anotação tá bom então
vamos ver aqui se a gente não esqueceu de importar nada.
Criamos o método create native módulos argumento é react context tipo react application
context falou de retorno a lista de native módulos tá criamos uma lista o rei list tem
nada ainda adicionamos uma nova instância do nosso módulo tos passa o react context
que é necessário para o construtor se lembra construtor aqui react context.
E aí eu vou estar voltando aqui para o pacote do sbd já retorna essa lista tá muito
importante você escrever esse cara certo que é isso que eu importo aqui esse parte aqui
é adicionar a nova instância.
Tá bom então o que tá a gente fazer uma pausa e te vejo na próxima aula tá até mais.


0014-06 createViewManagers e createNativeModules – Modulos Nativos do Android no React Native

MainApplication getPackages – Modulos Nativos do Android no React Native

# Resumo da Aula sobre Módulos Nativos do Android no React Native

Na aula, foi abordado como criar módulos nativos para Android no contexto do React Native. Aqui está um resumo dos principais pontos discutidos:

## Estrutura do Pacote

1. **Criação do Pacote Toast:**
   - Um pacote chamado `Toast` foi criado, que implementa a interface `ReactPackage`.
   - Foi criado um módulo `Toast.java` onde a função que exibe o toast é definida.

2. **Método getPackages:**
   - No arquivo `MainApplication.java`, foi necessário modificar o método `getPackages()` para incluir a nova instância do pacote `Toast`.

## Implementação do Módulo

- O método `show` foi implementado em `Toast.java`, onde uma string recebida do JavaScript é usada como mensagem do toast.
- A implementação faz uso do método `Toast.makeText()` do Android, com o contexto, a mensagem e a duração definidas.

## Importando e Usando o Módulo

1. **Importação:**
   - No arquivo JavaScript (`app.js`), o módulo foi importado usando `NativeModules` do `react-native`.

2. **Chamada do Método:**
   - Após o método `componentDidMount`, o método `show` do módulo toast foi chamado com uma string de mensagem.

## Erros e Depuração

- Durante a implementação, surgiram problemas, como o erro "Cannot read show".
- Foi sugerido recompilar o projeto e reiniciar o servidor Metro para resolver os problemas.

## Resumo de Aprendizados

- Criar módulos nativos permite chamar código Java diretamente do JavaScript.
- É importante lembrar das anotações, imports, e definir corretamente a lista no método `getPackages`.
- Métodos podem ser adicionados à classe do módulo, e uma lista de constantes pode ser definida usando `getConstants`.

## Conclusão

A aula concluiu que, ao seguir esses passos, é possível criar módulos nativos que podem ser utilizados no React Native, permitindo maior flexibilidade e integração com a funcionalidade nativa do Android.

### Recursos Finais
- Lembrete sobre a importância do método `getName`, `createNativeModules`, e a utilização correta de anotações em métodos.
- Explicou a possibilidade de adicionar mais métodos e propriedades ao módulo no futuro.

**Encerramento:** O instructor se despediu, esperando que todos tenham gostado da aula e aprendido a criar módulos nativos para Android no React Native.

Estamos de volta a nossa aula de módulos molde nativos do Android no React Native.
Vamos continuar, vamos fazer aqui, vamos lá no próximo etapa, no application,
no application e adicionar o nosso pacote a metodo, o valor de retorno do método getPackages.
Então criamos aqui o pacote toast, implementa a interface react package,
fizemos módulos toast.java, pacote toast.java.
Módulos toast é onde é que tem o nosso código para definir a função para mostrar o toast, isso é o que é o importante.
E a gente quer disponibilizar essa função lá do JavaScript, app.js, lembra depois do component.md mount,
nativeModules.multost, que o nome vem do getName, do retorno do retname.
E show, passa o string, essa string aparece lá no java, como mensagem, a gente criou a nova toast e finalmente
chama toast.show do java. Para poder pegar esse cara você pega, cria um pacote toast que implementa
react package e lá na função createNativeModules faz uma lista e adiciona nova instância do nosso módulo.
Módulos toast, não se esqueça do react context. Agora nos resta a gente adicionar esse pacote a nosso aplicativo.
Então vamos aqui no mainApplication.java, mainApplication.java, no pasta androidappsrc mainjava com módulos nativos
barra mainApplication. Vamos aqui, esse cara tem um método, tá? Um método aqui, vamos ver, cadê?
Vai aqui no getPackages, tá? GetPackages. Então nesse getPackages a gente vai fazer o que?
A gente vai criar um novo pacote toast. Então aqui nesse valor de retorno do getPackages, que é uma lista, tá?
Depois do main react package, new main react package, ponha a vírgua e adiciona uma instância do nosso pacote toast.
New pacote toast, tá? Não tem nenhum argumento para o construtor. Então adicione essa instância aqui, a lista do valor de retorno
do getPackages está aqui no mainApplication, tá? Tá certo? Vamos salvar, vamos aqui no app.
De volta no app, lá no component.dnl já temos aqui importamos nativeModules do reactNative, nativeModules.mailToast.show carregando.
Vamos ver no que dá. A gente não esqueceu nada, se não deu problema. Deixa eu abrir o navegador com o meu debug.
Vou rodar de novo, reiniciar o aplicativo. Cannot read show, van der fijn, já deu problema, ou não?
Deu problema, não apareceu aqui. Então vamos recompilar isso? Então eu vou no terminal. Terminal tenho que o JavaScript,
mas eu vou para a parte que eu já tinha antes. Eu vou rodar o reactNative aroundRod.no para poder recompilar tudo aqui.
Compilar a parte do Java. Vamos ver se funciona. Ou se não, talvez tenha que reiniciar o JavaScript também.
Vamos ver. Então está copilando aqui. A parte do Java terminou o sucesso.
Agora do metro.li, vamos ver se funcionou. Eu reiniciei, vamos ver se não deu problema.
Parece que não tem nada. Eu vou fechar tudo, fechar esse metro. Vou voltar para home.
Aqui vou dar o reactNative aroundRod de novo. Eu fechei o JavaScript, abri o JavaScript de novo. Opilou o Java.
Vai demorar um pouquinho, está certo. Parte do Java não deu problema, tudo certo. Agora vai lá no metro.bundler.
Pronto, bem-vindo ao reactNative. Você viu carregando aqui? Você viu lá carregando? Vê de novo.
Carregando. Pode mudar mensagem também, se quiser. Carregando. Vamos mudar mensagem JavaScript. Eu quero ver.
Vou mudar o lamo. Vou mudar mensagem no component.dmount. Vou mudar o show.
Adê? Salvar. O que está dando hotbrill load? Por isso que não.
Tem que reiniciar. O lamo apareceu. Você aprendeu tos como criar. Você pode adicionar mais argumentos, se quiser, duração e outras coisas.
Vamos revisar tudo que a gente fez. Aprendemos a criar tos, ou la mundo, acessando do JavaScript. Através do nativeModules, que é importado de react.td.
Vamos ver o meu tos, que a gente criou. Vamos ver no nosso debugger.
Nosso debugger. Cadê?
Vou abrir o debugger.
Quero ver o console. Logo. Na nativeModules, você vê que tem o meu tos agora.
Dentro do meu tos tem o método show. E a gente criou. Continuando.
Nós registramos o meu tos, para esse meu tos tem o getname do módulo tos.
Criamos a classe módulo tos, que estende de react.contact.base.java.módule.
Tem o construtor, que chama super com o contexto react. Tem o getname para retornar o nome do módulo que vai aparecer no objeto nativeModules.
E você pode adicionar várias propriedades e métodos para o módulo tos, que vai aparecer lá do JavaScript.
Não se esqueça de decorar o anotação react.mêthd, senão não vai aparecer lá no JavaScript.
Fizemos a implementação do método show, que do JavaScript vem como o string mensagem do Java.
No Java, a gente faz um tos, leva três argumentos do make text, o contexto, o mensagem e a duração.
Depois, finalmente, a gente chama o método show do próprio tos.
Depois de fazer isso, a implementação de todo o logic que você quiser, é só criar um pacote, um nova classe, pacote, que implementa react package.
Aí você define esse create view manager, no nosso caso, no fernado, só retornou a lista vazia.
Depois, você define o create native modules, muito importante, faz uma lista e adiciona uma nova instância do seu módulo, módulo tos com react.txt, e retorna essa lista.
Não se esqueça das decorações de override, essas coisas, valores de retorno, etc.
Temos cuidado com os imports, que nem todos vêm do bridge, nem todos vêm do react, como o e-manager e assim de por diante.
Finalmente, usamos a melhor application no get package, a minha application, essa classe, acho essa função get package, retorno a lista.
Nessa lista, tem que adicionar a nova elemento, que é a instância do pacote, do pacote que a gente criou, pacote tos.
Muito importante ter isso, e não não vai funcionar.
E daí, vai lá do app, só chamar native modules, módulos, módulos, módulos, e qualquer função que você definiu, tá?
E é por isso que você aprendeu a criar módulos nativos do Android, no react native.
Agora pode chamar lá do JavaScript, aquilo que você escreveu em Java.
Pode até adicionar mais parâmetros, mais métodos, propriedades, assim por diante, tá?
E por sinal, as propriedades constantes aparecem lá no get constants, tá?
Se você notou lá no nosso native modules, tem essa...
A de... Toes, tem get constants que você pode usar, redefinir, override esse método, e retornar constantes para ser disponível usar constantes do Java no JavaScript.
Tá bom?
Então, por esse mini cruzar só, espero que tenham gostado, e até a próxima. Tchau!
