[ React-native / 트러블슈팅 ] react-native-reanimated 버전 충돌 에러

현재 사용하고 있는 버전

- react : 18.1.0

- react-native : 0.70.15

---

 

 

다양한 내비게이터를 사용하고 싶어서 이와 같이 라이브러리를 설치하였습니다.

yarn add @react-navigation/drawer react-native-gesture-handler react-native-reanimated

 

성공적으로 설치되었고 아래와 같이 작성해주었습니다.

 

 

 

cd ios
pod install

 

pod install하자마자 사진과 같은 에러가 발생했습니다.

 

[Reanimated] Unsupported React Native version. Please use 0.71 or newer..

🚫 자세히 보니 react-native버전과 새로 설치한 react-native-reanimated의 버전이 일치하지 않다고 뜹니다. 저는 react-native의 버전은 그대로 유지하고 싶어서 현재 설치된 react-native 버전(0.70.15)에서 사용할 수 있는 react-native-reanimated버전을 찾아보았습니다. (호환성 고려)

 

결론

: react-native(0.70.15) <-> react-native-reanimated(2.14.4)

 

 

▶︎ 해결방법

# 기존 reanimated 패키지 제거하기
yarn remove react-native-reanimated

# reanimated 버전 2.14.4 설치하기
yarn add react-native-reanimated@2.14.4

 

 

설치가 완료된 이후 다시 시뮬레이터를 아래와 같은 방법으로 재시작하였습니다.

cd ios
pod install
cd ..
yarn ios

 

 

시뮬레이터가 정상적으로 동작하였습니다.

 

 

 

이제 다시 Visual Studio Code에서 코드를 작성하며 설치한 라이브러리를 사용하던 중 하나의 트러블슈팅이 또 발생했습니다 🥹

 

Failed to initialize react-native-reanimated library, ~

🚫 이 에러는 react-native-reanimated가 제대로 설정되지 않았을 때 발생하는 문제입니다. 

 

 

▶︎ 해결방법

1. babel.config.js 파일 수정

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // 이 줄을 추가하세요
  ],
};

cd ios
pod install
cd ..

# 캐시 초기화
yarn start --reset-cache
# 시뮬레이터 실행
yarn ios

정상적으로 작동된 것을 확인하였습니다.

 

 

 

 

 

⚠️ 주의사항

** 만약 캐시초기화에서 아래와 같은 에러가 발생한다면 이미 실행중인 metro가 존재한다는 의미입니다. 터미널로 켜져있는 이전 metro를 종료해주시면 해당 에러는 다시 발생하지 않습니다.