feat(example): add large image list example (#1145)

Author: ahmedAlaaInstabug

examples/default/src/navigation/HomeStack.tsx

@@ -15,6 +15,7 @@ import { FlatListScreen } from '../screens/user-steps/FlatListScreen';
 import { ComplexViewsScreen } from '../screens/user-steps/ComplexViewsScreen';
 import { SectionListScreen } from '../screens/user-steps/SectionListScreen';
 import { GesturesScreen } from '../screens/user-steps/GesturesScreen';
+import { LargeImageListScreen } from '../screens/user-steps/LargeImageListScreen';
 import { SessionReplayScreen } from '../screens/SessionReplayScreen';
 
 export type HomeStackParamList = {
@@ -31,6 +32,7 @@ export type HomeStackParamList = {
   ComplexViews: undefined;
   SectionList: undefined;
   Gestures: undefined;
+  LargeImageList: undefined;
   SessionReplay: undefined;
 };
 
@@ -93,6 +95,11 @@ export const HomeStackNavigator: React.FC = () => {
         component={SectionListScreen}
         options={{ title: 'Section List' }}
       />
+      <HomeStack.Screen
+        name="LargeImageList"
+        component={LargeImageListScreen}
+        options={{ title: 'Large Image List' }}
+      />
       <HomeStack.Screen name="Gestures" component={GesturesScreen} />
     </HomeStack.Navigator>
   );

examples/default/src/screens/user-steps/LargeImageListScreen.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { FlatList, RefreshControl } from 'react-native';
+import { Screen } from '../../components/Screen';
+import { useDelayedRefresh } from '../../utils/useDelayedRefresh';
+import { AspectRatio, Skeleton, Image, Box } from 'native-base';
+
+type ImageItemProps = { link: string };
+
+const LargeImageListItem: React.FC<ImageItemProps> = ({ link }: ImageItemProps) => {
+  const [isLoading, setLoading] = useState<boolean>(true);
+  return (
+    <Box my="2">
+      <Skeleton h="80" isLoaded={!isLoading} />
+      <AspectRatio w="100%" ratio={16 / 9}>
+        <Image
+          onLoadStart={() => setLoading(true)}
+          onLoadEnd={() => setLoading(false)}
+          source={{
+            uri: link,
+          }}
+          alt="image"
+        />
+      </AspectRatio>
+    </Box>
+  );
+};
+
+export const LargeImageListScreen: React.FC = () => {
+  const { refreshing, onRefresh } = useDelayedRefresh();
+
+  return (
+    <Screen>
+      <FlatList<string>
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        data={Array.from(
+          { length: 100 },
+          () =>
+            `https://picsum.photos/${Math.floor(Math.random() * 200) + 300}/${
+              Math.floor(Math.random() * 200) + 600
+            }`,
+        )}
+        keyExtractor={(item) => item.toString()}
+        renderItem={({ item }) => <LargeImageListItem link={item} />}
+      />
+    </Screen>
+  );
+};

examples/default/src/screens/user-steps/UserStepsScreen.tsx

@@ -16,6 +16,7 @@ export const UserStepsScreen: React.FC<NativeStackScreenProps<HomeStackParamList
       <ListTile title="Section List" onPress={() => navigation.navigate('SectionList')} />
       <ListTile title="Complex Views" onPress={() => navigation.navigate('ComplexViews')} />
       <ListTile title="Gestures" onPress={() => navigation.navigate('Gestures')} />
+      <ListTile title="Large Image List" onPress={() => navigation.navigate('LargeImageList')} />
     </Screen>
   );
 };