feat: add LegendList support

example/ios/Podfile.lock

@@ -1287,13 +1287,13 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: d3f49c53809116a5d38da093a8aa78bf551aed09
   DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
-  EXConstants: 988aa430ca0f76b43cd46b66e7fae3287f9cc2fc
-  EXFont: f20669cb266ef48b004f1eb1f2b20db96cd1df9f
-  Expo: e01a77c6fa4bc80a6d1bb949cda1d12d21044abd
-  ExpoFileSystem: eecaf6796aed0f4dd20042dc2ca2cac6c4bc1185
-  ExpoKeepAwake: 0f5cad99603a3268e50af9a6eb8b76d0d9ac956c
-  ExpoModulesCore: 61dc57c6e2a35f2f84baf488146db624e03af4cd
-  EXSplashScreen: 39244885abfb1b12765aae89edb90f8c88db6bbd
+  EXConstants: 348adb88fb0d65892f16732ec5e02e1365c31588
+  EXFont: 64e653a110eee050ad80dfcd676c4bada0a1ff92
+  Expo: 517abd0ff36eae90a7ec59c8afed4b5930e3657b
+  ExpoFileSystem: 1782f764e82822d89ff8f24dd51262a743a95967
+  ExpoKeepAwake: 3b8cf8533b9212500565a1e41fb080fc5af29918
+  ExpoModulesCore: b96fa696e035bf3a586daa87e547f2d3dbd07800
+  EXSplashScreen: bfc61068a9659d15f9c28e6b7fab96c0a3b40e11
   FBLazyVector: fbc4957d9aa695250b55d879c1d86f79d7e69ab4
   FBReactNativeSpec: 86de768f89901ef6ed3207cd686362189d64ac88
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
@@ -1305,49 +1305,49 @@ SPEC CHECKSUMS:
   RCTTypeSafety: a759e3b086eccf3e2cbf2493d22f28e082f958e6
   React: 805f5dd55bbdb92c36b4914c64aaae4c97d358dc
   React-callinvoker: 6a697867607c990c2c2c085296ee32cfb5e47c01
-  React-Codegen: c4447ffa339f4e7a22e0c9c800eec9084f31899c
-  React-Core: 49f66fecc7695464e9b7bc7dc7cd9473d2c60584
-  React-CoreModules: 710e7c557a1a8180bd1645f5b4bf79f4bd3f5417
-  React-cxxreact: 345857b5e4be000c0527df78be3b41a0677a20ce
+  React-Codegen: 5dc5a1d423218759879abd3d4de9df59d0eba45a
+  React-Core: b65cfcd4bd8249ed4f55861680ed7a0fc8af7714
+  React-CoreModules: 399f72f0892befe0fde5d415703c0b9b356762e7
+  React-cxxreact: b626dce463af3c20876ff233489fc3d635f7ff24
   React-debug: f1637bce73342b2f6eee4982508fdfb088667a87
-  React-Fabric: 4dfcff8f14d8e5a7a60b11b7862dad2a9d99c65b
-  React-FabricImage: 4a9e9510b7f28bbde6a743b18c0cb941a142e938
-  React-graphics: dd5af9d8b1b45171fd6933e19fed522f373bcb10
-  React-hermes: a52d183a5cf8ccb7020ce3df4275b89d01e6b53e
-  React-ImageManager: c5b7db131eff71443d7f3a8d686fd841d18befd3
-  React-jserrorhandler: 97a6a12e2344c3c4fdd7ba1edefb005215c732f8
-  React-jsi: a182068133f80918cd0eec77875abaf943a0b6be
-  React-jsiexecutor: dacd00ce8a18fc00a0ae6c25e3015a6437e5d2e8
+  React-Fabric: 8644ea92493088e3ea6743eb3f617733c2692e05
+  React-FabricImage: 6c09f0a5a4c564311cf195fbce34d7bd84196515
+  React-graphics: 87ba141b72379824c7835224c1a87993683151a8
+  React-hermes: 0f64b997c565aec9f43300ae177c70356714e4b4
+  React-ImageManager: 1bc92d558d4d5de07c6c1a7244d33ad2a872728e
+  React-jserrorhandler: 0b1476485be6d79f09a8f0548c355b1cc14e8f21
+  React-jsi: 757f92f9775686d70e2a50dae04ef1435e598a9b
+  React-jsiexecutor: b3a6cdcdc5b3a476dab90c432e0dabfb32965905
   React-jsinspector: 03644c063fc3621c9a4e8bf263a8150909129618
-  React-logger: 66b168e2b2bee57bd8ce9e69f739d805732a5570
-  React-Mapbuffer: 9ee041e1d7be96da6d76a251f92e72b711c651d6
-  react-native-pager-view: ffde7887fb8dbf2d5b7a5df6d558f9e9a32942c5
+  React-logger: b42a493ae72922d8d6a497038359240ffd457119
+  React-Mapbuffer: 2cd1af67c3754dfb934948448125f0e051586db7
+  react-native-pager-view: 9f2c1f6407b255bdac76172dd0ecaec88bd4b688
   React-nativeconfig: d753fbbc8cecc8ae413d615599ac378bbf6999bb
-  React-NativeModulesApple: 964f4eeab1b4325e8b6a799cf4444c3fd4eb0a9c
+  React-NativeModulesApple: 4cc974c51ebc4911173bbe5d5897ad55ebc8b90f
   React-perflogger: 29efe63b7ef5fbaaa50ef6eaa92482f98a24b97e
   React-RCTActionSheet: 69134c62aefd362027b20da01cd5d14ffd39db3f
-  React-RCTAnimation: 3b5a57087c7a5e727855b803d643ac1d445488f5
-  React-RCTAppDelegate: a3ce9b69c0620a1717d08e826d4dc7ad8a3a3cae
-  React-RCTBlob: 26ea660f2be1e6de62f2d2ad9a9c7b9bfabb786f
-  React-RCTFabric: bb6dbbff2f80b9489f8b2f1d2554aa040aa2e3cd
-  React-RCTImage: 27b27f4663df9e776d0549ed2f3536213e793f1b
-  React-RCTLinking: 962880ce9d0e2ea83fd182953538fc4ed757d4da
-  React-RCTNetwork: 73a756b44d4ad584bae13a5f1484e3ce12accac8
-  React-RCTSettings: 6d7f8d807f05de3d01cfb182d14e5f400716faac
-  React-RCTText: 73006e95ca359595c2510c1c0114027c85a6ddd3
-  React-RCTVibration: 599f427f9cbdd9c4bf38959ca020e8fef0717211
-  React-rendererdebug: f2946e0a1c3b906e71555a7c4a39aa6a6c0e639b
+  React-RCTAnimation: ed774e28e707ce47b1e2dc6aa7f8f3267b815061
+  React-RCTAppDelegate: cf29aa6cd53d7f31e860a1cb5b5a0b11ae7a7793
+  React-RCTBlob: 31c88e549f2e47e6793fd5673ea108d07cc4731a
+  React-RCTFabric: 772da85b866d2148a974b5453ab41c4344017d47
+  React-RCTImage: 1f75f5d0539b381f70981386b1459fbb2c21eb9b
+  React-RCTLinking: febd566d57a9cb05a02f39771ccc8c20f8432e89
+  React-RCTNetwork: d427de729372fd50d7cb601db64d0fcd9ea9a514
+  React-RCTSettings: 73594c6c8c334c7d958cf98ac72335f3e4df9bf5
+  React-RCTText: f1079c24f45cec6ddb6363c12ad87f9a940b2ddb
+  React-RCTVibration: 62420b57a47482d1b88dde64ba88d333f2625aab
+  React-rendererdebug: a474ec4cdfed75211dce6c3828de8391cc5c4280
   React-rncore: 74030de0ffef7b1a3fb77941168624534cc9ae7f
   React-runtimeexecutor: 2d1f64f58193f00a3ad71d3f89c2bfbfe11cf5a5
-  React-runtimescheduler: df8945a656356ff10f58f65a70820478bfcf33ad
-  React-utils: f5bc61e7ea3325c0732ae2d755f4441940163b85
-  ReactCommon: 45b5d4f784e869c44a6f5a8fad5b114ca8f78c53
-  RNFlashList: b521ebdd7f9352673817f1d98e8bdc0c8cf8545b
-  RNGestureHandler: 727b656d5a3fa247aac2c8cc70b8757356066451
-  RNReanimated: 3e23d4be380e295e504b7b3b3a357df60e1168a2
+  React-runtimescheduler: 96207cc454b77b5f161c7be499db04781207f819
+  React-utils: dd1e04ea7105dc58637939b50f1a74a5dd634ec4
+  ReactCommon: 35e3b6a1c75d462acb0155e38e627b98d5bf586b
+  RNFlashList: 23b2c67aa684179d29c8c2f468c6f5334e609951
+  RNGestureHandler: cd5bdc518a0e978368a78837474fa45edc73235f
+  RNReanimated: a2e0cf9b23c6b90eb72bd149fca909286d353d07
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
 
 PODFILE CHECKSUM: d24f755bbcadb571fc9ac9864a1a108c5e1f6b83
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.15.2

example/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@legendapp/list": "^1.0.0-beta.16",
     "@shopify/flash-list": "^1.6.4",
     "expo": "^50.0.14",
     "expo-constants": "~15.4.5",

example/src/App.tsx

@@ -23,6 +23,7 @@ import FlashList from './FlashList'
 import HeaderOverscrollExample from './HeaderOverscroll'
 import Lazy from './Lazy'
 import LazyNoFade from './LazyNoFade'
+import LegendList from './LegendList'
 import MasonryFlashList from './MasonryFlashList'
 import MinHeaderHeight from './MinHeaderHeight'
 import OnTabChange from './OnTabChange'
@@ -41,6 +42,7 @@ import { ExampleComponentType } from './types'
 const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   Default,
   FlashList,
+  LegendList,
   DefaultCustomLabels,
   Snap,
   RevealHeaderOnScroll,

example/src/LegendList.tsx

@@ -0,0 +1,85 @@
+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 ExampleComponent from './Shared/ExampleComponentLegendList'
+import ReText from './Shared/ReText'
+import { ExampleComponentType } from './types'
+import { useCurrentTabScrollY } from '../../src/hooks'
+
+const title = 'LegendList (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 || 0 - MIN_HEADER_HEIGHT)],
+            [0, (height || 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
+      allowHeaderOverscroll
+      renderHeader={() => <Header />}
+      minHeaderHeight={MIN_HEADER_HEIGHT}
+    />
+  )
+}
+
+Example.title = title
+
+export default Example
+
+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,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+})