How to set up a scrollview in interactive element?

[JakeHadley]

Environment

• Android or iOS: Yes
• Simulator or Device make/model: Android OnePlus 6T
• react-native: 60.4
• react-native-interactable(interactive): 0.1.15

Context

Trying to make a bottom sheet type interactive element

Expected Behavior

ScrollView should work as expected.

Actual Behavior

...Scrollview does not work as expected...

Steps to Reproduce

Can't seem to get a snack working: https://snack.expo.io/S1uwiRtLB
It's the map example from Interactable. Just copy and paste the inner content a few times and add a scrollview. Profit.

[woodpav]

Use my package. react-native-interactive on npm. Try putting the Interactive.View inside the ScrollView. If that doesnt work its probably because of problems with how Interactive.View captures touch events in which case I suggest using a PanResponder. Alternatively you can make the Interactive.View "scrollable" by including the translateY param on the transform style prop.

[JakeHadley]

We're you able to take a look at the snack? I can't get it to work with interactive...

[woodpav]

The reason is that interactive requires native modules which usually cannot be linked on snack. Also there is no ScrollView

[JakeHadley]

Oh ok. Either way, how would you modify the code on the snack to do what we want it to do? Intuitively it doesn't make sense to put the interactive in a scrollview. Should it be more like (interactive->scrollview->interactive)?

[woodpav]

I'm not goning to write code for you. No, interactive captures touch events - you'll have better luck with PanResponder. Google ScrollView in a pan responder.

[JakeHadley]

I'm not asking you to write code. I'm asking for clarification because what you were saying wasn't making much sense with the use case. But thanks for your help. I'll look into PanResponder.