[React Navigation]Drawer Navigator 설치 및 적용 *Realm 과 에러

https://reactnavigation.org/docs/drawer-navigator/#installation

https://reactnavigation.org/docs/drawer-navigator/#installation

프로젝트 진행 중 Drawer Navigator을 처음 사용하였는 데, 설치 과정 중 많은 오류가 발생하여

 

해결하기 위해 결과를 정리하였다.

 

// 설치코드

npm install @react-navigation/drawer

// 종속 라이브러리 설치

expo install react-native-gesture-handler react-native-reanimated

이후 실행 시 아래와 같은 에러가 발생하였고 구글링 결과

SDK44로 올라오면서 reanimated가 babel에 포함되어야 하도록 변경되었다고 한다.

 

즉 babel.config.js 코드를 아래와 같이 변경한후

// babel.config.js 파일 변경

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
      'babel-preset-expo',
      'module:metro-react-native-babel-preset'
    ],
    plugins: [
      'react-native-reanimated/plugin',
    ]
  };
};

아래의 명령어로 실행하니 정상작동하였다. 아래는 해당이슈에 대한 링크이다.

// 터미널에서 실행
expo r -c

https://stackoverflow.com/questions/70516450/error-requiring-module-node-modules-react-native-reanimated-src-animated-js

Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js",

 

 

마지막으로 가장 중요한 것은 react-native-reanimated V2 버전이상은 realm과 에러가 충돌이 난다는 것이다.

이것 때문에 엄청 매우매우 짜증이 났기 때문에 되도록이면 react-native-reanimated@1.13.2 버전을 사용하는 것을 추천한다.

realm과의 에러는 아래와 같은 에러로, 간단하게 말하면 realm에 저장을 해도 계속 빈배열만 나오는 문제이다.

아무리 생각해도 이상해서 화가 엄청 났는데, 구글링을 통해 해결하였다.

정말 너무 복잡한 것 같다 ㅠㅠ

https://stackoverflow.com/questions/61116210/realm-objects-return-empty-objects-on-react-native

Realm.objects() return empty objects on React Native

** 해결방법 찾은것

https://github.com/realm/realm-js/issues/3710

realm.object() returning array with empty object · Issue #3710 · realm/realm-js