can't perform drag and drop with function components

[shadow921677]

when I use the function component instead of the component classes I can't perform the drap and drop or any other event, the components are displayed but no action is possible.

[DEVfancybear]

+1

[samuelcelko]

+1 any update on this?

[toptechdevo]

Did you long press the item?

[bjornlll]

I'm having a similar issue: Unable to drag certain items. Will post here again as I learn more. I did try with a component generated from styled.View - that seemed to work.

[bjornlll]

Managed to find a workaround for my own use-case. Class vs. functional components is not what made it break in my case.

Didn't work

const renderItem = (item) => {
  return <CompositeComponent {...item} /> 
}

const CompositeComponent = () => <View><SubComponent>...</SubComponent></View>

Works

const renderItem = (item) => {
  return <View><SubComponent>...</SubComponent></View>;
}

In short: When I copy-pasted my component into the renderItem() function it worked. Incl. with functional sub-components.

[lreardon]

Encountering the same issue. @bjornlll's solution seems to be valid, but it's untenable in practice.

[talktosalvador]

properly declare the useState

  const [state, setState] = useState({
    data: [
      {item: 'some', key: 'one'},
      {item: 'like', key: 'two'},
      {item: 'this', key: 'three'},
    ],
  });

properly declare the render_item

const render_item = ({item, key}) => {
  return (
    <View key={key}>
      <Text style={styles.item_text}> {item} </Text>
    </View>
  );
};

properly use the useState

<DraggableGrid
          numColumns={3}
          renderItem={render_item}
          data={state.data}
          onDragRelease={data => {
            setState({...state, data});
          }}
          itemHeight={buttonsSize}
/>

[amirbhz86]

add this prop

activeOpacity={1}

if you have any TouchableOpacity component in your renderItem

[itrend]

In addition to @bjornlll's workaround, I found out wrapping my single component in a <View> works as well, i.e.

didn't work

const renderItem = (item) => {
  return <CompositeComponent {...item} /> 
}

worked

const renderItem = (item) => {
  return <View><CompositeComponent {...item} /> </View>
}

I'm pretty much showing the same code as @bjornlll, the difference is I didn't copy paste my component in renderItem, I wrapped my component in <View> instead. Hope this is useful to someone.