[RN] react-native scrollview refreshControl not working 이슈 해결

홈 피드를 새로고침하는 등의 기능을 구현하려면

react native scrollview의 refreshControl props를 활용하면 매우 편한데,

아무리 스크롤을 당겨도 refreshControl이 동작하지 않는 경우에

 

scrollView에

<ScrollView
bounces={false}
...
>

위와 같이 bounces={false} 로 되어있는 지 확인해보자.

나는 스크롤뷰를 사용할 땐 indicator와 bounces를 모두 false 해두는 습관이 있는데,

스크롤뷰를 아래로 스와이프 했을 때 바운스되면서 동작하는 RefreshControl인데 그 bounces 속성을 꺼두었으니

안나오는게 당연하다..

 

---

refreshControl usage

import {RefreshControl, ScrollView} from 'react-native';
...

const [isRefresh, setIsRefresh] = useState<boolean>(false);

//# Feed update function
  const wait = (timeout: number) => {
    return new Promise(resolve => setTimeout(resolve, timeout));
  };
  const onRefresh = useCallback(() => {
    setIsRefresh(true);
    wait(2000).then(() => {
      setIsRefresh(false);
      console.log('hello world!');
    });
  }, []);



return (
<ScrollView
refreshControl={
          <RefreshControl refreshing={isRefresh} onRefresh={onRefresh} />
        }
>
{children}

</ScrollView>

)

 

위 코드에 따르면, 스크롤뷰의 scrollY값이 0일 때 아래로 스와이프 하게되면 onRefresh 함수를 타게 된다.

이후에 wait()의 then절에 타임아웃이 도는동안 피드를 업데이트해주는 함수를 넣어주면 간단하게 피드 업데이트 기능을 구현할 수 있다.