SortableList sorting breaks when inside a ScrollView and list is longer than screen

[jcurtis]

Any ideas on how to go about this?

I need to have my entire SortableList inside a ScrollView along with some other elements. Sorting works fine up until the point where there are enough rows to push past the bottom of the screen. This makes the container ScrollView activate and breaks any kind of sorting.

<ScrollView>
  <View>{someStuff}</View>
  <CardView>
    <SortableList {...blah}/>
    <View>{moreStuff}</View>
  </CardView>
</ScrollView>

I was thinking of possibly adding renderHeader which would act similar to renderFooter except on top. Unfortunately due to the UX requirements it's not quite possible since the list and footer need to be inside a CardView with an elevation specified and the header needs to be outside of it. I need the entire view to scroll when dragging something.

[xVanilla]

Have you got some solution for the SortableList in ScrollView? I have the same problem...

[jcurtis]

@xVanilla I did not. I ended up just rendering the {moreStuff} in a separate container with it's own elevation. For the header content I did add the renderHeader prop that works the same as renderFooter.

[xVanilla]

@jcurtis mmh.. I have no problem for the header. I just wanted put SortableList in ScrollView and make it work. Alright, I will try to find an other solution :/. Thanks for your answer!

[jcurtis]

Sorry @xVanilla I should have added more details: Adding renderHeader allowed me to make the SortableList component the only component in the area I wanted to be scrollable. That made it so I didn't have a wrapping ScrollView in the layer above it anymore.

[markentingh]

In my experience, this is the desired outcome of having a scrollview inside of another scrollview, since the parent scrollview expands to the height of the visible area, and the child scrollview expands completely to the contents of its children.

[dar0x]

for those who did not find the solution:

1. declare a variable to disable the scroll
2. when an item is dragged change the state of the variable

<ScrollView  scrollEnabled={this.state.scrollenabled}>
  <SortableList
    onActivateRow={key => {
     this.setState({ scrollenabled: false })
    }}
   onReleaseRow={key => {
      this.setState({ scrollenabled: true })
    }}
   />
</ScrollView>

`