Conflict with TouchableOpacity / TouchableWithoutFeedback...

When using any Touchable component (instead of <View>) as the row container, the re-ordering doesn’t work.

<Animated.TouchableOpacity style={[
        styles.row,
        this.state.style,
      ]}>
      <Image source={{uri: data.image}} style={styles.image} />
      <Text style={styles.text}>{data.text}</Text>
</Animated.TouchableOpacity>

[harrisonturton]

I’ve run into this issue – TouchableOpacity causes the re-ordering functionality to fail. My code:

<SortableList
     data={this.state.data}
     renderRow={({ data, active }) => {
         return (
             <TouchableOpacity style={styles.card}>
                 <Text>Row</Text>
             </TouchableOpacity>
         );
     }}
/>

When I change TouchableOpacity into View it works fine.

[mkhizerali]

I’m also facing same issue. Have to go through with the whole idempotent logic including revamp of handling click events in parent container. would be hugely appreciable of someone to add please status or pull request.