Update example

Author: m-bert

apps/common-app/src/components/flatlist/index.tsx

@@ -1,6 +1,11 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { FlatList, GestureHandlerRootView } from 'react-native-gesture-handler';
+import {
+  FlatList,
+  RefreshControl,
+  GestureHandlerRootView,
+  GHFlatListRef,
+} from 'react-native-gesture-handler';
 
 const DATA = Array.from({ length: 20 }, (_, i) => ({
   id: i.toString(),
@@ -14,15 +19,30 @@ const Item = ({ title }: { title: string }) => (
 );
 
 export default function FlatListExample() {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const ref = useRef<GHFlatListRef>(null);
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    console.log(ref.current);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 1500);
+  };
+
   return (
     <GestureHandlerRootView>
       <FlatList
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        ref={ref}
         data={DATA}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => <Item title={item.title} />}
         contentContainerStyle={styles.container}
       />
-      ;
     </GestureHandlerRootView>
   );
 }