Button on a card does not work on iPhone 7

[appsciences]

Hello,

I have cards with buttons on them, however the buttons do not work on iPhone 7 only. Tried several phones. Code:

import React from 'react';
import {Alert, Text, TouchableHighlight, View, StyleSheet} from "react-native";
import Swiper from "react-native-deck-swiper";

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
              <Swiper
                  ref='swiper'
                  cards={['asdf','23423']}
                  renderCard={(question) => {
                      return (
                          <TouchableHighlight
                              onPress={() => Alert.alert('I work')}>
                            <Text> {question} </Text>

                          </TouchableHighlight>
                      )
                  }}
                  cardIndex={0}
              >
              </Swiper>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Same code without swiper works fine.

import React from 'react';
import {Button, Alert, Text, TouchableHighlight, View, StyleSheet} from "react-native";
import Swiper from "react-native-deck-swiper";

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    onPress={() => Alert.alert('asdf')}>
                    <Text> I like pants  </Text>

                </TouchableHighlight>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

I highly appreciate any help. Thanks!

[KhalilKhalaf]

Yes I am having (debugging) similar issue here, where on the simulator (Iphone 6 10.3) everything works fine but on the mobile (Iphone 6s 10.3.3) some weird behavior happens.

Only some areas of the button functions (I will say only the edges).

[bdunn313]

@alexbrillant I'd love to contribute a possible fix to this but I'm running into some issues getting up and running in contributing to this project. Any chance you could provide guidance on CONTRIBUTING? Thanks! 😄

[alexbrillant]

@bdunn313 You need to fork my repository, and create a pull request. Here is how : https://help.github.com/articles/creating-a-pull-request-from-a-fork/

There is an example react native project in the Exemples folder. You can run it and use the source code inside Swiper.js and styles.js.

Thanks !

[bdunn313]

@alexbrillant Sorry - I should have clarified. I know how to fork, etc. I was just having trouble building the Exemple folder, but I did figure it out.

I have not isolated the issue yet, but I'm looking into it. As I get closer, I may ping you with progress in case there's any insight you can provide if that's alright with you.

Thanks - and 👍 for a great package!

[webraptor]

This also happens on iPhone 6 Plus.

[webraptor]

From https://github.com/alexbrillant/react-native-deck-swiper/pull/41

If within the swipe cards (aka panResponder) one has touchable items that do not work, here are some solutions:

1. Add hitslop on touchable items (touchableOpacity, touchableWithoutFeedback, whatever you have etc) that are directly within the render card method.
2. If the touchables mentioned at point (1.) are within an Animated.View class, use onPressOut in favor of onPress which isn't triggered by 3D touch devices.

With respect to the code above, try adding hitSlop={{ top: 12, left: 36, bottom: 0, right: 0 }} to your touchableHighlight or switching to onPressOut instead of onPress and everything should run smoothly.

PS: I think we can close this issue now that we have a solution at hand.

[alexbrillant]

Fixed in 1.2.9

[appsciences]

Thanks so much to everyone that contributed to this. Unfortunately the issue still occurs on Samsung S8+. Seems to be deep touch related.