Feat/flashlist (#339)

- withTabbedHeaderFlashList - create TabbedHeaderFlashList example - withAvatarHeaderFlashList - create AvatarHeaderFlashListExample - withDetailsHeaderFlashList - create withDetailsHeaderFlashList - create DetailsHeaderFlashList & StickyHeaderFlashList examples
netguru · Jul 27, 2022 · 6e5d8c7 · 6e5d8c7
1 parent 7ab9362
commit 6e5d8c7
Show file tree

Hide file tree

Showing 56 changed files with 2,071 additions and 313 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -311,6 +311,8 @@ PODS:
     - React-perflogger (= 0.68.2)
   - RNCMaskedView (0.2.6):
     - React-Core
+  - RNFlashList (1.2.0):
+    - React-Core
   - RNGestureHandler (2.2.1):
     - React-Core
   - RNReanimated (2.8.0):
@@ -389,6 +391,7 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
+  - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -481,6 +484,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCMaskedView:
     :path: "../node_modules/@react-native-masked-view/masked-view"
+  RNFlashList:
+    :path: "../node_modules/@shopify/flash-list"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -533,6 +538,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: b960b687d2dfef0d3761fbb187e01812ebab8b23
   ReactCommon: 095366164a276d91ea704ce53cb03825c487a3f2
   RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd
+  RNFlashList: adcc3a39aa72012852681bc439ccb4108c8c4448
   RNGestureHandler: 1dc1ea9d4b64f999042afafbaccf5b143f0b2fa2
   RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393
   RNScreens: 4d83613b50b74ed277026375dc0810893b0c347f

diff --git a/example/package.json b/example/package.json
@@ -15,6 +15,7 @@
     "@react-native-masked-view/masked-view": "0.2.6",
     "@react-navigation/native": "6.0.10",
     "@react-navigation/stack": "6.2.1",
+    "@shopify/flash-list": "^1.2.0",
     "expo": "^45.0.0",
     "expo-blur": "~11.1.0",
     "expo-font": "~10.1.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,24 +1,23 @@
 import * as Font from 'expo-font';
 import * as React from 'react';
-import { useEffect, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import AppNavigator from './navigation/AppNavigator';
 
 export default function App() {
-  const [loaded, setLoaded] = useState(false);
+  const [loaded, setLoaded] = React.useState(false);
 
-  const loadFonts = async () => {
+  const loadFonts = React.useCallback(async () => {
     await Font.loadAsync({
       'AvertaStd-Semibold': require('./assets/fonts/AvertaStd-Semibold.otf'),
       'AvertaStd-Regular': require('./assets/fonts/AvertaStd-Regular.otf'),
     });
     setLoaded(true);
-  };
+  }, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     loadFonts();
-  });
+  }, [loadFonts]);
 
   return <SafeAreaProvider>{loaded ? <AppNavigator /> : <></>}</SafeAreaProvider>;
 }
diff --git a/example/src/assets/data/tabbedSections.ts b/example/src/assets/data/tabbedSections.ts
@@ -300,3 +300,270 @@ export const TABBED_SECTIONS: SectionListData<ItemType, SectionType>[] = [
     title: 'Pasta',
   },
 ];
+
+export const FLASHLIST_TABBED_SECTIONS: (SectionType | ItemType)[] = [
+  {
+    tabTestID: tabbedSectionsTestIDs.pizza,
+    title: 'Pizza',
+  },
+  {
+    id: '0',
+    title: 'Pizza Prosciutto e Funghi',
+    subtitle: 'tomato sauce, mozzarella, ham, mushrooms',
+    imageUrl: foodImagesUrl + '/pizza/pizza1.jpg',
+  },
+  {
+    id: '1',
+    title: 'Pizza Margharita',
+    subtitle: 'tomato sauce, mozzarella',
+    imageUrl: foodImagesUrl + '/pizza/pizza2.jpg',
+  },
+  {
+    id: '10',
+    title: 'Pizza Diavola',
+    subtitle: 'tomato sauce, mozzarella, salami',
+    imageUrl: foodImagesUrl + '/pizza/pizza3.jpg',
+  },
+  {
+    id: '100',
+    title: 'Pizza Funghi',
+    subtitle: 'tomato sauce, mozzarella, mushrooms',
+    imageUrl: foodImagesUrl + '/pizza/pizza4.jpg',
+  },
+  {
+    id: '1000',
+    title: 'Pizza Hawai',
+    subtitle: 'tomato sauce, mozzarella, ham, pineapple',
+    imageUrl: foodImagesUrl + '/pizza/pizza5.jpg',
+  },
+  {
+    tabTestID: tabbedSectionsTestIDs.burgers,
+    title: 'Burgers',
+  },
+  {
+    id: '1003',
+    title: 'Burger Double Cheese',
+    subtitle: 'beef, lettuce, red onion, tomato, pickles, onion rings, BBQ sauce',
+    imageUrl: foodImagesUrl + '/burger/burger1.jpg',
+  },
+  {
+    id: '1004',
+    title: 'Burger Bacon',
+    subtitle: 'beef, lettuce, tomato, cheddar, pickles, bacon, mustard sauce',
+    imageUrl: foodImagesUrl + '/burger/burger2.jpg',
+  },
+  {
+    id: '1005',
+    title: 'Burger Classic',
+    subtitle: 'beef, lettuce, tomato, pickles, red onion, mustard, ketchup',
+    imageUrl: foodImagesUrl + '/burger/burger3.jpg',
+  },
+  {
+    id: '1006',
+    title: 'Burger Chicken',
+    subtitle: 'chicken, lettuce, onion rings, mayo sauce',
+    imageUrl: foodImagesUrl + '/burger/burger4.jpg',
+  },
+  {
+    id: '1008',
+    title: 'Nachos Burger',
+    subtitle: 'beef, lettuce, jalapeno, tomato, nachos, jalapeno sauce',
+    imageUrl: foodImagesUrl + '/burger/burger5.jpg',
+  },
+  {
+    id: '1009',
+    title: 'Burger Camembert',
+    subtitle: 'beef, lettuce, camembert, cranberries, tomato, mayo sauce',
+    imageUrl: foodImagesUrl + '/burger/burger6.jpg',
+  },
+  {
+    tabTestID: tabbedSectionsTestIDs.kebab,
+    title: 'Kebab',
+  },
+  {
+    id: '1011',
+    title: 'Kebab 1',
+    subtitle: 'meat, salad, mild sauce',
+    imageUrl: foodImagesUrl + '/biryani/biryani1.jpg',
+  },
+  {
+    id: '1012',
+    title: 'Kebab 2',
+    subtitle: 'meat, salad, mixed mild & hot sauce',
+    imageUrl: foodImagesUrl + '/biryani/biryani2.jpg',
+  },
+  {
+    id: '1013',
+    title: 'Kebab 3',
+    subtitle: 'meat, salad, hot sauce',
+    imageUrl: foodImagesUrl + '/biryani/biryani3.jpg',
+  },
+  {
+    tabTestID: tabbedSectionsTestIDs.chineseFood,
+    title: 'Chinese Food',
+  },
+  {
+    id: '1023',
+    title: 'Fried chicken with pasta and vegetables',
+    subtitle: 'chicken, pasta, vegetables',
+    imageUrl: foodImagesUrl + '/rice/rice1.jpg',
+  },
+  {
+    id: '1024',
+    title: 'Spring rolls with vegetables',
+    subtitle: 'spring rolls, vegetables',
+    imageUrl: foodImagesUrl + '/rice/rice2.jpg',
+  },
+  {
+    id: '1025',
+    title: 'Breaded Chicken with rice and vegetables',
+    subtitle: 'chicken, rice, vegetables',
+    imageUrl: foodImagesUrl + '/rice/rice3.jpg',
+  },
+  {
+    id: '1026',
+    title: 'Fried rice with chicken, eggs and vegetables',
+    subtitle: 'rice, chicken, eggs, vegetables',
+    imageUrl: foodImagesUrl + '/rice/rice4.jpg',
+  },
+  {
+    id: '1027',
+    title: 'Breaded broccoli with hot garlic sauce',
+    subtitle: 'broccoli, garlic sauce',
+    imageUrl: foodImagesUrl + '/rice/rice5.jpg',
+  },
+  {
+    id: '1028',
+    title: 'Fried pork with pasta and vegetables',
+    subtitle: 'pork, pasta, vegetables',
+    imageUrl: foodImagesUrl + '/rice/rice6.jpg',
+  },
+  {
+    id: '1029',
+    title: 'Shrimps with garlic sauce',
+    subtitle: 'shrimps, garlic sauce',
+    imageUrl: foodImagesUrl + '/rice/rice7.jpg',
+  },
+  {
+    tabTestID: tabbedSectionsTestIDs.sushi,
+    title: 'Sushi',
+  },
+  {
+    id: '1032',
+    title: 'Sushi 1',
+    subtitle: 'sushi x5',
+    imageUrl: foodImagesUrl + '/rice/rice8.jpg',
+  },
+  {
+    id: '1033',
+    title: 'Sushi 2',
+    subtitle: 'sushi x10',
+    imageUrl: foodImagesUrl + '/rice/rice9.jpg',
+  },
+  {
+    id: '1035',
+    title: 'Sushi 3',
+    subtitle: 'sushi x15',
+    imageUrl: foodImagesUrl + '/rice/rice10.jpg',
+  },
+  {
+    id: '1036',
+    title: 'Sushi 4',
+    subtitle: 'sushi x20',
+    imageUrl: foodImagesUrl + '/rice/rice11.jpg',
+  },
+  {
+    id: '1037',
+    title: 'Sushi 5',
+    subtitle: 'sushi x25',
+    imageUrl: foodImagesUrl + '/rice/rice12.jpg',
+  },
+  {
+    id: '1038',
+    title: 'Sushi 6',
+    subtitle: 'sushi x30',
+    imageUrl: foodImagesUrl + '/rice/rice13.jpg',
+  },
+  {
+    id: '1039',
+    title: 'Sushi 7',
+    subtitle: 'sushi x35',
+    imageUrl: foodImagesUrl + '/rice/rice14.jpg',
+  },
+  {
+    id: '104',
+    title: 'Sushi 8',
+    subtitle: 'sushi x40',
+    imageUrl: foodImagesUrl + '/rice/rice15.jpg',
+  },
+  {
+    id: '1040',
+    title: 'Sushi 9',
+    subtitle: 'sushi x45',
+    imageUrl: foodImagesUrl + '/rice/rice16.jpg',
+  },
+  {
+    id: '1041',
+    title: 'Sushi 10',
+    subtitle: 'sushi x50',
+    imageUrl: foodImagesUrl + '/rice/rice17.jpg',
+  },
+  {
+    id: '1042',
+    title: 'Sushi 11',
+    subtitle: 'sushi x55',
+    imageUrl: foodImagesUrl + '/rice/rice18.jpg',
+  },
+  {
+    id: '1043',
+    title: 'Sushi 12',
+    subtitle: 'sushi x60',
+    imageUrl: foodImagesUrl + '/rice/rice19.jpg',
+  },
+  {
+    tabTestID: tabbedSectionsTestIDs.pasta,
+    title: 'Pasta',
+  },
+  {
+    id: '1044',
+    title: 'Allarrabiata',
+    subtitle: 'pasta',
+    imageUrl: foodImagesUrl + '/pasta/pasta1.jpg',
+  },
+  {
+    id: '1045',
+    title: 'Carbonara',
+    subtitle: 'pasta',
+    imageUrl: foodImagesUrl + '/pasta/pasta2.jpg',
+  },
+  {
+    id: '1047',
+    title: 'Bolognese',
+    subtitle: 'pasta',
+    imageUrl: foodImagesUrl + '/pasta/pasta3.jpg',
+  },
+  {
+    id: '1048',
+    title: 'Spinaci',
+    subtitle: 'pasta',
+    imageUrl: foodImagesUrl + '/pasta/pasta4.jpg',
+  },
+  {
+    id: '1049',
+    title: 'Aglio Olio',
+    subtitle: 'pasta',
+    imageUrl: foodImagesUrl + '/pasta/pasta5.jpg',
+  },
+  {
+    id: '1050',
+    title: 'Lasagne',
+    subtitle: 'pasta',
+    imageUrl: foodImagesUrl + '/pasta/pasta6.jpg',
+  },
+  {
+    id: '1051',
+    title: 'Funghi',
+    subtitle: 'pasta',
+    imageUrl: foodImagesUrl + '/pasta/pasta7.jpg',
+  },
+];
diff --git a/example/src/navigation/AppNavigator.tsx b/example/src/navigation/AppNavigator.tsx
@@ -1,6 +1,6 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import React from 'react';
+import * as React from 'react';
 
 import { CardScreen, HomeScreen, SimsScreen, YodaScreen } from '../screens';
 import {
@@ -16,6 +16,10 @@ import {
   TabbedHeaderListExample,
   TabbedHeaderPagerExample,
 } from '../screens/additionalExamples';
+import { AvatarHeaderFlashListExample } from '../screens/additionalExamples/AvatarHeaderFlashListExample';
+import { DetailsHeaderFlashListExample } from '../screens/additionalExamples/DetailsHeaderFlashListExample';
+import { StickyHeaderFlashListExample } from '../screens/additionalExamples/StickyHeaderFlashListExample';
+import { TabbedHeaderFlashListExample } from '../screens/additionalExamples/TabbedHeaderFlashListExample';
 import { TabbedHeaderWithSectionListsExample } from '../screens/additionalExamples/TabbedHeaderWithSectionLists';
 
 import { ROUTES } from './routes';
@@ -66,6 +70,22 @@ const AppNavigator: React.FC = () => (
         name={ROUTES.TABBED_HEADER_WITH_SECTION_LISTS}
         component={TabbedHeaderWithSectionListsExample}
       />
+      <Stack.Screen
+        name={ROUTES.TABBED_HEADER_FLASHLIST}
+        component={TabbedHeaderFlashListExample}
+      />
+      <Stack.Screen
+        name={ROUTES.AVATAR_HEADER_FLASHLIST}
+        component={AvatarHeaderFlashListExample}
+      />
+      <Stack.Screen
+        name={ROUTES.DETAILS_HEADER_FLASHLIST}
+        component={DetailsHeaderFlashListExample}
+      />
+      <Stack.Screen
+        name={ROUTES.STICKY_HEADER_FLASHLIST}
+        component={StickyHeaderFlashListExample}
+      />
     </Stack.Navigator>
   </NavigationContainer>
 );

diff --git a/example/src/navigation/routes.ts b/example/src/navigation/routes.ts
@@ -15,4 +15,8 @@ export const ROUTES = {
   DETAILS_HEADER_SCROLLVIEW: 'DetailsHeaderScrollView' as const,
   DETAILS_HEADER_SECTIONLIST: 'DetailsHeaderSectionList' as const,
   TABBED_HEADER_WITH_SECTION_LISTS: 'TabbedHeaderWithSectionLists' as const,
+  TABBED_HEADER_FLASHLIST: 'TabbedHeaderFlashList' as const,
+  AVATAR_HEADER_FLASHLIST: 'AvatarHeaderFlashList' as const,
+  DETAILS_HEADER_FLASHLIST: 'DetailsHeaderFlashList' as const,
+  STICKY_HEADER_FLASHLIST: 'StickyHeaderFlashList' as const,
 };