react-native pull to refresh 당겨서 새로고침 개발기록

당겨서 새로고침을 만들려고 했는데 기존에 refreshControll를 사용하면 인디케이터만 나오더라.

 

내가 원하는 이미지나 문구나 애니메이션을 넣고싶은데 Flatlist의 내장 refreshControll로는 불가능했다.

 

안드로이드에서는 심지어 본문컨텐츠는 그대로이고 인디케이터만 하단으로 대롱대롱 매달려서 내려오는거였다.

 

많은 라이브러리를 검색했지만 관리가 안된지 오래된 라이브러리들뿐이였고 외쿠긴 유투버형들이 소개한 라이브러리들은 내가 원하는 방향이랑은 달랐고 안드로이드에서 안된다라는 댓글도 많았다.

 

실제로 샘플짤도 대부분 ios로 올렸고 안드로이드에서 안된다라는 댓글이 많았는데 해결된거는 본적없다.

 

그래서 직접 제스처와 reanimated를 이용해서 만들어보았다.

 

react-native는 이번에 처음사용한거라서 (앱개발자체가 처음임..) native와 라이브러리를 깊게 이해하고 만든게 아니다보니 os,기기별 문제가 다양하게 나왔다.

 

 

 

 

내가 만났던 이슈는

 

 

1. (react-native-gesture-handler 로 시작 ) 최상단에 좌우 스와이프가 존재하고 해당 위치에서 좌우 스와이프를 움직일때 살짝 대각선방향으로 움직이면 당기는 모션이 우선시되어서 새로고침영역이 살짝 내려오면서 스와이프가 진행되지않았다.

그래도 밑으로 내리는 y좌표가 4이상일때만 하려고 했는데 아무리 해도 되지않았다.

 

깃헙이슈를 열심히 검색을 해보니 same issue맨들이 꽤 많았다.

(기능문제는 아니였는데 사용이 조금 불편했었다)

 

결국엔 react-native 내장인 PanResponder 로 변경했더니 아주 잘되었다.

 

 

 

2. PanResponder로 변경했더니 안드로이드에서 문제가 발생했다.

 

이 문제는 react-native 깃헙에서 PanResponder 를 검색하면 해결되지않고 15일이 방치되어 closed 된 이슈들이 나를 반기고 있었다.

 

몇년되었는데도 불구하고 여전히 동일한 문제가 발생했다.

 

문제는 당기는 제스처를 반복적으로 하다보면 갑자기 당기는 중간에 제스처가 멈춰버린다.

 

다시 원래모양으로 위로 올려주거나 끝까지 당기면 새로고침api를 수행한뒤에 스크롤값을 0으로 바꾸어서 원래모양으로 돌아가는데

 

2가지 문제가 있었다.

(참고로 난 해결못해서 다른방법으로 우회함)

 

문제1) 

제스처가 종료됬는데도 불구하고 onPanResponderRelease가 수행되지않는다.

그러다보니 제스처를 중간에 손가락을 뗏는데 새로고침 컴포넌트가 밖으로 나와있다.

 

문제2)

그래서 onPanResponderRelease 에서 onPanResponderEnd로 변경을 했더니 잘 해결이 되었다.

그런데 문제가 제스처를 엄청 빠르게 수행하면 PanResponder가 도는 js thread와 reanimated가 도는 ui thread가 스크롤y 값을 브릿지로 전달하는데 이 싱크에 문제가 있는거같다. (깃헙이슈 댓글에 누가 써놓은거 발번역으로 이해함)

 

그러다보니 제스처시작-> 제스처 중 ->제스처 종료 이렇게 되어야하는데

 

제스처 시작->제스처 종료 이렇게 되어버린다.

 

손가락을 뗴지않았는데도 제스처가 강제로 종료되다보니 당기는 모션이 살짝내려왔다가 원래자리로 돌아가더라.

 

그래서 react-native-gesture-handler로 바꾸니 안드로이드에서 잘되더라

물론 엄청 빠르고 반복적으로 제스처를 하면 가~~끔 안될때가 있다.

 

 

결국엔 플랫폼별로 다르게 했다.

 

 

ios는 PanResponder를 사용했고, aos는 react-native-reanimated 를 사용했다.

 

안드로이드는 useAnimatedGestureHandler 를 사용해서 제스처를 만들었는데 2버전부터는 deprecated 되었더라...

 

부랴부랴 2버전용으로 마이그레이션중인데 잘되는거 같다.(아직은)