feat: add new refresh control example (#6)

Author: kanelloc

example/src/App.tsx

@@ -8,6 +8,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import type { RootStackParamList } from './types';
 import { ImageForegroundExample } from './screens/ImageForegroundExample';
 import { OnlyForegroundExample } from './screens/OnlyForegroundExample';
+import { RefreshControlExample } from './screens/RefreshControlExample';
 
 const App = () => {
   const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -36,6 +37,10 @@ const App = () => {
             name="OnlyForegroundExample"
             component={OnlyForegroundExample}
           />
+          <Stack.Screen
+            name="RefreshControlExample"
+            component={RefreshControlExample}
+          />
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaProvider>

example/src/screens/ExamplesDirectory.tsx

@@ -15,6 +15,7 @@ export const ExamplesDirectory = ({ navigation }: Props) => {
     { screen: SCREENS.SAFE_AREA_VIEW_EXAMPLE },
     { screen: SCREENS.IMAGE_FOREGROUND_EXAMPLE },
     { screen: SCREENS.ONLY_FOREGROUND_EXAMPLE },
+    { screen: SCREENS.REFRESH_CONTROL_EXAMPLE },
   ];
 
   return (

example/src/screens/RefreshControlExample.tsx

@@ -0,0 +1,53 @@
+import { Card, TopNavBar, HeaderNavBar } from '../components';
+import * as React from 'react';
+import { AnimatedScrollView } from '@kanelloc/react-native-animated-header-scroll-view';
+import { data, isIOS } from '../utils';
+import { RefreshControl, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+const wait = (timeout: any) => {
+  return new Promise((resolve) => setTimeout(resolve, timeout));
+};
+
+export const RefreshControlExample = () => {
+  const [refreshing, setRefreshing] = React.useState(false);
+
+  const onRefresh = React.useCallback(() => {
+    setRefreshing(true);
+    wait(2000).then(() => setRefreshing(false));
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container} edges={['bottom']}>
+      <AnimatedScrollView
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            style={styles.refresh}
+            progressViewOffset={32} // Add offset to position correctly progressView in iOS
+            tintColor="black"
+          />
+        }
+        headerMaxHeight={400}
+        topBarHeight={isIOS ? 90 : 70}
+        HeaderNavbarComponent={<HeaderNavBar />}
+        TopNavBarComponent={<TopNavBar />}
+        headerImage={require('../../assets/cabin.jpg')}
+      >
+        {data.map((e) => {
+          return <Card item={e} key={e} />;
+        })}
+      </AnimatedScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  refresh: {
+    zIndex: 10,
+  },
+});

example/src/types.d.ts

@@ -5,4 +5,5 @@ export type RootStackParamList = {
   SimpleExample: undefined;
   ImageForegroundExample: undefined;
   OnlyForegroundExample: undefined;
+  RefreshControlExample: undefined;
 };

example/src/utils/enums.ts

@@ -4,4 +4,5 @@ export enum SCREENS {
   SAFE_AREA_VIEW_EXAMPLE = 'SafeAreaViewExample',
   IMAGE_FOREGROUND_EXAMPLE = 'ImageForegroundExample',
   ONLY_FOREGROUND_EXAMPLE = 'OnlyForegroundExample',
+  REFRESH_CONTROL_EXAMPLE = 'RefreshControlExample',
 }