The Back Handler is working，FlatView dont't scroll

[13627491210]

hello, The Back Handler is working，but FlatView is not working, dont't scroll 。 #195

[13627491210]

after Back Handler, FlatView don’t scroll 。

[13627491210]

刚开始 FlatView 是可以滚动，但是当手势返回 关闭actions-sheet 后，FlatView 就滚动不了了。并且往下滑动也无法关闭 actions-sheet。

[ammarahm-ed]

Are you using useScrollHandlers hook

[13627491210]

Are you using useScrollHandlers hook

yeah , and use ref ,is not SheetManager 。

[ammarahm-ed]

Are you using useScrollHandlers hook

yeah , and use ref ,is not SheetManager 。

I will test.

[13627491210]

https://user-images.githubusercontent.com/37203543/187102936-07aa1f02-9a21-4ae7-ace4-81a4fdb7a862.mp4

[13627491210]

68BCEC0D0AC9C4C57828B418C152FF72.mp4

like this @ammarahm-ed

[ammarahm-ed]

@13627491210 have you tried on a real device? Is it the same?

[ammarahm-ed]

And can you share basic code of your ActionSheet component?

[13627491210]

@13627491210 have you tried on a real device? Is it the same?

yes,

[13627491210]

const scrollHandlers = useScrollHandlers('FlatList-1', actionSheetRef);

    <ActionSheet
        id="helloworld_sheet"
        ref={actionSheetRef}
        defaultOverlayOpacity={0}
        headerAlwaysVisible
        animated
        gestureEnabled={true}>

        <FlatList
          alwaysBounceVertical
          ref={scrollViewRef}
          id="FlatList-1"
          {...scrollHandlers}
          style={{height: 350, width: '100%'}}
          showsVerticalScrollIndicator={false}
          nestedScrollEnabled={true}
          showsVerticalScrollIndicator={false}
          data={songs}
          renderItem={item => {
            return SongItem({data: item.item, index: item.index});
          }}
          keyExtractor={item => item.id}
        />
      </ActionSheet>

[ammarahm-ed]

I was able to reproduce this. There's no easy way to fix the issue. We might need to use react-native-gesture-handler to fix this properly.

[focux]

I'm also experiencing this, not sure what broke it because it was working before.

[13627491210]

I was able to reproduce this. There's no easy way to fix the issue. We might need to use react-native-gesture-handler to fix this properly.

but 0.7 is OK 。

[13627491210]

I'm also experiencing this, not sure what break it because it was working before.

yeah, but V0.7 is OK , have you tried?

[focux]

That's right, v0.7 works well. If I recall right v0.8 is a complete rewrite of the library and in my opinion, it's smoother than v0.7, that's why I prefer reporting/fixing the bugs and not downgrading haha.

[13627491210]

That's right, v0.7 works well. If I recall right v0.8 is a complete rewrite of the library and in my opinion, it's smoother than v0.7, that's why I prefer reporting/fixing the bugs and not downgrading haha.

yeah, v0.8 is great

[ammarahm-ed]

That's right, v0.7 works well. If I recall right v0.8 is a complete rewrite of the library and in my opinion, it's smoother than v0.7, that's why I prefer reporting/fixing the bugs and not downgrading haha.

V0.7 uses a ScrollView that's why and the new impl uses Animated.View + PanResponder. So we will have to use react-native-gesture-handler lib to get scrollviews/flatlists working properly without issues.

PanResponder has some limitations in what it can do especially with multiple gestures such as scrolling + panning. I will find a solution to this soon.

[focux]

Sweet! I tried to take a look at fixing the issue but I don't understand very well all the moving pieces inside the PanResponder so I think I'll leave that to you haha. Thank you in advance.

[13627491210]

Sweet! I tried to take a look at fixing the issue but I don't understand very well all the moving pieces inside the PanResponder so I think I'll leave that for you haha. Thank you in advance.

if you fixed it ,please tell me, thanks.

[focux]

@ammarahm-ed I'm trying to fix the scrolling issue and if I remove the scrollEnabled property and the setNativeProps calls that disable scrollEnabled from the useScrollHandlers hook, everything works as expected, however, I'm sure that that logic is there for some reason so probably I'm missing something. Could the bug be related to that or is that needed for another use case?

[focux]

These are the changes that fixed it for me, I'm not sure what implications it has but I'll be using it as a workaround until we find a proper fix.

https://github.com/focux/react-native-actions-sheet/commit/6a781a0e8c6d71b5a63d30ff34e24ceda6402c14

[ammarahm-ed]

@focux does it make scrolling+ gestures both work inside the ScrollView area?

[focux]

@ammarahm-ed Yes, I think it does. Not sure if there's another gesture that should work inside the scroll view, besides swiping the sheet down when the scroll view reaches the top.

[ammarahm-ed]

I will test your implementation.

[ammarahm-ed]

Hey @focux Did you fix on android or iOS or is it working fine now on both?

[focux]

So, it's working perfectly on iOS, and on Android, the list works but sometimes, when reaching the top of the list, the swipe doesn't close the action sheet.

[ammarahm-ed]

I tested on iOS and yes, it seems to work without calling setNativeProps. On android still have to give it a try.

[focux]

Sweet! Also, removing setNativeProps adds support for using more list components, like FlashList which doesn't support setNativeProps. Also, RN recommends migrating off that, to another method because that won't work on Fabric [1].

1. https://reactnative.dev/docs/new-architecture-library-intro#migrating-off-setnativeprops

[ammarahm-ed]

@focux Hmm will have to see the issue on android though. If we can workout a solution that's dependency free for lists/scrolling views, that would be great I think. 😄 I have really tried very hard to not depend on anything except what RN offers.