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
iosdo seu projeto e abra o arquivoPodfile. - 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 scriptandroidpara incluir a variável de ambienteEXPO_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. 🚀
Top comments (1)
eu to usando expo com eas development build e não estou conseguindo