Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drag and drop from ScrollView React Native

Tags:

react-native

I want to split the screen in two for a drag and drop list. When I use a View it works fine. But I have to use ScrollView as second column has multiplay content.

How do I overlay Dropitem from ScrollView to View?

Snack https://snack.expo.io/@sitenative/two-columns-drag

enter image description here

like image 918
Anton Bogomolov Avatar asked Jun 16 '26 06:06

Anton Bogomolov


1 Answers

Even if this might not answer your question, I found a kind of solution/workaround for your issue which maybe is useful to you. I moved the style from the scrollView style prop to contentContainerStyle, and basically used the space that remained from the whole scrollView as the view where the items will be dropped.

  <SafeAreaView style={styles.container}>
                <ScrollView
                    style={{backgroundColor: 'brown'}}
                    scrollEnabled={this.state.scroll}
                    contentContainerStyle={styles.drag}
                    showsVerticalScrollIndicator={false}
                    disableScrollViewPanResponder={true}
                    nestedScrollEnabled={true}
                >
                    {sheet.map((object, i) =>
                        <DragItem
                            key={'top_'+i}
                            color={object.color}
                            first={!i}
                            name={object.name}
                            scrollUpdate={this.scrollUpdate}
                        />
                    )}
                </ScrollView>
            </SafeAreaView>
like image 80
dianaqqq Avatar answered Jun 24 '26 01:06

dianaqqq



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!