DEV Community

Caio Pratalli
Caio Pratalli

Posted on

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

#reactnative #expo #offlinefirst #watermelondb

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

Top comments (0)

Read next

amr-saafan profile image

Scaling React Apps with Reusable List Components

Amr Saafan -

hieunh1801 profile image

react use-zustand demo

Nguyễn Hữu Hiếu -

hieunh1801 profile image

react-hook-form demo

Nguyễn Hữu Hiếu -

gautham495 profile image

Achieving Android 15 Edge to Edge compatibility for your React Native App.

Gautham Vijayan -