Conflict with TouchableOpacity / TouchableWithoutFeedback...

[JonathanWi]

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>

[gitim]

What is Animated.TouchableOpacity? There is no TouchableOpacity in Animated from react-native. I've tried

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

and re-ordering works fine. If you want to use TouchableWithoutFeedback instead of TouchableOpacity you need to wrap children into additional View

[gitim]

It seems that the explanation is clear and issue is solved. If you still have questions please reopen it.

[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.

[mckrava]

Have the same issue as harrisonturton.

[rhazegh]

@gitim Let's reopen this issue. I have the exact same problem as @harrisonturton

[LiamLuUW]

@harrisonturton is there a fix for using <TouchableOpacity> in row item?

[rhazegh]

related issue #105 (simplified steps to reproduce the bug)

[m-alikhizar]

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.