[ React Native ] useRef로 구현한 Animated.Value 가 컴포넌트 리랜더링시 초기화되는 것처럼 보이는 오류

animated value를 사용시에 항상

 

const animatedY = useRef(new Animated.Value(0)).current;

이런식으로 useRef를 사용한다.

이는 데이터영역의 state 값들이 변화시에 컴포넌트의 리랜더링이 필수적으로 일어날수밖에 없는 상황에 

애니메이션값을 초기화시키지 않기 위함이다.

 

현재 구현한 애니메이션은 스크롤에 따라 opacity 가 변하고, 헤더의 위치및 높이가 변하고 등등

 

animated.timing 함수를 사용하는 부분과, Animated event 를 사용하는 부분으로 나누어져있다.

 

가끔 0번째에서 첫번째로 넘어갈때, 애니메이션이 끊기는 현상이 발생하여 디버깅해보니,

리랜더링시에 애니메이션이 초기화되서 그런가 싶었던 이유와는 별개로, nativeDriver를 사용하는 쓰레드에서 에러가 생기는것 같았다.

 

따라서 useNativeDriver 을 false 로 주니, 해결되었다.

 

useNativeDriver는 애니메이션 처리 작업을 자바스크립트 엔진이 아닌 네이티브 레벨에서 진행하게 하는 옵션으로 transform, opacity처럼 레이아웃과 관련없는 스타일에만 적용할 수 있다. 예를 들어 레이아웃에 영향을 끼치는 left, width, paddingLeft, marginLeft와 같은 스타일에는 꼭 useNativeDriver를 false로 지정해야 한다.