Row OnPress works on Simulator but not on Mobile

[KhalilKhalaf]

So on my simulator, I can press on a row to navigate to a screen, and I can long press a row to drag then drop it.

But on the iphone, row onPress does not work. Is it only me?

    renderRow(data)
    {
        return (
            <View style={{marginTop: 10}}>
                <MyComponent data={data.data} active={data.active} onPress={() => this.showScreenB(data.data)} />
            </View> )      
    }

and then MyComponent renders this: (I use onPress in the one and only TouchableOpacity)

        return (
            <Animated.View style={[ styles.row, this._style,]}>
                <View style={{}}>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                            <View>
                                <Text style={styles.rowTitle}>{this.props.data.title}</Text>
                            </View>
                        </View>  
                        <TouchableOpacity onPress={this.props.onPress} style={{width: 40, height: 40, marginTop: 5}}>         
                            <Icon name="dots-three-vertical" size={25} style={{color: '#aaaaaa', marginLeft: 10}} /> 
                        </TouchableOpacity> 
                    </View>
                    <View style={{  marginTop: 10, height: 1, backgroundColor: 'gray', marginRight: 10, }}/>
                </View>
            </Animated.View>
        );

[gitim]

Have not really tested with TouchableOpacity, but in my case I used with touchable native component and it worked fine:

(speaker icons inside rows are native and touchable).

Could you fork and modify Row component in Basic example to reproduce your case?

[KhalilKhalaf]

I see, can you please share the code of your touchable? Just for documentation and for me to follow your pattern if that is possible.

Beautiful work man and good job 👍

[gitim]

I see, can you please share the code of your touchable?

No, I can't, it is private.

[KhalilKhalaf]

What do you mean by touchable native? I tried TouchableHighlight and standard Button and both did not work on mobile (but worked on simulator)

[gitim]

What do you mean by touchable native?

native component, that can be touched

[okilimnik]

I've created pull request for this issue: https://github.com/gitim/react-native-sortable-list/pull/64

[adamjacob]

First off I'd like to stay this library is great, has been so helpful!

I just wanted to chime in because I'm currently experiencing the same issues. I have TouchableOpacity elements in my row. The TouchableOpacity when tapped, do the whole opacity fade so they are receiving the touch but the onPress never gets fired. I'm assuming maybe the touch event is bubbling up to the PanResponder of SortableList component?

Could be related to this issue? https://github.com/facebook/react-native/issues/3082

[gitim]

This bug because of setting onMoveShouldSetPanResponder in Row, but it is required for enabling dragging by any point of the row, this commit fixes the initial bug, but disables dragging by holding row by touchable elements. So, I am still investigating how to fix the bug w/o adding new.

upd: the issue is described in stackoverflow

[joncursi]

Same issue for me. I'm trying to replicate iOS's editable list behavior, where you can drag to re-arrange, or tap the red circle to delete:

Unfortunately, this only works on the Simulator. On both iOS and Android physical devices, you can't reliably tap the red circle. Every once in a blue moon the touch will respond, but it's rare.

Any updates on how to get around this? Maybe if there were Hitbox support this issue would be mitigated.

[joncursi]

I figured out the problem and came up with a partial workaround. The problem is that when you use onPress, react-native-sortable-list "steals" the touch event away from your custom touchable. This happens after 200ms (the default activation time). So what you need to do is "beat" react-native-sortable-list to the punch. You can do this by using onPressIn instead of onPress - all RN touchables support this prop.

onPressIn is called immediately, so it will be invoked before react-native-sortable-list's invocation that takes place at 200ms, so the touch is never "stolen away".

The only caveat here is that the touch happens on press down, rather than the usual on press up, so the user can't cancel their touch event by sliding their finger away. But for my situation, it's good enough until this issue is fixed in this library.

[nicolasepiscopo]

I've had the same issue and the best way to avoid it is using onPressRow prop instead of the inner component onPress. You can get the item index from the function param.

onPressRow? (function) (key) => void Called when a row was pressed.