chore: fix nested gesture events propagation

azimgd · May 18, 2024 · 41a54b7 · 41a54b7
1 parent 7f6e32f
commit 41a54b7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -4,15 +4,17 @@ ShadowList is a new alternative to FlatList for React Native, created to address
 It invokes Yoga for precise layout measurements of Shadow Nodes and constructs a Fenwick Tree with layout metrics for efficient offset calculations. By virtualizing children and rendering only items within the visible area, ShadowList ensures optimal performance. It's built on Fabric and works with React Native version 0.74 and newer.
 
 ## Out of box comparison to FlatList
-| Feature                       | ShadowList  | FlatList   |
-|-------------------------------|-------------|------------|
-| Smooth Scrolling              | ✅           | ❌         |
-| Maintain Content Position     | ✅           | ❌         |
-| No Content Flashing           | ✅           | ❌         |
-| Long List initialScrollIndex  | ✅           | ❌         |
-| Bi-directional Scrolling      | ✅           | ❌         |
-| Native Inverted List Support  | ✅           | ❌         |
-| 60 FPS Scrolling              | ✅           | ❌         |
+| Feature                          | ShadowList  | FlatList   |
+|----------------------------------|-------------|------------|
+| 60 FPS Scrolling                 | ✅           | ❌         |
+| No Content Flashing              | ✅           | ❌         |
+| No Sidebar Indicator Jump        | ✅           | ❌         |
+| Maintain Content Position        | ✅           | ❌         |
+| Fast initialScrollIndex          | ✅           | ❌         |
+| Bi-directional Scrolling         | ✅           | ❌         |
+| Nested ShadowList (ScrollView)   | ✅           | ❌         |
+| Natively Inverted List Support   | ✅           | ❌         |
+| Smooth Scrolling                 | ✅           | ❌         |
 
 ## Scroll Performance
 | Number of Items  | ShadowList                 | FlatList Speed       |

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -6,29 +6,36 @@ import {
   Text,
   FlatList,
   Pressable,
+  TouchableOpacity,
 } from 'react-native';
 import { FlashList } from '@shopify/flash-list';
 import ShadowListContainer from 'shadowlist';
 import sample from './sample.json';
 
 const CustomComponent = ({ item, index }: { item: any; index: number }) => {
   return (
-    <View style={styles.item}>
+    <TouchableOpacity style={styles.item}>
       <Text style={styles.username}>
         {index} - {item.username}
       </Text>
       <Text style={styles.text}>{item.text}</Text>
-    </View>
+    </TouchableOpacity>
   );
 };
 
 const ListHeaderComponent = () => {
   return (
     <View style={[styles.item, styles.header]}>
       <Text style={styles.username}>Header</Text>
-      <Text style={styles.text}>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit.
-      </Text>
+
+      <ShadowListContainer
+        contentContainerStyle={styles.container}
+        data={sample}
+        renderItem={({ item, index }) => (
+          <CustomComponent item={item} index={index} />
+        )}
+        horizontal
+      />
     </View>
   );
 };
@@ -145,6 +152,7 @@ const styles = StyleSheet.create({
   },
   header: {
     backgroundColor: '#0984e390',
+    height: 200,
   },
   footer: {
     backgroundColor: '#0984e390',

diff --git a/ios/ShadowListContainer.mm b/ios/ShadowListContainer.mm
@@ -18,7 +18,6 @@ @interface ShadowListContainer () <RCTShadowListContainerViewProtocol>
 
 @implementation ShadowListContainer {
   UIScrollView* _scrollContainer;
-  UIView* _scrollContent;
   ShadowListContainerShadowNode::ConcreteState::Shared _state;
   CachedComponentPool *_cachedComponentPool;
   int _cachedComponentPoolDriftCount;
@@ -43,16 +42,14 @@ - (instancetype)initWithFrame:(CGRect)frame
     _scrollContainerLayoutHorizontal = defaultProps->horizontal;
 
     _props = defaultProps;
-    _scrollContent = [UIView new];
     _scrollContainer = [UIScrollView new];
     _scrollContainer.delegate = self;
     _scrollContainer.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
 
-    [_scrollContainer addSubview:_scrollContent];
     self.contentView = _scrollContainer;
 
     auto onCachedComponentMount = ^(NSInteger poolIndex) {
-      [self->_scrollContent addSubview:[self->_cachedComponentPool getComponentView:poolIndex]];
+      [self->_scrollContainer addSubview:[self->_cachedComponentPool getComponentView:poolIndex]];
     };
     auto onCachedComponentUnmount = ^(NSInteger poolIndex) {
       [[self->_cachedComponentPool getComponentView:poolIndex] removeFromSuperview];

diff --git a/ios/ShadowListItem.mm b/ios/ShadowListItem.mm
@@ -29,9 +29,6 @@ - (instancetype)initWithFrame:(CGRect)frame
   if (self = [super initWithFrame:frame]) {
     static const auto defaultProps = std::make_shared<const ShadowListItemProps>();
     _props = defaultProps;
-    _view = [[UIView alloc] init];
-
-    self.contentView = _view;
   }
 
   return self;