Not working with scrollview

[nidhiparmar02]

I have put the whole draggable component inside scrollview and I managed the state as well but I when I start dragging a block and bring it down to end of the list then it does not render next items. I need to manually scroll to bottom of the scrollview to see where new block has been placed.

Uploading Screen Recording 2022-07-14 at 4.28.28 PM.mov…

[arunvignesh-foodhub]

Any update on this issue?

[AnthonyJamez12]

The issue arises because the ScrollView remains active while the draggable item is being interacted with. To fix this, you can dynamically disable scrolling in the ScrollView when a user touches the draggable item and re-enable it when the touch ends.

Solution:
Use useState to manage the scroll state of the ScrollView and update it during the dragging process. Here's the complete solution:

jsx
Copy code
import React, { useState } from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { DraggableGrid } from 'react-native-draggable-grid';

const MyComponent = () => {
const [disableScrolling, setDisableScrolling] = useState(true);
const [data, setData] = useState([
{ key: '1', name: 'Item 1' },
{ key: '2', name: 'Item 2' },
{ key: '3', name: 'Item 3' },
{ key: '4', name: 'Item 4' },
]);

const renderItem = item => (
<View
style={styles.itemContainer}
onTouchStart={() => setDisableScrolling(false)} // Disable scrolling on touch
onTouchEnd={() => setDisableScrolling(true)} // Re-enable scrolling when touch ends
>

{item.name}


);

const onDragStart = () => {
setDisableScrolling(false); // Ensure scrolling is disabled during drag
};

const onDragRelease = newData => {
setData(newData); // Update the grid data after drag
setDisableScrolling(true); // Re-enable scrolling when dragging ends
};

return (
<ScrollView
style={styles.scrollView}
scrollEnabled={disableScrolling} // Dynamically control scrolling
>




);
};

const styles = StyleSheet.create({
container: {
padding: 10,
},
itemContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ddd',
margin: 5,
borderRadius: 8,
height: 100,
},
itemContent: {
justifyContent: 'center',
alignItems: 'center',
},
scrollView: {
flex: 1,
backgroundColor: '#f9f9f9',
},
});

export default MyComponent;