What I want

ScrollView 컴포넌트가 Refresh 되는 효과와 Refresh 됐을때 콜백함수를 호출

How to do

import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

const wait = (timeout) => {
  return new Promise(resolve => setTimeout(resolve, timeout));
}
const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);
  
<SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
 >
 

1. import RefreshControl from 'react-native'
2. ScrollView Props의 refreshControl 에게 노드를 반환한다. 이때 RefreshControl Component는 refreshing,onRefresh 의 Props를 가지는데
   (1) refreshing (boolean) : 현재 스크롤뷰가 refreshing 중인가? true일때 스크롤뷰 위에 ActivityIndicator가 움직이는 것을 볼 수 있다.
   (2) onRefresh (callBack) : ScrollView 가 refresh 됐을 때 호출한다. 위 예제에서는 refreshing을 true로 변경 후 2초 후 다시 false로 변경하는 콜백함수를 호출했다.