Component nested in a scrollview

[jared-94]

First thank you for your nice lib !

My problem appears when ReorderableList is nested inside a scrollview. It works fine if the parent is not scrolled but as soon as we scroll, the drag mechanism is unusable, probably because the position of ReorderableList changed.

Do you have an idea to solve this ?

[omahili]

Hi @jared-94, sorry for the late response.

Rather than nesting a ReorderableList into a ScrollView, can you try removing the ScrollView and rendering the other components, that you would put into it, as ListHeaderComponent and/or ListFooterComponent?

Nesting VirtualizedLists into ScrollViews isn't recommended.

[jared-94]

I solved my problem with something like that

const enableScroll = (value) => {
   scrollViewRef.current?.setNativeProps?.({ scrollEnabled: value });
}

const onMomentumScrollEnd = (e) => {
  listRef.current?.setYoffset?.(e.nativeEvent.contentOffset.y);
}

const onEndDrag = () => {
   enableScroll(true);
   listRef.current?.setMinDist?.(50)
}

return (
  <ScrollView ref={(ref) => scrollViewRef.current = ref} onMomentumScrollEnd={onMomentumScrollEnd} >
    <Something />
    <ReorderableList
                      ref={(ref) => listRef.current = ref}
                      data={data}
                      renderItem={(renderProps) => (
                         <Pressable onPressIn={(pressProps) => {
                              listRef.current?.setMinDist?.(0);
                              drag(pressProps);
                              enableScroll?.(false);
                            }} style={{ width: 30, height: 30 }} >
                              <MyDraggableItem />
                           </Pressable>
                       )}
                    onReorder={setNewData}
                    keyExtractor={(i) => `${i.id}`}
                    dragScale={1.025}
                    bounces={false}
                    onEndDrag={onEndDrag}
     />
    <OtherThings />
  </ScrollView>
);