DEV Community

Caio Pratalli
Caio Pratalli

Posted on • Edited on

3

Guia Completo: Como Integrar WatermelonDB no React Native 0.76 com Expo 52 e TypeScript

A nova arquitetura do React Native trouxe mudanças significativas, incluindo a remoção do Babel, que era essencial para integrar o WatermelonDB devido ao uso de decorators. Felizmente, o TypeScript agora pode resolver essa questão de forma eficiente.

Neste artigo, você aprenderá como configurar o WatermelonDB em um projeto React Native 0.76 com Expo 52, incluindo as etapas necessárias para lidar com as alterações recentes na arquitetura do react native e no autolinking do expo.

Pré-requisitos

Antes de começar, certifique-se de ter um projeto React Native criado com Expo, utilizando as versões mais recentes do framework e suas dependências.

Se você estiver utilizando o Expo Go, será necessário desativar a New Architecture e realizar o prebuild para acessar as pastas nativas (android e ios).

1. Desativando a New Architecture

No arquivo app.json, remova a seguinte linha:

"newArchEnabled": true,
Enter fullscreen mode Exit fullscreen mode

Em seguida, execute o comando abaixo no terminal:

npx expo prebuild
Enter fullscreen mode Exit fullscreen mode

Instalando o WatermelonDB

Agora, instale a biblioteca WatermelonDB:

npm install @nozbe/watermelondb
Enter fullscreen mode Exit fullscreen mode

Configuração no iOS

  1. Acesse a pasta ios do seu projeto e abra o arquivo Podfile.
  2. Adicione a seguinte dependência:
pod 'simdjson', path: '../node_modules/@nozbe/simdjson', modular_headers: true
Enter fullscreen mode Exit fullscreen mode
  1. No terminal, dentro da pasta ios, execute:
pod install
Enter fullscreen mode Exit fullscreen mode

Pronto! Não há necessidade de instalar o @babel/plugin-proposal-decorators, como sugerido na documentação oficial.

Configuração no Android

Devido às mudanças no autolinking do Expo para Android, algumas configurações adicionais são necessárias:

  1. No arquivo package.json, altere o script android para incluir a variável de ambiente EXPO_USE_COMMUNITY_AUTOLINKING=1. Ele deve ficar assim:
"android": "EXPO_USE_COMMUNITY_AUTOLINKING=1 expo run:android",
Enter fullscreen mode Exit fullscreen mode
  1. Instale a biblioteca @react-native-community/cli:
npm install @react-native-community/cli
Enter fullscreen mode Exit fullscreen mode

Habilitando os Decorators no TypeScript

Como alternativa ao plugin de decorators do Babel, usaremos o suporte nativo do TypeScript. No arquivo tsconfig.json, adicione a opção experimentalDecorators em compilerOptions:

"compilerOptions": {
  "experimentalDecorators": true,
},
Enter fullscreen mode Exit fullscreen mode

Finalizando

Após essas configurações, o WatermelonDB deve estar funcionando corretamente no seu projeto!

Com este guia, você pode aproveitar todos os benefícios do WatermelonDB sem se preocupar com problemas de compatibilidade com a nova arquitetura do React Native. 🚀

Link do repositorio de exemplo

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (1)

Collapse
 
matheus_arajo_da192c3deb profile image
Matheus Araújo

eu to usando expo com eas development build e não estou conseguindo

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay