문제

React Native 개발을 하다보면, 다른 라이브러리와 swmansion의 react-native-reanimated 라이브러리가 충돌하는 경우가 많다.

Animated?

리액트 네이티브 환경에서 자연스럽고 편리하게 애니메이션 효과를 구축하기 위해 만들어졌다. Animated.Value, Animated.timing 값의 조작을 통해 구현된다. 예를 들면, 1초동안 서서히 검정색에서 하얀색으로 변하는 애니메이션은 Animated 컴포넌트로 구현된다.

The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution. (more)

Why Reanimated?

왜 굳이 Reanimated가 필요할까?
React Native에서 자바스크립트 쓰레드와 UI가 비동기적으로 통신하고, 자바스크립트 쓰레드가 처리할 작업의 양이 많다보니 UI에 비해 자바스크립트 쓰레드의 이벤트 처리가 자꾸만 지연되는 문제가 발생한다.
Reanimated는 메인 자바스크립트 스레드에 가해지는 부하 걱정 없이 터치 이벤트에 즉시 응답하고, 이벤트가 발생했을 때 동일한 프레임 내에서 UI를 업데이트하기 위해서 개발되었다.

In React Native by default all updates are delayed by at least one frame as the communication between UI and JavaScript thread is asynchronous and UI thread never waits for the JavaScript thread to finish processing events. On top of the lag with JavaScript playing many roles like running react diffing and updates, executing app's business logic, processing network requests, etc., it is often the case that events can't be immediately processed thus causing even more significant delays. (more)

하지만, Reanimated 라이브러리를 사용하다보면 에러를 자주 만난다.

• Reanimated 컴포넌트를 직접 사용할 때도 종종 에러가 발생하고,
• 이를 의존성으로 갖는 Drawer Navigator은 설치조차 되지 않을 때도 있었다.

해결

ReAnimated Version 2에 한해 유효합니다.

환경설정 제대로 하기

swmansion의 react-native-remanimated 공식 문서에 따라 React Native 환경 설정을 추가한다.
Android, babel 환경설정 코드를 수정해야 한다.

버전 맞추기

경험상 아래 버전으로 맞추면 비교적 에러가 덜 발생한다.

"react-native": "0.66.0",
"react-native-reanimated": "^2.3.0-beta.2"

둘 중 한 가지 방법으로 해결이 되면 다행이고, 아니면 GitHub PR을 밤새 파헤쳐야 한다.

프로그램은 사람이 만들었기 때문에 분명 사람이 해결할 수 있는 에러가 발생한다!
에러 원인을 찾다가 지칠 때 Anna Bell 교수님의 말씀을 떠올리자!!

Computers only know what you tell them