feat: shopify/flash-list support

README.md

@@ -17,6 +17,7 @@
     - [Tabs.Container](#tabscontainer)
     - [Tabs.Lazy](#tabslazy)
     - [Tabs.FlatList](#tabsflatlist)
+    - [Tabs.FlashList](#tabsflashlist)
     - [Tabs.SectionList](#tabssectionlist)
     - [Tabs.ScrollView](#tabsscrollview)
     - [Ref](#ref)
@@ -237,6 +238,10 @@ Typically used internally, but if you want to mix lazy and regular screens you c
 
 Use like a regular FlatList.
 
+### Tabs.FlashList
+
+Use like a regular FlashList.
+
 ### Tabs.ScrollView
 
 Use like a regular ScrollView.

documentation/README_TEMPLATE.md

@@ -17,6 +17,7 @@
     - [Tabs.Container](#tabscontainer)
     - [Tabs.Lazy](#tabslazy)
     - [Tabs.FlatList](#tabsflatlist)
+    - [Tabs.FlashList](#tabsflatlist)
     - [Tabs.SectionList](#tabssectionlist)
     - [Tabs.ScrollView](#tabsscrollview)
     - [Ref](#ref)

example/index.js

@@ -1,8 +1,8 @@
-import { registerRootComponent } from 'expo';
+import { registerRootComponent } from 'expo'
 
-import App from './App';
+import App from './App'
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in Expo Go or in a native build,
 // the environment is set up appropriately
-registerRootComponent(App);
+registerRootComponent(App)

example/ios/Podfile.lock

@@ -335,6 +335,8 @@ PODS:
     - React-jsi (= 0.71.6)
     - React-logger (= 0.71.6)
     - React-perflogger (= 0.71.6)
+  - RNFlashList (1.4.2):
+    - React-Core
   - RNGestureHandler (2.9.0):
     - React-Core
   - RNReanimated (2.14.4):
@@ -409,6 +411,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -500,6 +503,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNFlashList:
+    :path: "../node_modules/@shopify/flash-list"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -508,8 +513,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: 57d2868c099736d80fcd648bf211b4431e51a558
-  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
+  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   EXApplication: d8f53a7eee90a870a75656280e8d4b85726ea903
   EXConstants: f348da07e21b23d2b085e270d7b74f282df1a7d9
   EXFileSystem: 844e86ca9b5375486ecc4ef06d3838d5597d895d
@@ -521,7 +526,7 @@ SPEC CHECKSUMS:
   FBLazyVector: a83ceaa8a8581003a623facdb3c44f6d4f342ac5
   FBReactNativeSpec: 85eee79837cb797ab6176f0243a2b40511c09158
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: 476ee3e89abb49e07f822b48323c51c57124b572
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: 5c6fd63b03abb06947d348dadac51c93e3485bd8
   RCTTypeSafety: 1c66daedd66f674e39ce9f40782f0d490c78b175
@@ -550,10 +555,11 @@ SPEC CHECKSUMS:
   React-RCTVibration: 73d201599a64ea14b4e0b8f91b64970979fd92e6
   React-runtimeexecutor: 8692ac548bec648fa121980ccb4304afd136d584
   ReactCommon: e1067159764444e5db7c14e294d5cd79fb159c59
+  RNFlashList: 7fbca4fc075484a9426f1610d648dbea2de94eb0
   RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
   RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128
   Yoga: ba09b6b11e6139e3df8229238aa794205ca6a02a
 
 PODFILE CHECKSUM: 4a1d4df08804ad081db13b6bea02bebbb098497a
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.11.3

example/ios/ReactNativeCollapsibleTabViewDemos.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

example/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@shopify/flash-list": "^1.4.2",
     "expo": "^48.0.0",
     "expo-constants": "~14.2.1",
     "expo-splash-screen": "~0.18.1",

example/src/App.tsx

@@ -19,6 +19,7 @@ import ConditionalTabs from './ConditionalTabs'
 import Default from './Default'
 import DefaultCustomLabels from './DefaultCustomLabels'
 import DynamicTabs from './DynamicTabs'
+import FlashList from './FlashList'
 import HeaderOverscrollExample from './HeaderOverscroll'
 import Lazy from './Lazy'
 import MinHeaderHeight from './MinHeaderHeight'
@@ -36,6 +37,7 @@ import { ExampleComponentType } from './types'
 
 const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   Default,
+  FlashList,
   DefaultCustomLabels,
   Snap,
   RevealHeaderOnScroll,

example/src/FlashList.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useHeaderMeasurements } from 'react-native-collapsible-tab-view'
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated'
+
+import { useCurrentTabScrollY } from '../../src/hooks'
+import ExampleComponent from './Shared/ExampleComponentFlashList'
+import ReText from './Shared/ReText'
+import { ExampleComponentType } from './types'
+
+const title = 'FlashList (contacts tab)'
+
+const MIN_HEADER_HEIGHT = 48
+
+export const Header = () => {
+  const { top, height } = useHeaderMeasurements()
+  const scrollY = useCurrentTabScrollY()
+
+  const scrollYText = useDerivedValue(
+    () => `Scroll Y is: ${scrollY.value.toFixed(2)}`
+  )
+
+  const stylez = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            top.value,
+            [0, -(height.value || 0 - MIN_HEADER_HEIGHT)],
+            [0, (height.value || 0 - MIN_HEADER_HEIGHT) / 2]
+          ),
+        },
+      ],
+    }
+  })
+
+  return (
+    <View style={[styles.root]}>
+      <Animated.View style={[styles.container, stylez]}>
+        <ReText style={styles.text} text={scrollYText} />
+      </Animated.View>
+    </View>
+  )
+}
+
+const Example: ExampleComponentType = () => {
+  return (
+    <ExampleComponent
+      renderHeader={() => <Header />}
+      minHeaderHeight={MIN_HEADER_HEIGHT}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: '#2196f3',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+    height: 250,
+  },
+  container: {
+    height: MIN_HEADER_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+  },
+  text: {
+    position: 'absolute',
+    color: 'white',
+    fontSize: 24,
+    textAlign: 'center',
+  },
+})
+
+Example.title = title
+
+export default Example