Este projeto de exemplo consiste na integração de um Módulo Flutter dentro do React Native. Tudo para fins de validação e pesquisa.

Aqui no README temos uma documentação técnica, com o propósito de auxiliar na execução.

Previsualizando o projeto rodando

Abaixo temos um .gif da integração em funcionamento

Abaixo temos duas imagens referentes a integração em funcionamento. A esquerda temos a tela em React Native, e a direita a tela em Flutter.

Documentação mais abrangente

Para saber mais detalhadas sobre a integração, como as tecnologias usadas, possíveis problemas e a parte teórica, consulte o documento de dossiê no SharePoint. Este é o link para o documento!

1. Preparando ambiente da máquina

Caso você não tenha instalado as ferramentas e configurações descritas abaixo, será necessários instalar e/ou configura-las.

Deve-se ter instalado na máquina as seguintes ferramentas:

1. Android Studio
   • Utilizamos a versão Giraffe 2022.3.1
2. Qualquer IDE para ambas tecnologias
   • Utilizamos o VS CODE com as extensões Dart e Flutter, para o Flutter
   • Utilizamos o VS CODE para o React Native

Também é necessário que você tenha as seguintes configurações:

1. Emulador no Android Studio & configurações do React Native
   • É possível seguir esta documentação oficial
2. Configurações do Flutter
   • É possível seguir esta documentação oficial

2. Preparando ambiente do módulo Flutter

Instale as dependências no módulo Flutter

cd rn_flutter_sdk

flutter pub get

Agora crie o build AAR do módulo Flutter

flutter build aar

Caso, deseje testar somente a tela do módulo flutter, execute o emulador android e em seguida rode:

flutter run

3. Preparando ambiente do React Native

Instale as dependências na raíz do projeto

cd ..

Obs: Rode apenas um dos comandos abaixo, após definir se irá utilizar yarn ou npm como gerenciador de pacotes

yarn

npm i

Instale as dependências no projeto de exemplo

cd example

Obs: Rode apenas um dos comandos abaixo, após definir se irá utilizar yarn ou npm como gerenciador de pacotes

yarn

npm i

Para executarmos a tela de integração, basta rodarmos o seguinte comando:

yarn android

npm run android

Gerar APK de APP

cd example

react-native build-android --mode=release --tasks clean, assembleRelease

[GIT] Commits

git add .

ou

git add --all

Para fazer commits utilize um dos comandos abaixo (necessário devido ao commitlint)

git commit -n -m "<sua-mensagem>"

git commit --no-verify -m "<sua-mensagem>"

Em seguida utilize o:

git push

📄 Algumas referências importantes que usamos no decorrer da integração

• Medium: Flutter Integration with React Native por Kiran Shinde.;
• React Native: Integration with Existing Apps;
• Flutter: Integrate a Flutter module into your Android project;
• Flutter: Integrate a Flutter module into your iOS project;