TouchableOpacity onPress() function doesn't works

492 Views Asked by At

I tried to create a DraggableList with some checkboxes, the problem is my component doesn't trigger the "onPress" while the "onLongPress" method working fine...

I tried to remove the "onLongPress" method, but still the same.

Here is my whole component :

class Menus extends React.Component {

  state = {
    menusItems: global.conf.Menus.map((d, index) => ({
      id: d.id,
      key: `item-${d.id}`,
      label: d.label,
      path: d.path,
      value: d.value,
      backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${index *
        5}, ${132})`,
    })),
  };

  renderItem = ({item, index, drag, isActive}) => {
    return (
      <TouchableOpacity
        style={{
          backgroundColor: isActive ? 'blue' : item.backgroundColor,
          alignItems: 'center',
          justifyContent: 'center',
        }}
        onLongPress={drag}
        onPress={() => console.log('puff')}>
        <Checkbox
          status={item.value ? 'checked' : 'unchecked'}
          key={item.id}
          title={item.label}
        />
      </TouchableOpacity>
    );
  };

  return (
      <View style={{flex: 1}}>
        <DraggableFlatList
          data={this.state.menusItems}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => `draggable-item-${item.key}`}
          onDragEnd={({data}) => this.setMenus(data)}
        />
      </View>
    );
  }
}

export default Menus;

I don't know what is wrong ....

0

There are 0 best solutions below