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

Caio Pratalli — Mon, 25 Nov 2024 00:44:42 +0000

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,

Em seguida, execute o comando abaixo no terminal:

npx expo prebuild

Instalando o WatermelonDB

Agora, instale a biblioteca WatermelonDB:

npm install @nozbe/watermelondb

Configuração no iOS

Acesse a pasta ios do seu projeto e abra o arquivo Podfile.
Adicione a seguinte dependência:

pod 'simdjson', path: '../node_modules/@nozbe/simdjson', modular_headers: true

No terminal, dentro da pasta ios, execute:

pod install

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:

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",

Instale a biblioteca @react-native-community/cli:

npm install @react-native-community/cli

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,
},

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

DEV Community: Caio Pratalli